Why and How to create Desktop PWA

In this article we will discuss why we need desktop PWA, does it really make sense to create one for your Application, and how much effort is required for it.

First thing first, What is PWA?

We will not discuss it in depth here, if you are not aware of the concept of PWA please check it out Google’s Documentation. In short Progressive Web Apps (PWA) are user experiences that have the reach of the web, and are reliable, engaging and fast, which totally make sense for Mobile apps.

But why for Desktop?

Even though Mobile uses are growing, we still have maximum desktop uses during the day time. People interacting via desktop is almost twice more than mobile devices, so we can’t ignore desktop as an engaging platform.

Electron

Electron is an open-source framework developed and maintained by GitHub. Electron allows for the development of desktop GUI applications using web technologies: It combines the Chromium rendering engine and the Node.js runtime.

Electron applications are growing and their implementation is close to that of a web application, they still come with some downsides.

  1. Electron applications comes with their own binary of Chromium. running single Chromium is very heavy, now take that number and times it by every Electron application a user has running.

2. Electron also requires additional complexity by having to manage support for older versions and software update pipelines.

So Electrons are good but still have some issues, can we improve this ?

How Desktop PWA Resolving those issues ?

  1. Desktop Progressive Web Apps run in their own window — Desktop Progressive Web Apps are launched from the same place as other desktop apps, and they run in an app window, without tabs or an address bar. They look and feel like other apps on the desktop.
  2. Desktop Progressive Web Apps are fast and reliable. By using a service worker to pre-cache content, your PWA will start consistently fast because it eliminates any network bottlenecks.

How to create desktop PWA

Essential parts of DPWA — 

  • Must be served over HTTPS — We do interpretation of network calls in PWA, which is security prone, thats why PWA always works only on HTTPS , to make it more secure.
  • Must have an installed Service Worker with at least one fetch handler — we should be performing at-least one operation over the API.
  • Must serve a valid manifest.json — Its has all the configuration regarding the Desktop PWA, It has color, installation, icon, logo, size info in it.
  • Pages must be responsive — It should be responsive and should not break on resizing.

create a manifest file — 

{
    "short_name": "Desktop PWAs",
    "name": "Desktop Progressive Web Applications",
    "start_url": "/",
    "display": "standalone",
    "theme_color": "#282c34",
    "background_color": "#2254b9",
    "icons": [
        {
            "src": "windows10/Square71x71Logo.scale-400.png",
            "sizes": "284x284"
        },
        {
            "src": "windows10/Square71x71Logo.scale-200.png",
            "sizes": "142x142"
        },
        {
            "src": "windows10/Square71x71Logo.scale-100.png",
            "sizes": "71x71"
        },
       
        {
            "src": "windows10/Square44x44Logo.scale-400.png",
            "sizes": "176x176"
        },
        {
            "src": "windows10/Square44x44Logo.scale-200.png",
            "sizes": "88x88"
        },
        {
            "src": "windows10/Square44x44Logo.scale-100.png",
            "sizes": "44x44"
        },
        {
            "src": "windows10/Square44x44Logo.scale-150.png",
            "sizes": "66x66"
        },
        {
            "src": "windows10/SplashScreen.scale-150.png",
            "sizes": "930x450"
        },
        {
            "src": "firefox/firefox-general-32-32.png",
            "sizes": "32x32"
        },
        {
            "src": "firefox/firefox-general-16-16.png",
            "sizes": "16x16"
        }
    ]
}




  • short_name and name — short_name is used on the user’s home screen, launcher, or other places where space may be limited. name is used in the app install prompt.
  • start_url-tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen. Your start_url should direct the user straight into your app, rather than a product landing page. Think about what the user will want to do once they open your app, and place them there.
  • display — You can customize what browser UI is shown when your app is launched. standalone — means, Opens the web app to look and feel like a standalone native app. fullscreen- means, Opens the web application without any browser UI and takes up the entirety of the available display area. there are other values we have like minimal-ui and browsers. more details you can check here —  https://developers.google.com/web/fundamentals/web-app-manifest/
  • theme_color — theme_color sets the color of the tool bar, and may be reflected in the app’s preview in task switchers.
  • Icon — When a user adds your site to their home screen, you can define a set of icons for the browser to use. These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc.

App use these configs after installation.

Show the Add to Home Screen dialog-

  1. Listen for the beforeinstallprompt event
  2. Notify the user your app can be installed with a button or other element that will generate a user gesture event.
  3. Show the prompt by calling prompt() on the saved beforeinstallprompt event.

If the add to home screen criteria are met, Chrome will fire a beforeinstallprompt event, that you can use to indicate your app can be ‘installed’, and then prompt the user to install it.

When the beforeinstallprompt event has fired, save a reference to the event, and update your user interface to indicate that the user can add your app to their home screen.

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => { 
 // Stash the event so it can be triggered later.  deferredPrompt = e;  ...
});

Notify the user your app can be installed

There are many different patterns that you can use to notify the user your app can be installed and promote the installation, for example, a button in the header, an item in the navigation menu, or an item in your content feed.

window.addEventListener('beforeinstallprompt', (e) => {
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  showInstallPromotion();
});




Show the prompt

To show the add to home screen prompt, call prompt() on the saved event from within a user gesture. It will show a modal dialog, asking the user to to add your app to their home screen.

Then, listen for the promise returned by the userChoice property. The promise returns an object with an outcomeproperty after the prompt has shown and the user has responded to it.

btnAdd.addEventListener('click', (e) => {   
// hide our user interface that shows our A2HS button  btnAdd.style.display = 'none';  
// Show the prompt  deferredPrompt.prompt();  
// Wait for the user to respond to the prompt  deferredPrompt.userChoice    .then((choiceResult) => {     
 if (choiceResult.outcome === 'accepted') {        
    console.log('User accepted the A2HS prompt');      
} else {        
console.log('User dismissed the A2HS prompt');      
}      
deferredPrompt = null;    
});
});

Add those in Service worker and manifest file in your existing web application, It will create desktop PWA for you.

Here is a working Example —  https://github.com/supercycle91/desktop-pwas

Browser Support — 

  1. Chome OS(Chrome 67+)
  2. Windows (Chrome 70+)Linux and Mac are expected to support Desktop PWA’s from version 72. You can early test it by enabling the flags mentioned below.

Adoption of Desktop PWA-

Starbucks — Speaking at Google IO, Starbucks revealed that they are already seeing significant success by replacing their mobile app with a PWA, which Starbucks says offers a “great fast, integrated, reliable and engaging experience“, including more engagement by offering the same app on the phone and on the desktop.

Starbucks reportedly say they doubled the number of people who used the website to place orders each day, with desktop users now ordering at about the same rate as mobile users.

Twitter — Twitter has really been setting great baselines for the Twitter PWA on mobile, the installed desktop version is a great compliment to their implementation.

Here is google introduction of Desktop PWA — 

Leave a Reply

Your email address will not be published. Required fields are marked *