How to Build Modern, Offline Apps With Progressive Web Apps
By: The Educative Team
Tags: Angular, Progressive Web App, JavaScript, Programming, Nodejs

Create a PWA From Scratch

Now that we are familiar with the fundamentals of PWAs, let’s learn how to make one from scratch. This guide will introduce you to the basics of creating a PWA.

Step 1. Build a basic website

To make a PWA, we need a website. You can either make one from scratch (so long as it scales well on different screens, browsers, and devices) or you can download a template. If you use a template, replace the content in the index.html file and change the colors or design using CSS. Once we have our site, we can turn it into a progressive web app.

Step 2. Make an app icon for your home screen

As we mentioned in the File Structure section, you’ll need an app icon for your PWA. This will be on the home screen. You can either make your own logo or download free ones from online sources. Either way, your logo needs to be a square and should be at least 144px resolution. Once you make the icon, download it and add the HTML code to the <head> of the index.html file. Be sure to check that the path to this file is correct. For Apply devices, there are some extra required settings for displaying PWA icons properly.

Step 3. Create and register the web app manifest

As I mentioned before, the web app manifest is an important step for making a PWA. This is the file that contains all your website’s data. You can either make one from scratch or use a web app manifest generator and fill in the data you want. This is a good option if you’re just starting out, as you can leave default settings for the features you don’t understand.

Typically, the manifest file is stored at the root of our web application. It can be named anything you want so long as it has .webmanifest at the end. Then, we serve it with the media type application/manifest+json . We then have to associate a manifest to a web application using the <link> tag in the <head> section of our HTML document. Here’s an example that indicates to the user agent that the manifest metadata must be adopted. We also need to add credentials by adding the attribute crossorigin="use-credentials .

<head>

<link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">

</head>

Step 4. Add a service worker

As I outlined before, a service worker acts as the proxy for our application and network. It is another file we need to add to our PWA so it will work offline. To succeed at creating service workers, you need some knowledge of promises in JavaScript. To create a service worker, there are four main steps:

Register the service worker using the JavaScript file that contains the logic of our service worker. You can use the following code. During this phase, you may generate an error if the service worker file cannot be fetched.

2. Install your service worker. In this phase, pre-fetch operations are typically executed to ensure that target assets (such as static files) are downloaded. this is where we use promises in our JavaScript code. Both caches.open() and cache.addAll() will return promises. After it is installed, the service worker will delay activation until an older service worker is no longer controlling clients (if you already had one installed).

var urlsToCache = [

'/',

'/styles/styles.css',

'/script/home.js'

]; self.addEventListener('install', (event) => {

event.waitUntil(

caches.open('my-cache')

.then((cache) => {

return cache.addAll(urlsToCache);

})

);

});

3. Activate the service worker. Once the old service worker is gone, the new one will be activated.

4. Fetch and intercept requests. Now our service worker is installed and activated, so it can intercept requests and communicate with the local cache. There are several ways we can implement this stage. For now, I’ll show you the easiest approach for a general PWA scenario.

Now we understand the basic steps behind creating and installing a service worker to our PWA. Keep in mind that there are other ways to approach service workers, such as using the sw-toolbox or leveraging different caching strategies.

Step 5. Initialize an add-to-home-screen dialog

An add-to-home-screen dialog (A2HS) is how a user will install the application locally on their device. We also need to serve the app through an HTTPS connection. To do so, Chrome will require your PWA to have a registered service worker. Once the requirements are fulfilled, the browser will display the A2HS dialog, such as a button, pop-up, or menu option. Once it is added to the home screen, your PWA will look like a native app using the icon you provided.

Step 6. Test your PWA and manifest file

Now that you have your basic PWA, you’ll want to test to see if it is working and determine if it’s a good PWA. A common tool for PWA developers is Google Lighthouse, which will assess your PWA and make suggestions on how to improve it. You can install Lighthouse, open your website, and click Generate Report. This will open a tab with valuable information. The data you should focus on is the rating for the categories Progressive Web App, Performance, Accessibility, and Best Practices. From there, you can determine what changes should be made.

You’ll also want to test the manifest file. To do so, you can use your browser’s dev tools. In Chrome, for example, you’ll want to open the Application tab, access the Manifest section (on the left), and see the properties of your file. It will display warnings if there are errors. You can also use a manifest validator for this step.