iOS Shortcuts Magic: Converting Your Web App into an Extension!
As a web developer, it can be challenging to get the same ease of use on mobile devices that mobile app developers get. Using iOS Shortcuts can help alleviate that problem.
Problem
One of the great things about being technologically inclined is that you can truly appreciate the craft that goes into making beautiful and robust apps. However, on the downside, when you use an app and think there’s some functionality missing, you get the unquenchable desire to build it yourself.
This was the thinking that led us to build Pod Rank, a platform to get unique insights about podcast episodes on Spotify, YouTube, and more. We made the software accessible via the internet as a web app. This was because mobile apps can take up so much space on your device, and web development tools are ubiquitous.
Upon completing the minimum viable product of Pod Rank, we realized it was difficult to get to a page on the platform where one could see unique insights about an individual podcast episode. A user would have to navigate to a browser, search for a YouTube or Spotify podcast episode, click on the matching episode, and then they could view the insights we offer, like AI-generated descriptions and recommendations. This was too cumbersome and would prevent users from wanting to get those insights. Reducing the friction and amount of time to get to the information about a podcast episode was paramount.
Solution 1: Faster Search
The first solution we came up with was to make searching easier. This came from the idea that most people want the insights Pod Rank offers when they’re currently on a podcast episode and considering whether to press play. We thought, “If our users already know which podcast episode they want insights on, why do they need to search.” By the time users would want an AI-generated description or a word cloud, they already had the specific podcast episode handy. They may have had the episode shared with them or found it while browsing on their preferred platform.
Why can’t we just accept the unique identifier of the podcast episode and bring them directly to the insights? This way we can avoid the clicks from searching. So that’s what we did. The URL for a podcast episode would act as that unique identifier because it contains the location (domain) and the identifier (path/query parameter) of the podcast.
While this was a good start to solving the problem, it wasn’t good enough. It still meant that users would need to copy, paste, and manually navigate pages to get to the home page for Pod Rank. How could we bring the apps’ value closer to the user when they’re on a podcast? Would it be possible to go directly to the web app, and open the correct podcast page, all while making it easy for non-technical users to use?
Solution 2: iOS Shortcuts
After a bit of research, we discovered a neat tool, Shortcuts, that was built into all iPhones and iPads. According to the Shortcuts User Guide, “A shortcut is a quick way to get one or more tasks done with your apps.” This meant we could automate some of the actions needed to use what Pod Rank offers.
For our specific use case, we needed to do the following:
- Determine what type of podcast episode our user is looking at (YouTube, Spotify, etc.)
- Get the ID of the podcast episode
- Construct a Pod Rank URL using the aforementioned information
- Trigger everything above, optionally, whenever a user is on a podcast on Spotify, YouTube, etc.
With the robust tools offered and the expansive documentation on the subreddit about Shortcuts, we were able to build everything above and more. To determine the podcast type, we used Shortcuts’ built-in string-matching algorithm. Upon getting a URL, we would look for either the Spotify or YouTube keywords before handling them accordingly.
After knowing what type of podcast we were looking at, we needed to get the ID from the podcast URL. Let’s look at this URL for example.
With string matching, we could tell that it is a YouTube URL because it has ‘youtube’ in the URL. Then, by looking at the query parameters, we know that the ID is iz2HIBUw5Ig, because it comes after the v which stands for video. Luckily for us, there was documentation on built-in iOS Shortcut tools that allowed us to extract these parameters from a URL.
Once we knew what the podcast type and podcast ID were, all we needed to do was construct the URL. Similar to math and computer science, variables in iOS Shortcuts allowed us to store the aforementioned podcast data (type and ID) and refer back to it later. So constructing the URL to direct users to Pod Rank was as easy as piecing the text “https://www.podrank.co/podcast/” with the podcast type and ID.
For all these steps, we needed to figure out how to trigger the above sequence on any podcast episode. Shortcuts allow for multiple trigger types, including running them from the iOS Share Sheet. This is convenient because that’s where iOS users already know to go when they want to copy information. In addition, when you run this via the Share Sheet, it takes the URL from the last page you were on automatically. This means we can run our process on the URL we receive as mandatory input.
Using Shortcuts, it was fast and easy to build an extension for people viewing podcasts on iOS. With all the out of the box components and the plethora of documentation, you don’t need any real software development experience to create impactful tools.
If your interest in Pod Rank and our Shortcut was piqued, we have some good news. We made the Shortcut public for any user to install. To install, please click on this iCloud link and follow the prompts. Upon doing so, whenever you open a podcast on YouTube or Spotify, you should see the following button in your Share Sheet. Ta Da! 🎉
