On macOS, there’s an application available called Fluid, which lets you create site-specific web browsers. Many of us use web apps everyday and Fluid allows you to run them side-by-side with your native applications without being sequestered inside of a web browser. Fluid is a handy little tool that every Mac user should have in their arsenal.
I’ve setup a Fluid instance of Overcast on my MacBook Air, complete with a proper icon, which let’s me treat Overcast just like any other Mac application. I didn’t have to wait for the developer, Marco Arment, to build a native app, I can just use Fluid to bridge the gap for me.
On iOS, Apple has built similar functionality right into Safari. From any webpage, you can tap on the share button and choose “Add to Home Screen”. Most websites have even setup a custom icon for this purpose, making sure their site’s shortcut doesn’t feel out of place alongside your native apps. But it’s not exactly a sweet solution.
Apple does offer developers a way to force these web apps to open in full screen without all of Safari’s browser chrome, but almost no one uses it. This functionality has fallen out of favor because it’s poorly supported by the system. These full screen web apps don’t use Apple’s latest JavaScript engine, which means they run much slower than they would if you visited them from within Safari, and they don’t save state between launches, which makes multitasking with these apps a nightmare.
Of course, you could always just save these website shortcuts to your Home Screen and let them open up in Safari, but that makes for a pretty mediocre experience. I want to treat these web apps like native applications and I don’t want to be forced to close a browser tab when I’m done using them — I always close my browser tabs when I’m done with them, it’s a sickness. But there is a solution and it’s made possible because of every iOS power users’ favorite utility — Workflow.
To build these site-specific browsers, it just takes two simple actions — a URL action with the web app’s address and the Show Web Page action. When run, Workflow will open up the URL in a Safari View Controller, which gives you access to your action extensions alongside forward, back, and refresh buttons. From there you can give the workflow a name, set an icon color, and a glyph to fit the website or web application’s functionality.
You can run the workflow from within the Workflow app itself or you can add it to Workflow’s Today Widget. But if you want the web app to live alongside your native apps, I suggest adding a custom icon in the Home Screen tab and adding the workflow to your iOS device’s home screen. A simple DuckDuckGo or Google Image search for the site’s name and either “icon” or “logo” should turn up several options.
I’ve already built a handful of these site-specific browser workflows and I expect I’ll find more websites and web apps that I’d like to build them for in the future. Here’s just a few of my favorites:
- Mint, Initial Charge’s analytics software.
- Media Temple, the site’s hosting dashboard.
- Instagram, because they still haven’t built a native iPad app.
There is one major caveat with these workflows — they don’t scale well. You can use them while multitasking with native apps, but you can’t run more than one of these site-specific workflows at a time. Once you launch the second, it tosses out the first one.
You could open some of your web apps in Sidefari with its URL scheme as a workaround — letting you run one web app in Sidefari and another in Workflow. But in my testing, Sidefari often fails to load the web page if the app isn’t already in memory. It happens often enough that this workaround probably isn’t worth exploring. But if you’d like to test it yourself, just replace “http://” or “https://” at the beginning of the URL with with “sidefarihttp://” or “sidefarihttps://”, respectively, and swap the Show Web Page action for the Open URLs action.
But even with the multitasking limitations, being able to run web apps side-by-side with native applications is a neat experience. I hope you’ll find some utility in these workflows, even if you’re just looking for a better way to view Instagram on your iPad.
