Progressive WebApp in SharePoint

A (long) while back I hacked a sharepoint site to behave as a Progressive Web App (PWA). I always wanted to improve that solution so it works well and is created using supported tooling.

Recently I achieved just that in a Modern SharePoint site. Using only a SPFx Application customizer and a manifest and serviceworker in the documents folder I received the install site popup!

Here's the proof:

What you're looking at is a site that indicated it is installable in the address bar (the Plus icon shows that). I've captured the 'Add to Homescreen prompt and I trigger it when the button is pushed. Now a user can install the site as an App (it loads in it's own browser window automatically). The App is also findable in your computer's start menu.

Advantages:

Installs the site as a true App
You can find it in Windows start menu
It has it's own pretty icon and name
Easy to find back important sites on your device.
Add to homescreen button is in clear view instead of hidden in the Chromium menu's.
You can load a serviceworker that does god knows what :-)

For the code see the PWA App Customizer on GitHub

There are some hardcoded URLs in there, in the code of the App customizer I hardcoded the link to my service worker. And in the manifest file I hardcoded the starturl property that points to my SharePoint site. These you can easily change to your own environment.

You will need to upload the three files that are in the Assets folder on GitHub into your shared documents folder in your site collection.

Future work:

You can spice up your SharePoint Single Page App with the serviceworker. For example: Make it work offline.
Remove hardcoded urls