PWA to App Shortcut in Chrome

If you are interested to open a web application like a desktop application in Chrome follow this.

Prerequisites

---

• A web application
• Web server
• HTTPS support
• Service Worker on web app
• Google Chrome (My version: Version 69.0.3497.81)

Web App

If you don't have a web app you can download a sample html application here

Web Server

You can use IIS, Apache or any kind of webserver.
Or just for local testing use python package SimpleHTTPServer.

python -m SimpleHTTPServer 5000

HTTPS

For IIS it is easy to add https in Bindings link. You will need an SSL certificate. Creating a local certificate not included in here.
SSL development certificate is available for local webserver via IIS Express.

Service Worker

To complete our aim we need to add service worker to your web app.

If you downloaded my sample you can look at following files.

---

• manifest.json: Contains definition for our web application.
• sw.js: Contains service worker functions
• default.html: Contains user interface elements, interactive functions and service worker register functions.

Or you can follow sample in Google Developer blog to add service workers to your web app.

Google Chrome

You will need to enable PWA.

Go to chrome://flags/ url in Chrome.
Enable Desktop PWAs
Experimental windowing and install banner treatment for Progressive Web Apps on desktop platforms. Implies #enable-experimental-app-banners. – Mac, Windows, Linux, Chrome OS #enable-desktop-pwas

Check service workers

You will need Chrome developer tools.

In the sample application log lines added to show status in console.



Go to Application tab > Manifest to check manifest settings.



Go to Application tab > Service Workers to check service worker.



If you followed our sample app press "Add to Home" button to see a prompt.


After that you will see a new window appears with our web application.


Shortcut appears in Chrome Apps.


Now your application looks like desktop app with it is own window. It is useful for kiosk-like apps.

Appendix: Errors

If you see an error check your manifest and worker functions.

Some error samples:

default.html:39 Uncaught TypeError: Cannot read property 'prompt' of undefined at HTMLButtonElement.btnAdd.addEventListener 

Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

Check start_url in manifest.

If start url starts with "/" it may help to remove "/".
Change 
"start_url": "/default.html?source=pwa" 
to 
""start_url": "default.html?source=pwa","

If you want to try with other browsers remember that:

beforeinstallprompt Is Not a Web Standard