How to Develop a Progressive Web App (PWA)

Overview

Since Apple launched the iPhone App Store, apps have become an indispensable part of our lives, and the same is true for physical businesses. Now all industries are launching their own apps, but has anyone ever thought about such a scenario: if your potential customers have not installed your app yet or even if they have installed it, they have uninstalled your app because of the tight storage space on their mobile phones? Is there any technical solution to make apps lighter and easier to install? The answer is “yes”.

Progressive Web Applications are created for this purpose. They have both the features of Web applications and the features that were previously only available in native applications. Progressive Web Applications are launched from an icon on the home screen or based on push notifications. The loading time is almost negligible, and in addition to being used online, they can also be packaged for offline use.

Best of all, Progressive Web Apps are easy to create on mobile phones because they are just enhancements to your website. When someone visits your website for the first time, the PWA functionality will be automatically created for you on your phone after you authorize it.

Next, we will take a look at how to create a PWA application of our own.

Require

To begin this tutorial, you must have the following software installed:

Node 8.9 and above (https://nodejs.org/en/download/). Yarn (https://yarnpkg.com) Git.

As the initial project for this tutorial, you can clone the following Github repository:

git clone https://github.com/petereijgermans11/progressive-web-app

Then, go to the following directory

cd pwa-article/pwa-app-manifest-init

Install dependencies and start the project using the following command

npm i && npm start

Open the application at the following address: http://localhost:8080

URL of the application

There are a number of ways to access my localhost: To access it remotely, post the address on port 8080 on your machine. For this purpose, you can use ngrok. See: https://ngrok.com/

Install ngrok using the following command:

npm install -g ngrok

Run the following command in your terminal. This command generates a URL for you that can be accessed externally .

ngrok http 8080

Then browse to the generated URL on your mobile device in Chrome.

What technical components does a PWA require?

PWA has three important technical components working in harmony, including:

Manifest file, Service Worker and running under https.

Manifest file

The manifest file is a JSON configuration file that contains basic information about the PWA, such as the app's icon, web application name, and background color. If the browser detects that a PWA manifest file exists for a website, Chrome will automatically display an “Add to Home Screen” button. If the user taps on Agree, the icon will be added to the home screen and the PWA will be installed.

Create a Manifest.json

The Manifest.json file for a PWA looks like this:

JSON format

{
  "name": "Progressive Selfies",
  "short_name": "PWA Selfies",
  "icons": [
    {
      "src": "/src/images/icons/app-icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/src/images/icons/app-icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/index.html",
  "scope": ".",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#3f51b5"
}

Tell the browser about your application's manifest

Create a Manifest.json file in the directory at the same level as the index.html file. After the manifest file is created, add the manifest file reference link to index.html.

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

Manifest Attributes

Manifest has many configuration properties. Next we will give a brief introduction to the properties.

• name, short_name: Specifies the name of the Web application. short_name is the abbreviation of the application. When there is not enough space to display the name attribute of the application, the system will use short_name.
• display: The display attribute specifies the display mode of the web application. It has four values ​​​​to configure: fullscreen, standalone, minimal-ui, and browser, but the commonly used attributes are fullscreen and standalone. fullscreen: full-screen display standalone: ​​the application opened in this mode will not have the browser address bar, so it looks more like a native application minimal-ui, browser: it is not much different from accessing it using a browser.
• orientation: Controls the display direction of the Web application and prohibits the phone from rotating the screen.
• icons, background_color: icon is used to specify the application icon, and background_color is the background color before the application is loaded. By setting these two properties, you can combine them into the application's Splash Screen.
• theme_color: Defines the default theme color of the application.
• description: Set a description of the application.

The above is some description of the pwa manifest file properties. We can add the manifest file by setting up the manifest file and placing it in the directory at the same level as the index.html file.

Open Chrome Developer Tools – Application – Manifest and check whether the added manifest file has been loaded. If there is no information as shown below, we can reload it by restarting the server npm start.

What is a Service Worker?

Service Worker(SW) is a piece of JavaScript that acts as a proxy between the browser and the web server. Service Worker can implement common functions of native applications such as offline caching, message push, silent update, etc. in browser-based web applications to provide web applications with a better and richer user experience.

Additionally, this API allows for the use of caching to support offline experiences, giving developers full control over the user experience.

Service Worker Lifecycle

For Service Worker, the steps for basic setup are as follows:

• First, the SW should be registered. If the SW has been registered, the browser will automatically start the installation based on the installation event.
• After the SW is installed, it will receive an activation event. This activation event can be used to clean up resources used in previous versions of the SW.

In actual operation, you should first create an empty file named sw.js at the same level as index.html. Then add a base tag in the index.html file as follows:

<base href="/" rel="external nofollow" >

Finally, add the following code to src/js/app.js to register SW. This code will be activated during the page "load" process.

You can check whether SW is enabled by opening Chrome DevTools - Application - Service Worker.

window.addEventListener('load', () => {
    const base = document.querySelector('base');
    let baseUrl = base && base.href || '';
    if (!baseUrl.endsWith('/')) {
        baseUrl = `${baseUrl}/`;
    } 
   
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register(`${baseUrl}sw.js`)
            .then( registration => {
            // Registration was successful
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
        })
        .catch(err => {
            //registration failed :(
            console.log('ServiceWorker registration failed: ', err);
        });
    }
});

The main purpose of the above code is to check whether the SW API is available in the navigator property of the window object. The window object represents the browser window. If the SW is available in the navigator, then register the SW immediately when the page loads.

Although registering a SW is simple, in some cases we still encounter problems with Service Worker registration. Let's take a look at the reasons for not being able to register a SW and how to solve them:

• Your application cannot run under HTTPS. During development, you can use SW via localhost . But if you deploy it on a website, you need to enable HTTPS.
• The path to SW is incorrect.

Update on reload is not checked.

Service Worker Events

In addition to the install and activate events, other events include message, fetch, sync, and push events.

Add the following code to your SW to listen for lifecycle events (install and activate):

self.addEventListener('install', event => {
    console.log('[Service Worker] Installing Service Worker ...', event);
    event.waitUntil(self.skipWaiting());
});
self.addEventListener('activate', event => {
    console.log('[Service Worker] Activating Service Worker ...', event);
    return self.clients.claim();
});

The install callback calls the skipWaiting() function to trigger the activate event and tell the Service Worker to start working immediately without waiting for the user to navigate away or reload the page.

The skipWaiting() function forces a waiting Service Worker to become an active Service Worker. The self.skipWaiting() function can also be used with the self.clients.claim() function to ensure that updates to the underlying Service Worker take effect immediately.

In this case, the self-property represents the window object (i.e. your browser window).

Add to Home Button

The "Add to Home Screen Button" allows users to install the PWA on their devices. In order to actually install the PWA with this button, you have to define a fetch event handler in your SW. Let's fix this in sw.js.

self.addEventListener('fetch', event => {
    console.log('[Service Worker] Fetching something ....', event);
    // This fixes a weird bug in Chrome when you open the Developer Tools
    if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
        return;
    }
    event.respondWith(fetch(event.request));
});

Service Worker Cache

The power of Service Worker lies in its ability to intercept HTTP requests. In this step, we use this option to intercept HTTP requests and responses, serving lightning-fast responses to users directly from the cache.

Precaching during Service Worker installation

When a user visits your website for the first time, SW will start installing itself. During this installation phase, you can download and cache all the pages, scripts, and style files used by the PWA. Here is the sw.js file code that does this:

const CACHE_STATIC_NAME = 'static';
const URLS_TO_PRECACHE = [
    '/',
    'index.html',
    'src/js/app.js',
    'src/js/feed.js',
    'src/lib/material.min.js',
    'src/css/app.css',
    'src/css/feed.css',
    'src/images/main-image.jpg',
    'https://fonts.googleapis.com/css?family=Roboto:400,700',
    'https://fonts.googleapis.com/icon?family=Material+Icons',
];
self.addEventListener('install', event => {
    console.log('[Service Worker] Installing Service Worker ...', event);
    event.waitUntil(
        caches.open(CACHE_STATIC_NAME)
            .then(cache => {
                console.log('[Service Worker] Precaching App Shell');
                cache.addAll(URLS_TO_PRECACHE);
            })
            .then(() => {
                console.log('[ServiceWorker] Skip waiting on install');
                return self.skipWaiting();
            })
    );
});

This code uses the install event and adds an array of URLS_TO_PRECACHE during the install phase. Once you have called the caches.open function, you can use the cache.addAll() function to cache the files in the array. Use JavaScript promises with the event.waitUntil() method to know how long the installation will take and whether it was successful.

The installation event will call self.skipWaiting() to directly activate SW. If all files have been cached successfully, the SW will be installed. However, if one of the files fails to download, the installation step will fail. In Chrome Developer Tools you can check if the cache (in Cache Storage) is filled with static files in the URLS_TO_PRECACHE array.

However, if you look at the Network tab, the files are still being fetched over the network. The reason is that although the cache is ready, we have not read the referenced resource from the cache. So in order to complete this part of the work, we must first listen to the application's fetch event, then intercept and get the resource from the cache. Let's take a look at the following code:

self.addEventListener('fetch', event => {
    console.log('[Service Worker] Fetching something ....', event);
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if (response) {
                    console.log(response);
                    return response;
                }
                return fetch(event.request);
            })
    );
});

We use the caches.match() function to check if the incoming URL matches a resource that might be in the current cache. If there is a match, we return the cached resource, but if the resource does not exist in the cache, we proceed with fetching the requested resource as normal.

After the Service Worker is installed and activated, refresh the page and check the Network tab again. Now, the Service Worker will intercept HTTP requests and load the corresponding resources from the cache on the fly instead of making a network request to the server.

Now, if we set offline mode in the Network tab, our app will still work fine.

Background transfer

Background Fetch API is a background function of SW, which allows users to download large files, videos, music and other resources in the background. During the acquisition/transfer process, your user can close the tab or even close the entire browser without clearing the transfer task. When the user opens the browser again, the transfer process will resume. This API can also display the progress of the transfer to the user, and the user can cancel or pause the process.

By default, background transfers are not available, you must enable Chrome's "Experimental Web Platform features" option via the url (chrome://flags/#enable-experimental-web-platform-features)

The following is an example of how to implement such a background transfer.

In your index.html file add a button with ID "bgFetchButton"

<button id="bgFetchButton">Store assets locally</button>

Then, in app.js in the load event handler, add the code for performing the background transfer

window.addEventListener('load', () => {
...
       bgFetchButton = document.querySelector('#bgFetchButton');
       bgFetchButton.addEventListener('click', async event => {
         try {
            const registration = await navigator.serviceWorker.ready;
            registration.backgroundFetch.fetch('my-fetch', [new Request(`${baseUrl}src/images/main-image-lg.jpg`)]);
         } catch (err) {
            console.error(err);
         }
     });
...
});

The above code starts a background transfer under the following conditions:

• The user clicks a button with ID bgFetchButton
• SW has been registered

Background transfers must be performed in an asynchronous function because the transfer process cannot block the user interface.

After the transfer is completed, it is put into the cache

self.addEventListener('backgroundfetchsuccess', event => {
  console.log('[Service Worker]: Background Fetch Success', event.registration); event.waitUntil(
   (async function() {
     try {
     // Iterating the records to populate the cache
       const cache = await caches.open(event.registration.id); const records = await event.registration.matchAll(); const promises = records.map(async record => {
         const response = await record.responseReady;
         await cache.put(record.request, response);
       });
       await Promise.all(promises);
     } catch (err) {
       console.log('[Service Worker]: Caching error');
     }
   })()
  );
});

This code consists of the following steps:

• When the Background Fetch transfer is complete, your SW will receive a Background Fetch success event.
• Creates and opens a new cache with the same name as registration.id.
• Get all records and traverse them through registration.matchAll().

Finally, all promises are executed via Promise.all().

Summarize

In this article, we discussed two of the basic components of PWA: Manifest and Service Worker basic functions. We have already discussed HTTPS before.

The above is the details of how to develop a progressive web application PWA. For more information about developing a progressive web application, please pay attention to other related articles on 123WORDPRESS.COM!