A Guide to Desktop PWAs | Part 1

What is a Progressive Web App?

A Progessive Web App (PWA for short) is a web application acting as a web application.
When the app launches, it displays contents of a specified URL.
They also work offline.

Properties of PWAs

Why a PWA?

How to build a PWA

To build a PWA, you need a web manifest.
Now we will use pwabuilder.com to build our PWA.
Open pwabuilder.com and enter your website URL and wait.
Then click Choose Service Worker.
Then select Offline copy with Backup offline page.
Replace const offlineFallbackPage = "ToDo-replace-this-name.html"; in the section at the bottom right with const offlineFallbackPage = "offline.html";.
Then create a fallback page named offline.html.
Then follow the instructions on the page until you click Done.
Then open your site and open the console.
If you seen messages starting with [PWA Builder] in the console the service worker is created.
Now you have finished setting up one of the most critical things to create a PWA.

Create a manifest

Without a web manifest, the browser won’t know how to display the app.
Use the following example template for the web manifest.

{
"dir" : "ltr",
    "lang" : "en",
    "name" : "{app name}",
    "scope" : "/",
    "display" : "standalone",
    "start_url" : "{url to be display when the app is launched}",
    "short_name" : "{short name}",
    "theme_color" : "{hex adress bar/splash screen color}",
    "description" : "{description}",
    "orientation" : "any",
    "background_color" : "{hex background color}",
    "prefer_related_applications" : false,
    "icons" : [
    {
      "src" : "{icon url}",
      "sizes" : "{icon size {number}x{number}}"
    },
    ]}

Fill the places in curly braces with values.
Then save it in your web server.
Then add the following tag to your html head section.

<link href="{manifest url}" rel="manifest">

Replace {manifest url} with the manifest URL.
Now add you need to listen on the beforeinstallprompt event.
Here is a JavaScript example.

var deferredPrompt = {prompt:(()=>{})}
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // TODO: Insert code to update UI to inform the user that they can install the app here.
}
window.installPWA = function(){
  // TODO: Trigger window.installPWA() when user selects to install the app.
  // TODO: Insert code to remove the install app button.
  deferredPrompt.prompt()
}

You built your first PWA!
For more info, go to the Google Developers website.