Add to Dock: Safari’s sweet solution
The Mac Community generally loathes web views and Electron apps. We all want perfect, native Mac apps—even when an interface could be entirely native, and still not be very good. Pragmatically, we ought to recognize that we just aren’t going to get bespoke SwiftUI versions of every little thing we use in our lives. There certainly isn’t a financial incentive to do it on the Mac App Store, and the scary OMG SECURITY warnings deter a lot of non-App-Store use of smaller apps.
This is where Safari’s new Add to Dock command comes in.
You may remember Steve Jobs suggesting we add web pages to our iPhone home screens as a “sweet solution” to not having an App Store, but back then we didn’t have the rich mix of web technologies we have today—they were really just glorified bookmarks. Progressive Web Apps (PWAs) aren’t new either, and in a lot of cases they might be overkill. Making a little container for a site is more than enough, in some cases.
There have been utilities that make apps out of a site, including Fluid, Coherence X, and Unite. Chrome has had the feature for years. But in Sonoma, Apple finally introduced Add to Dock in Safari, building into macOS the ability to package up any site. Here’s how a web app differs from a web page:
When you use a webpage as a web app, it looks and behaves just like it does in Safari. Yet the experience of using a web app differs in several ways.
- A web app functions independently of Safari. It shares no browsing history, cookies, website data, or settings with Safari. In this way, it keeps your browsing separate, similar to using a Safari profile. What you do in a web app stays in the web app.
- A web app has a streamlined toolbar, with only a back button, forward button, and Share button. If you need Safari features such as bookmarks, tabs, or extensions, you can easily switch to Safari: Click the Share button, then choose Open in Safari. Or choose File > Open in Safari.
- A web app can have any name or icon that you want.
- For websites that send notifications, the web app’s icon in the Dock can show the number of unread notifications.
In all other ways, a web app works like any other app. You can even add it as a login item so that it opens automatically when you log in.
While the feature is called Add to Dock, that’s not quite what’s happening. The ‘app’ lives in /Users/your-user-name/Applications, or if you prefer, ~/Applications. If you remove the app’s icon from your Dock, macOS still leaves the ‘app’ in your user folder’s Applications folder.
Break out of tabs
I love tabs as much as everyone else, but sometimes you have a specific site you visit often, and it can get lost in the shifting tabs, bookmarks, etc. You might have a specific window size you want to use for that web site, but not all of your other sites.
This isn’t for every site, just some, and what people find useful will vary, but that’s the beauty of it. Like you wouldn’t want to have an ‘app’ for Six Colors. That would be goofy.
Personally, I wouldn’t try to do this for Discord or Slack, which can be accessed in Safari, but have a lot of AV infrastructure inside of their bloated Electron apps that might not work well in a little Safari container.
Here are some examples I’ve been using:
Fastmail. The first ‘Add to Dock’ for me was Fastmail, which hosts one of my many email accounts. I like to keep all my emails siloed by app, not a unified inbox with work and personal stuff intermingled. Different strokes for different folks. I don’t like Mail on the Mac, even though I use the iOS client, and I’m not going to hop on the latest email client du jour. I also want access to the features Fastmail has on the website, like generating custom email addresses, that I can’t access any other way. Now it’s an app sitting right there in my dock.
Gmail. I’ve historically used Chrome to check my Gmail, and leave Safari signed out of my Google account. Because I prefer siloed email experiences, this wasn’t a huge deal, but sometimes you get those confirmation emails that you have to click on but you really want to keep doing what you were doing in Safari and it’s a whole back and forth that’s not any fun. Also there are all the settings and blah blah blah. It’s why third-party email clients that handle Gmail don’t really do it for me, either. Just like with Fastmail’s web site, the Gmail web site works with all of its own features in an expected way.
Gmail is a little less friendly to set up, if you want to have Safari logged out of your Google account, because you need to log in in Safari, add Gmail to your Dock, then log out in Safari, and then log in to the ‘app’. If you don’t care about where your profile is logged in then this doesn’t matter.
Now you have a Gmail window that can be as big or as small as you want. Any links you click on in these emails will open in your default web browser (Safari, for example). That also means any other Google services you use will open in your default web browser and if it’s not logged into your profile you will be asked to log in. If you’re going back and forth between your Gmail, Calendar, Sheets in Drive, etc. then it’s best to just leave all of this in Chrome where you won’t get the nagging pop-ups to install Chrome, and log in.
The icon Safari uses for Gmail is just the favicon, and it’s hideous. I’d recommend replacing it with your own image. For some reason the Safari team doesn’t let you drag and drop images into the icon field when you’re in the ‘Add to Dock’ dialog, but there is a button where you can select a file. If you want to change the icon later, you can’t do it from the Get Info dialog either. You open the ‘app’ and go to the Settings dialog under the application name, and then click on the icon to bring up a file browser. No drag and drop there, either. Any image you put in will stretch to fit, so stick with square-ish icons. It will pad it out to a squircle shape with white behind it.
Even if I stick to using Gmail in Chrome, on the occasion I need to click on a confirmation link in an email I can always get to it from here with less fuss.
Spotify. I’ve been disenchanted with Apple Music (was I ever enchanted by it? No, no I wasn’t.) People are always so jazzed about Spotify so I figured I would give it a try. I didn’t want to install their Mac app, which people complain about, so I just did it in the browser at first, but I didn’t want to always have Safari open. It’s in my Dock now and it works just fine.
Of course, that also works well because Spotify saves my playback progress of what I was doing so every time I open and close the “app” I can resume exactly where I left off. A feature that Apple, with all the native software, iCloud backends, and trillions of dollars can’t pull off in the Music app.
Mastodon. I love Ivory and use it as my Mastodon client. But sometimes there are some non-Ivory settings I want to get at. If you’re reluctant to pay for Ivory, I whole-heartedly suggest saving your Mastodon page as an app rather than keeping it in a browser tab. Despite Mastodon’s general ugliness, the site is responsive and can be resized down to a little phone-like app, or sized to fit all the columns in the advanced layout.
Single Serving Success
I’d definitely be interested in hearing more examples of sites that work well as an ‘app’, and maybe some web site developers have some ideas to polish up their app to work well in this format. No code signing, no App Store headaches, and no Electron update mechanisms.
The web, and web apps, aren’t going anywhere, so let’s find ways to make useful, less bloated, apps. Sally forth, and Add to Dock.
[Joe Rosensteel is a VFX artist and writer based in Los Angeles.]