Skip to content

Instantly share code, notes, and snippets.

@plembo
Last active December 29, 2024 03:04
Show Gist options
  • Save plembo/9a6ffb80533a7fe787b1a5102ace207f to your computer and use it in GitHub Desktop.
Save plembo/9a6ffb80533a7fe787b1a5102ace207f to your computer and use it in GitHub Desktop.
Installing Chrome and Progressive Web Apps

Chrome and Progressive Web Apps Installation Notes

Google Chrome and Chromium-based browsers (like Vivaldi, Brave, and Microsoft Edge) support Progressive Web Apps (PWAs) on all platforms. The menu options differ slightly between browsers, but the concepts behind them are the same. Vivaldi's controls for this differ significantly from those in Chrome, Brave, and Edge. I have no idea why. Check out Vivaldi's help pages for details.

PWAs

Desktop menu items and desktop shorcuts are created in Chrome when a PWA is installed using the special "install" icon over on the right end of the address bar. An "installed" PWA opens as a new browser window sans tool and address bars. One advantage of PWAs over shortcuts is that PWA's can configure desktop notifications (most mail client PWAs do this: e.g., Gmail, Outlook and Proton Mail -- some others include Google Drive, YouTube, Mastodon).

This is what the "install" button looks like for a PWA (in this case, Microsoft Outlook for the web):

Open Tools-Create shortcut

NOTE: PWAs don't always behave as expected in some browsers, for example: OneDrive in Vivaldi can't open a "Save As" dialog during a download operation, because "Save As" is missing from Vivaldi. As a result, although it diminishes my personal privacy, I install all PWAs in Chrome.

Web page shortcuts

Desktop shortcuts for non-PWA "web apps" (these won't have the special install icon, e.g.: Google Calendar, Keep) can also be easily created with Chrome by going to the desired url and then clicking on the "more menu" icon (three vertical dots) to reveal "Save and share... Install page as app" or "... Create shortcut".

Google Chrome will automatically create shortcuts for both a desktop and menu icon. Non-PWA apps will not set up desktop notifications. Using "Create a shortcut" defaults to opening it as a window (there's a "Open as window" checkbox to override that behavior). The process is different in Edge, because... reasons. Screenshots below are from Chrome:

Chrome's "Save and share.. Install page as app" menu:

Create shortcut

Notifications and Handlers

Both PWAs and web page shortcuts can provide you with notifications. They can also be used as protocol handlers. For example, a PWA for the Gmail web mail client can be granted permissions to provide notifications as well as to handle "mailto:" links found in web pages.

After a page is installed as a PWA or web page shortcut you may be prompted to allow it to send notifications, and separately, if it can be used to handle a particular protocol. To make this effective, you may also need to go into your operating environment settings and make your browser the default app for a protocol (e.g., email).

To enable a page as a protocol handler in Chrome, click the special icon to the right of the URL in the address bar:

Enable protocol handler

These are the links for notifications and protocol handler permissions in Google Chrome:

  • Notifications, chrome://settings/content/notifications
  • Protocol handlers, chrome://settings/handlers
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment