How to make a Progressive Web App.

How to make a Progressive Web App.

Subscribe to my newsletter!

Idea

In this tutorial, we will make a Progressive Web App (PWA) in its simplest form. This means we will make a bare-bones website with no features and want it to be installable. If you are serious about making a PWA, you can extend the framework created here.

To make a PWA, we need a manifest.json file and a service worker. The manifest holds information about the web app like the name, description, and icon images. The service worker is a javascript file that handles the offline functionalities, among other things.

Let us get into it.

Setup

Before we get to coding, we set up our project.

Folders and Files

Setup the following file structure somewhere on your computer, but you should view the file in a localhost context so you can test it. We need two javascript files. One holds the code for our App and the other for the service worker. Then we also have the manifest.json file and an image in a folder that will serve as our App’s icon; it is 200 by 200 pixels large.

Our Project
│
├─ images/
│    └─ icon_200.png
├─ app.js
├─ index.html
├─ manifest.json
└─ service-worker.js

HTML and CSS

Now let’s get to setting up the HTML and CSS. We use the standard scaffolding for HTML and set a title and a favicon.

<title>Simple PWA</title>

<link  rel="shortcut icon"  href="images/icon_200.png"  type="image/x-icon">

We also set some CSS that centers all the content using the flexbox power.

<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100vh;
        margin: 0;
        font-family: 'Segoe UI', sans-serif;
    }
    * {
        margin: 0
    }
</style>

Last but not least, we insert some content into the body of our website.

<h1>Simple Progressive Webapp</h1>
<p>By Maxim Maeder</p>
<img src="images/icon_200.png" alt="Logo" width="100">

Now the website should look like this. The big M is our little icon.

enter image description here

Manifest.json

Ok, let’s get to the Manifest.json File. This document will tell the browser different things about the web app. This information is organized in a json object with meaningful keys. Below you see our manifest.json file. It would be best if you supplied a name and a start_url, which tells the browser the starting page, how it should be displayed, what color should be shown while loading, and where to find icons for the App. More keys extend the features of your App, but these are sufficient for installation. It is important to set at least one icon that is larger than 200px in height and width and with a purpose set to any.

{
    "name": "Simple PWA",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#fff",
    "icons": [
         {
            "src": "images/icon_200.png",
            "sizes": "200x200",
            "type": "image/png",
            "purpose": "any"
         }
    ]
}

We have to import this the manifest.json file using the code below at the head of our page. This is all we have to do for this part.

<!-- Import the manifest.json File -->
<link  rel="manifest"  href="manifest.json">

Service-worker.js

Now for the service worker. This is simply a js file that handles the cool features of a progressive web app. It runs in the background, so it does not have access to the DOM. In the simplest form, it handles caching files for offline usage of the App.

First, we import the app.js in our index.html.

<script  src="app.js"></script>

Then in that file, we call the navigator.serviceWorker.register(path) function with the file’s path.

var worker = navigator.serviceWorker.register('service-worker.js')

In the service-worker.js file, we start by making a function that will cache our files. We begin by opening a cache with the caches.open(string) function. Then we add the paths of all the resources we want to cache with the addAll method. So these files will be downloaded to the user so they can be accessed without an internet connection.

function CacheStuff() {
    var cache = caches.open('v10');
    cache.addAll([
        '/',
        '/index.html',
        '/images/icon_200.png'
    ])
}

Afterward, we set up an event listener with the install event. We can use this here because the file will know we mean the service-worker when we run it in that context. If this event occurs, we want to call our CacheStuff() function. This means it will download all the necessary resources upon installing the App.

this.addEventListener('install', (event) => {
    event.waitUntil(CacheStuff())
})

Last, we also handle the fetch event, which occurs whenever the user agent wants to access any resource. Here respond to that request with the resources in the cache by matching it.

this.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
  );
})

That’s It! Now the App is installable, and It will work offline.

Conclusion

Excellent! You have successfully created a Progressive Web Application! See how you can fine-tune the App so lighthouse and your users are happier!

Project on GitHub
Simple PWA (maximmaeder.com)

3 responses to “How to make a Progressive Web App.”

  1. bad reg poker Avatar

    King poker app, slots up free – casinos in bay saint louis ms.

  2. casino flamingo online Avatar

    Slots village ndb, gareng slot – best poker sites mobile.

  3. casino rides of dallas Avatar

    New casino in rochester ny, coral live casino offer – how to play texas poker.

Leave a Reply

Your email address will not be published.