In this example, we will introduce Progressive Web Applications (PWAs).
A great introduction to this topic can be found on the Google Developers Webpage.
See also this recent article from Google Developers for PWA on the desktop
We also recommend the PWA Builder Tool from Microsoft.
To create an installable PWA, we need four things:
- A service worker, see web/serviceworker.js.
- A manifest file, see web/manifest.json that is linked to from the main
web page (
web/index.html
) - Code to register the service worker from the main application called from code/main_applications.js, see code/pwautils.js.
- Code to trap and expose the
install
event, again see code/main_applications.js and code/pwautils.js.
In addition, the manifest file requires icons of our application at different sizes. We used the tool that is part of PWA Builder to create these from a single example; these icons can be found in web/AppImages.
Install the runtime dependencies as usual:
npm install -d
Pack the bundle and run it in the same way as before:
gulp webpack
The webpack configuration is in config/webpack.config.js
.
Run in electron as
electron web/electronmain.js
a web application as
gulp webserver
or to actively develop as
gulp devel
This application is a progressive web application. it will install as a desktop application from the web page under Chrome on Windows/Android. To install on Mac OSX or Linux you will need to use Chrome. First enable the flag:
chrome://flags#enable-desktop-pwas
Then open http://localhost:9000/web/index.html as usual.
See if you have an option under the Help menu to install this as a PWA (as shown below)