Make Web Application Installable

This post will help make your web application Installable, only on standards-compliant browsers. Any client side browser application that uses javascript can be used to make it Installable. This can be used to any new or existing projects.

Find What Is Missing

To find what can turn your application Installable. Run the application locally and make sure every thing works as expected. Now, click on audits in chrome developer tools and generate report for the application running locally. In the report generated, the installable feature has some recommendations under progressive web app (PWA).

So, to make the application Installable it should

• Use HTTPS
• register service worker
• web app Manifest with installability requirements.

**Note: Recommended to use google chrome.

Let's Make It Installable

• Use HTTPS
  This is the most easiest among the Installability checklist. The web application should be served from a secure (HTTPS) domain. For most of the applications this should be checked.

• Register Service Worker
  In this session, we'll create and register a service worker. There are many ways you can register a service worker.
  Create a sw.js file in the application root directory and paste the content below
  sw.js
  

self.addEventListener('install', () => {
    console.log(`installing service worker`);
})

self.addEventListener('activate', () => {
    console.log(`activating service worker`);
})

self.addEventListener('fetch', event => {
    console.log(`fetching...
    ${event.request.url}`);
})

Now, registering sw.js. We'll script the registration in the index.html. If your project uses webpack to generate index.html. Try appending the script in any of the javascript or use webpack workbox plugins to generate or inject service worker.
index.html

<script>
    if('serviceWorker' in navigator) {
        window.addEventListiner('load', () => {
            navigator.serviceWorker.register('sw.js')
                .then((registration) => { 
                    console.log(`service worker registered succesfully ${registration}`) 
                })
                .catch((err) => {
                    console.log(`Error registring ${err}`) 
                })
        })
    } else {
        console.log(`Service worker is not supported in this browser.`)
    }
</script>

• Web App Manifest A web app manifest is a JSON file mostly named manifest.json or manifest.webmanifest. The manifest JSON file provides information about the web application and served from the root of the application.

Lets create a mainfest and link it in the root of the application (index.html)

mainfest.json

{
    "short_name": "Installable App",
    "name": "Simple Installable App",
    "icons": [
        {
            "src": "favicon.ico",
            "sizes": "64x64",
            "type": "image/x-icon"
        },
        {
            "src": "logo192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "logo512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "start_url": ".",
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff"
}

**note: icons are recommended.

Now, link the manifest in the head of the root html (index.html)

index.html

<link rel="manifest" href="mainfest.json" />

Comments

[Pxlmastr]

Thank you! I need this!