How to turn a website into a web app on Mac running macOS Sonoma

macOS Sonoma has a new feature that lets you turn any website into a Mac app. All you need to do is add the website to your Mac’s Dock, and it turns automatically into a web app. In this tutorial, we’ll tell you everything about web apps on Mac and show you how to get an app-like experience with your favorite websites.

Turn website to web app on Mac

Note: Currently, macOS Sonoma is in the developer beta stage. We have an easy tutorial showing you how to install it on a different partition of your Mac.

If you don’t want to get macOS Sonoma, you can add a website shortcut (not a web app) to your Mac’s Dock running an older version of macOS.

About web apps on iPhone and Mac

If you recall, progressive web apps (PWA) have existed on iPhones for many years now. To install it on your iPhone, all you need to do is visit that website in Safari, tap the share button, and add it to your Home Screen. After that, when you tap the website icon on your iPhone Home Screen, it opens as a web app, and you can see it as an app tile in the App Switcher.

However, if the website owner/developer has not designed it to work as a web app, tapping its icon on iPhone Home Screen will simply open that site in Safari.

In other words, web apps on iPhone and iPad need the website’s developer support.

But this is better and more streamlined on Mac running macOS Sonoma. Here, you can turn any website into a web app, even if it doesn’t natively support being a web app.

For example, if you add iDownloadBlog’s website to your iPhone Home Screen and tap it, it will open in Safari because we don’t natively have web app support (as we already have an iOS app). However, you can easily turn iDownloadBlog into a web app on your Mac, as it requires no support from the site developer.

How to add a website as a web app on your Mac

1) Open Safari and visit the website you want to turn into a web app.

2) Click the share icon from the top right and select Add to Dock. You can also click File > Add to Dock from the menu bar.

Add to Dock in Safari on Mac

3) Change or shorten the website name if you want, and click Add.

Turn website into a web app on Mac

This website is now added as a web app to your Mac, and you will find its app icon (website icon/favicon) in your Mac’s Dock and the Launchpad.

Note: From now, when you visit a website in Safari whose web app exists, you will see a banner on the top giving you the choice to open the web page in the web app.

Open website in web app on Mac

Using a web app on your Mac

1) Click the web app icon from the Dock or Launchpad to open the website in an app window.

Web app in Mac Dock

2) You can browse this website as you normally do. The back and forward buttons allow you to navigate between pages. You can also use the standard two-finger left and right swipes on the trackpad to go to the next and previous page.

3) And if you would like to visit this website in your Mac’s default browser, click the tiny Safari icon from the top right.

Navigation buttons in web app window on Mac

Opening internal links in web apps

Internal links mean all page links of the same website. For example, all URLs starting with https://www.idownloadblog.com/ are internal links of iDownloadBlog.

Suppose you turn iDownloadBlog into a web app on your Mac running macOS Sonoma:

  • Now, if you click a linked post (like this one), it will open in the same web app window.
  • However, if I set the link to automatically open in a new tab (like this one), clicking it inside a web app will launch a new web app window.
Multiple windows of a web app on Mac
Three windows of a web app on Mac.

Note: You can also right-click over a link and choose Open Link in New Window.

Opening external links in web apps

By external links, we mean all links that are not of that website. For example, if you turn iDownloadBlog into a web app, all links not starting with https://www.idownloadblog.com/ are considered external links.

When you click an external link inside a web app, that link will automatically open in your Mac’s default browser.

Important: In my testing, I found that even subdomains of a website are considered external links. For example, clicking a media.idownloadblog.com (subdomain) link inside the iDownloadBlog web app will open in your computer’s default web browser.

Change the icon, name, and other settings of a web app

1) Open the web app on your Mac running macOS Sonoma.

2) From the top menu bar, click the web app name and pick Settings.

Access web app settings on Mac

3) You can change the Application Name and the web app Icon.

4) If you uncheck “Show navigation controls,” it will remove the back, forward, and browser icons from the top of the web app window.

5) Unchecking “Show color in title bar” will stop using the website’s color scheme in the top title bar of the web app window.

6) And finally, you can go to the Privacy section to clear this web app’s website data and manage its permissions related to microphone, camera, location, etc.

Web app settings window on Mac

Related: How to change and customize app icons on Mac

Advantages of using web apps on Mac

1) Web apps are an easier way to have quick links for your favorite or most visited websites in your Dock and Launchpad.

2) You can right-click on the web app icon in your Mac’s Dock and set it to open automatically when you start your Mac and even assign it to appear on the selected desktop space.

Right-click on web app from Mac Dock

3) Turning a website into an app gives you better window management without affecting all existing open websites of your browser. For example, you can easily resize the web app window, put it into split screen, or move it to your other connected display. And this won’t affect other websites you have open in Safari, Chrome, or Firefox.

Move web app window from Mac to iPad

4) Web apps can send notifications and access privacy features like microphone, location, camera, etc., as a native app. You can manage them in Mac’s System Settings as you do for other apps. By the way, the same website can also do all these inside Safari or Chrome.

Web app notification on Mac

A few things you may not like while using web apps on Mac

1) Auto-opening of external links in the default web browser and not inside that web app window can get annoying.

2) In Safari and other web browsers, you can see the full URL when you place the cursor over an in-page link. But web apps lack this handy feature.

Safari status bar on a web page

3) Clicking links of a website set to open automatically in a new tab leads to multiple web app windows and can get chaotic. In a web browser, multiple tabs are neatly shown at the top and are easier to manage.

4) Having even a few web app icons on your Dock can make it crowded.

Finder folder where web apps are saved

Though macOS Sonoma web apps appear in your Mac’s Dock and Launchpad, you won’t find them in the usual Applications folder (/Applications/). So, here’s how to see the folder where your web apps are saved:

1) Open Finder.

2) Click Go > Go to Folder from the menu bar.

3) Enter ~/Applications/ and hit the return key to see all your web apps in one spot.

My web apps in Finder folder on Mac
These are my web apps in a Finder folder.

Delete a web app from your Mac

You can go to the ~/Applications/ folder and delete the web app from there. Additionally, the usual methods to uninstall standard macOS apps also work to delete web apps. For example, you can go to Launchpad, hold the Option key, and hit the X icon to delete a web app.

Delete web app from Mac Launchpad

Does removing a web app from the Dock uninstall it?

No. If you don’t want a web app icon to take up space on your Mac’s Dock, you can drag it out to remove it. Doing so will not uninstall the web app, and you continue to see it in the Launchpad and the ~/Applications/ folder.

Remove web app from Dock on Mac

Other new tips: