How to create a web app in Safari with macOS Sonoma

There are a bunch of not-great apps like Spotify and Slack that suck battery life, because basically run a full copy of Google Chrome inside each window. Chrome is a notorious energy hog, and running multiple copies of its Blink engine inside four different apps can take unnecessary memory and resources.

But you can create your own, much better versions using web apps in the upcoming release of macOS Sonoma.

Web apps in Sonoma are easily made directly in Safari and live in your Mac’s Dock. For apps that you use every day, like Spotify, Discord and Slack, it’s easier to launch them from the Dock and move them around separately from your browser tabs.

Safari web apps won’t drain your battery and they’re incredibly easy to use. Although they can be launched and quit independently from Safari, they share the same system resources, so they barely make a splash on performance.

Let me show you how they work.

How to create a web app in Safari

First, a note: Apple hasn’t released macOS Sonoma yet. However, you can get the developer beta by turning on beta software updates in System Settings. Beware, beta software is unstable, drains your battery and carries the risk of data loss. We can expect a public release of macOS Sonoma this October if you can wait.

If you want it now, or if your Mac can’t run Sonoma, there are a number of third-party apps with similar features that you can get today. With Unite, you can choose to load the mobile site and keep it in your menu bar. Flotato even lets you select a tiny square portion of the site to appear live in the Dock icon.

But from my testing, I like Apple’s implementation best. As I’ll show you, it’s seamless and incredibly easy to set up.

Create a web app

From any website or web app, go to the menu bar and click File > Add to Dock. It’ll use the title of the web page for the name of the app, but you can type in a different one.

You can click on the icon to replace it, too, if the site doesn’t have a high-resolution icon. I recommend using macosicons.com to search for a great one. Download it, and from the web app screen, select it to replace the old one.

Click Add when you’re done and the app will show up in your Dock. Click it to launch and you should still be logged in if you were before.

Better energy efficiency, memory usage, battery life

For a direct comparison, I downloaded the official Chrome-based apps for Slack and Discord and compared their usage in Activity Monitor.

The difference in energy consumption is stark. 2–8% for my Discord Safari web app, 10–20% for the official Discord app. That adds up if you leave it open while you’re unplugged.

Comparing file sizes, you’re looking at 244 KB vs. 184 MB for Slack, 15 KB vs. 391 MB for Discord. Apple’s web apps are negligible in storage requirements. Many computers that will run Sonoma have 8 GB of memory and 128 GB of internal storage — installing a lot of Chrome-based web apps can really eat away disk space.

A few settings

In the menu bar, click App Name > Settings and you can choose to hide or show the back/forward buttons in the titlebar, use the website’s background color in the titlebar and clear browsing data.

In traditional Apple fashion, you don’t have a lot of settings. If you want more control and more features, you can turn to third-party apps with more features, Unite and Flotato.

It doesn’t have to stay in your Dock

Adding a web app to your Dock also adds it to the Applications folder in the Finder. You can right-click it, select Options, and uncheck Keep in Dock.

It’ll disappear when you quit the app, but you can always open it again from Launchpad (four-finger pinch gesture on the trackpad) or Spotlight (Command-Space). You can also open the Applications folder by clicking Finder and hitting Shift-Command-A.

I only keep the apps I use literally every day in my Dock — I cut out the other ones like FaceTime and Pages. The Discord web app is useful to have, but I can quickly launch it using the other methods when I need to.

Summary: How to create a web app in Safari

1. Make sure you’re running macOS Sonoma.
2. From any website, go to File > Add to Dock…
3. Give it a custom name or icon and click Add.
4. Click the Dock icon to launch the app.
5. Right-click on the icon and uncheck Options > Keep in Dock if you want to keep it installed but don’t need it in your Dock.