{"id":3484,"date":"2023-06-07T15:39:59","date_gmt":"2023-06-07T13:39:59","guid":{"rendered":"https:\/\/blog.tomayac.com\/2023\/06\/07\/web-apps-on-macos-sonoma-14-beta\/"},"modified":"2023-06-07T15:39:59","modified_gmt":"2023-06-07T13:39:59","slug":"web-apps-on-macos-sonoma-14-beta","status":"publish","type":"post","link":"https:\/\/tomayac.com\/wordpress\/2023\/06\/07\/web-apps-on-macos-sonoma-14-beta\/","title":{"rendered":"Web Apps on macOS Sonoma 14 Beta"},"content":{"rendered":"\n\t\t\t

Executive summary \ud83d\udd17<\/a><\/h2>\n

With macOS Sonoma, Apple goes all-in on the concept of installable web apps<\/strong>.\nThey're highly integrated in the overall macOS experience and don't give away\ntheir web roots by not showing any Safari UI at all.<\/p>\n

Testing environment \ud83d\udd17<\/a><\/h2>\n

Tested on macOS Sonoma 14.0 Beta (23A5257q<\/code>) with Safari version 17.0\n(19616.1.14.11.11<\/code>). It probably doesn't matter, but the testing device was a\n13-inch, M1, 2020 MacBook Pro.<\/p>\n

Install experience \ud83d\udd17<\/a><\/h2>\n

On macOS Sonoma, you can add a website\u2014any website, not just apps with a\nmanifest\u2014to your Dock. Go to the Share<\/strong> icon and click Add to Dock<\/strong>, or\nuse the menu item File > Add to Dock<\/strong>.<\/p>\n

\"Adding<\/p>\n

Adding an app via the Share<\/strong> icon.<\/em><\/p>\n

\"Adding<\/p>\n

Adding an app via the File<\/strong> menu.<\/em><\/p>\n

You can adjust the name and icon if desired. The URL is the URL you're on for\npages without a manifest, or the start_url<\/code> for pages with a manifest. It can't\nbe changed. For pages without an icon, Safari will create a fallback icon based on the first letter of the page's title.<\/p>\n

\ud83d\udc40 Observation:<\/strong> Unlike on iOS\/iPadOS, you can't add the same app twice,\nunless you rename it.<\/p>\n

\"App<\/p>\n

App name and icon are adjustable, the URL is not.<\/em><\/p>\n

The web app icon then appears in your Dock. Maskable icons are supported, and\nthe typical macOS squircle shape is respected. Closing all windows of an app\nleaves the app running, aligned with macOS UX paradigms.<\/p>\n

\ud83d\udc40 Observation:<\/strong> Unlike on Chrome, the app doesn't launch immediately and\n"morph" from in-tab to in-app, but instead you remain on the tab and need to\nlaunch the app manually.<\/p>\n

\"Web<\/p>\n

Web app added to the Dock.<\/em><\/p>\n

When right-clicking the Dock icon, you can uncheck Keep in Dock<\/strong> and still launch the app via Launchpad, Spotlight Search, or even just by double-clicking the app icon in ~\/Applications\/<\/code>.<\/p>\n

Launch experience \ud83d\udd17<\/a><\/h2>\n

The out-of-the box launch experience of web apps is fantastic. Nowhere does it\ngive away that this is a web app. For apps with a manifest, there's no Safari UI\nwhatsoever, and the expectation is that such apps are single-page apps that\nprovide their own navigation controls. If an app is well made, lay persons\nprobably wouldn't be able to tell that something is a web app.<\/p>\n

\"Web<\/p>\n

Web app running without any Safari UI.<\/em><\/p>\n

\ud83d\udc40 Observation:<\/strong> Different from iOS\/iPadOS, credentials in cookies are copied\nover, so if you were logged in when running in the tab, you're logged in when\nyou launch the app. No other storage means apart from cookies are copied. "When a user adds a website to their Dock, Safari will copy the website's cookies to the web app. That way, if someone is logged into their account in Safari, they will remain logged in within the web app. This will only work if the authentication state is stored within cookies. Safari does not copy over any other kind of local storage. After a user adds a web app to the Dock, no other website data is shared, which is great for privacy".<\/em><\/p>\n

\ud83d\udc40 Observation:<\/strong> Web Inspector (DevTools) is blocked, even with the Show features for web developers<\/strong> checkbox checked. There's no Develop<\/strong> menu item nor can you right-click and Inspect Element<\/strong>. This looks like a conscious decision.<\/p>\n

\ud83d\udc40 Observation:<\/strong> Extensions don't run and likewise aren't displayed. Also\nprobably a conscious decision.<\/p>\n

\ud83d\udc40 Observation:<\/strong> Same-origin (in-scope) links are handled in-app, cross-origin (out-of-scope) links open in the default browser. A notable exception are OAuth flow links, which are handled in-app based on a heuristic.<\/p>\n

If a user navigates to an already installed app\nin Safari, a prompt is displayed that invites the user to Open in web app<\/strong>.<\/p>\n

\"Prompt<\/p>\n

Prompt inviting the user to Open in web app<\/strong>.<\/em><\/p>\n

macOS integration experience \ud83d\udd17<\/a><\/h2>\n

Web apps on Mac let you focus on the websites you use all the time, separate\nfrom the rest of your browsing. Like all Mac apps, web apps work great with\nStage Manager, Mission Control, and keyboard shortcuts like Command + Tab. Web\napps can be opened from the Dock, Launchpad, and Spotlight Search.<\/p>\n

\"Multitasking<\/p>\n

Multitasking experience.<\/em><\/p>\n

\"Spotlight<\/p>\n

Spotlight search experience.<\/em><\/p>\n

\"Launchpad<\/p>\n

Launchpad experience.<\/em><\/p>\n

\"Stage<\/p>\n

Stage Manager experience.<\/em><\/p>\n

\"All<\/p>\n

All web apps have an About<\/strong> dialog.<\/em><\/p>\n

Settings and permissions \ud83d\udd17<\/a><\/h2>\n

Web apps work with AutoFill credentials from iCloud Keychain and from\nthird-party apps that have adopted the\nCredential Provider Extension API<\/a>.\nUsers can grant permission to a web app to use their camera, microphone and\nlocation in the same way they grant such permissions to other Mac apps through\nsystem prompts and the Privacy & Security section of System Settings.<\/p>\n

\"System<\/p>\n

System settings with Camera permissions.<\/em><\/p>\n

Web apps on Mac support\nweb push<\/a>,\nbadging<\/a>, and\nall the usual web standards implemented by WebKit, just like web apps\non iOS and iPadOS<\/a>.<\/p>\n

\ud83d\udc40 Observation:<\/strong> There seems to be a bug<\/a> where the hosting Web App appears as\nthe app requesting the Notifications permission. Notifications then work as\nexpected, though, including using the correct icon.<\/p>\n

\"Notifications<\/p>\n

Notifications permission prompt with the wrong app name and icon.<\/em><\/p>\n

Web apps have their own Settings<\/strong> dialog. In General<\/strong>, the app name and\nicon can be changed and navigation controls can be toggled on or off. The\ntheming behavior of the title bar<\/a>\ncan be changed, too.<\/p>\n

\ud83d\udc40 Observation:<\/strong> Navigation controls are toggled off when there's a manifest\nwith "display": "standalone"<\/code>. In all other cases, even if a manifest exists\nbut with a different "display"<\/code> mode,<\/p>\n

\"Web\nWeb app Settings<\/strong> dialog on the General<\/strong> tab.<\/em><\/p>\n

\ud83d\udc40 Observation:<\/strong> There's currently a bug<\/a> where web apps don't correctly report matchMedia('(display-mode: standalone)')<\/code>. Added to the Dock web apps think they run in a tab.<\/p>\n

With navigation controls enabled, there's an Open in Safari<\/strong> icon in the\nupper right corner. Despite its label, it actually respects the user's default\nbrowser.<\/p>\n

\"Open<\/p>\n

Open in Safari<\/strong> icon.<\/em><\/p>\n

Web pages get navigation affordances in the form of a back and forward button.\nThere's no reload button.<\/p>\n

\"Back<\/p>\n

Back and forward buttons.<\/em><\/p>\n

\ud83d\udc40 Observation:<\/strong> With navigation controls toggled to off, the title of the\nweb app sourced from the manifest is not shown. With navigation controls toggled\nto on, the title sourced from the <title><\/code> is shown.<\/p>\n

\ud83d\udc40 Observation:<\/strong> When you right-click, there's a context menu with Reload<\/strong> or Back<\/strong> and Reload<\/strong>. This works independent from whether navigation controls are toggled on or off.<\/p>\n

The Privacy<\/strong> tab allows the user to clear website data and links into the\nPrivacy & Security Settings<\/strong> of the System Settings app.<\/p>\n

\"Web<\/p>\n

Web app Settings<\/strong> dialog on the Privacy<\/strong> tab.<\/em><\/p>\n

Technical analysis \ud83d\udd17<\/a><\/h2>\n

(See comment #7 of Chromium bug 1451667<\/a> for the full details.)<\/p>\n

All apps are stored in ~\/Applications\/<\/code>. The package contents of each apps are:<\/p>\n