How to make a PWA

This is part 3 of"Getting a 100% score in lighthouse". In this article I'll show you how to create PWA.

Get started

To create a PWA (progressive web app) you need to use a webmanifest. The first thing you need to do is create a file called manifest.json and include this snippet inside the head of index.html.

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

Since manifest.json has many required properties to get your PWA working. I'll explain every one in-depth and how to implement them

name, short_name, and description

• short_name is what the user sees on their home screen.
• name and description is what the user sees when installing the PWA

icons

When a user installs your PWA, it uses an array of icons to display on the home screen. Each icon is an object in which you need to specify the type, src, and sizes of each icon

start_url

This is the URL that is used when the user opens your app. It's typically / or index.html

theme_color and background_color

This is pretty self-explanatory. It is worth noting that you have to use the HEX format.

display

It describes how it's shown when your app is launched

• fullscreen the app runs in a fullscreen window
• standalone the app runs in it's own window but still has a URL bar
• browser the app runs in the browser

splash_screen

The splash screen is the image that appears when your app is launched. It is just in image so it requires type, src and sizes similar to an icon.

Now that you know all the properties, here's an example for a news app webmanifest.

{    "name": "Newsella",    "short_name": "News",    "start_url": "/",    "theme_color": "#fff",    "background_color": "#fff",    "display": "standalone",    "description": "One place for all of your news",    "icons": [        {            "src": "logo.png",            "sizes": "560xx560",            "type": "image/png"        }    ],    "splash_screen": [        {            "src": "splash_screen.png",            "sizes": "800x100",            "type": "image/png"        }    ]}

Note: iOS does not use the icons property and instead uses <link rel="apple-touch-icon" href="your icon">.

Service workers

Service workers enable applications to control network requests, cache those requests to improve performance, and provide offline access to cached content.

To get a service worker setup you first need to create a file called service-worker.js. Then, insert this snippet in your <script> tag inside index.html to register the service worker.

if ("serviceWorker" in navigator) {    navigator.serviceWorker.register("service-worker.js", { scope: "." })}

This next snippet creates an array of files and caches them once it's installed. This allows your PWA to be usable offline. Include it in service-worker.js

const cacheName = ["app"]const filesToCache = ["somefile", "anotherfile"]self.addEventListener("install", (e) => {    e.waitUntil(        (async () => {            const cache = await caches.open(cacheName)            await cache.addAll(filesToCache)            console.log("files cached")        })()    )})

Next, what you need to do is intercept any requests. If it's cached, simply return the already-cached value. Otherwise, fetch the file, then cache it. It's expressed with this code:

self.addEventListener("fetch", (e) => {    e.respondWith((async () => {        // check if it's already cached        const cachedFile = await caches.match(e.request)        console.log("requesting resource:", e.request.url)        if (cachedFile) return cachedFile        // if not, fetch then cache        const response = await fetch(e.request)        const cache = await caches.open(cacheName)        console.log("caching resource:", e.request.url)        cache.put(e.request, response.clone())        return response    })())})

You're done!

You've successfully made a PWA! If you need help, I included some debugging tips below. If that didn't solve the issue, post the error in the comments. Thanks for reading, I hope this helped you.

Debugging

Failed to execute 'Cache' on 'addAll'

This occurs when a file attempts to be cached that doesn't exist. Make sure that the files have the correct path in the filesToCache array.

Service Worker Registration Failed

This happens when service-worker.js doesn't exist.

Manifest property 'start_url' ignored, url is invalid

Make sure that it points to the location of the actual HTML file for your app.