How to make Web Apps appear as First-Class Mac Desktop Citizens

I keep ending up with a myriad of open tabs in Chrome. It is a pain to switch between them compared to switching between regular mac apps.

So I would like be able to

• pin them to the task bar
• identify them using their favicon (task bar / ⌘ + TAB)
• always open them in a separate window

Just like it appears to be possible on windows: https://www.howtogeek.com/141431/how-to-turn-web-apps-into-first-class-desktop-citizens/

I am looking for a solution with Chrome. But if there's a solution with another browser I may even consider switching...

Found a great way on Chrome Version 75.0.3770.100:

1. Go to the website you want to convert to an app

2. Click on three dots / more tools / Create Shortcut + make sure to tick 'open in new window'

That's it - you now have an app that you can pin to your dock and you can cycle through them with cmd + tab. Awesome!

EASY, No software/installation required!

• STEP 1: Simply navigate to the page you want to run/launch as a Web Application (e.g. https://www.gmail.com) using an existing or newly open Chrome tab/window.

• STEP 2: Create the "Chrome Application" and OS level "shortcut"...

  1. Click on the hamburger/'three dots menu' button in the top far right of Chrome.

  2. Select 'More Tools ►'

  3. 'Add to Applications…' or 'Create Shortcut...' (has changed over time/versions)

  4. A small window will pop up - make changes to the Title as you like

  5. Check/Tick 'Open in (Separate) Window'

• STEP 3: Using/Customizing Your "App"/ "Shortcut" / "Dock Icon":

  • The Shortcut should have been created in either (with the Finder automatically launching a new window open to the folder):

    1. the root of your "System Applications" folder (/Applications)... or...

    2. a subfolder for all Chrome Apps (probably /Applications/Chrome Apps)... or...

    3. the root of your "User Applications" folder (/Users/<your username>/Applications/Chrome Apps)

  • you will notice the .app extension on the folder name if you have enabled the "show extensions" setting for the Finder (Mac file explorer)

  • the "shortcut" itself acts like most other apps, i.e., Apps in MacOS (Since at least 2016) are actually special System FOLDERS...

  • however, by default when you CLICK on the folder in Finder (Mac's file explorer), it launches the app instead of actually entering/navigating into the folder.

  • to see the app's details, use RIGHT-CLICK > 'Show Package Contents' on the folder to enter/navigate/see its contents (e.g. <my app>/Content, <my app>/Content/Resources, etc.)

  • you can modify these subfolders to customize your App/Shortcut (i.e change the icon, customize the launch by modifying profiles, or opening with special (command-line) flags, etc..)

  • Move, copy, and use the shortcut anyway you'd like, using it like any other icon/shortcut on the desktop or Mac Dock

  • When using it in the dock, it should use its own "running indicator" separate from any other Chrome Apps or Chrome itself. However, it will still appear as a running window in the actual Chrome App Dock Icon.

NOTE: Since (at least) 2021-12-06, the following steps are unnecessary.

The following are included just to be thorough/complete, for backward compatibility, and for Troubleshooting purposes.

OPTIONAL STEPS / TROUBLESHOOTING:
(the following were needed on an earlier Chrome version, when these features/flags were not part of the stable build):

1. (Re)Enable Chrome's feature to create OS level** [shortcuts to] "applications"

   • type chrome://flags in Chrome’s address bar.

   • find the following settings:

     1. The new bookmark app system

     2. Allow hosted apps to be opened in windows

     3. Creation of app shims for hosted apps on Mac

     4. Quit notification for hosted apps

   • Change/set these flag settings so that look like this (screenshot):

   

2. Restart Chrome