Add an offline page, a service worker and few logos to make your PWA!

Whenever you wanted your website to be installed as an app on mobile devices, add some assets and make it a PWA.

What is a PWA?

A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices

Let's begin!

In this blog, we will make an existing website into an installable PWA. Get the starter code from here if you don't have an existing website to work with.
Run npm install in the repository to install all the dependencies.

Important Aspects of a PWA:

There are many things that make a PWA different from a regular web app. The following aspects of a website allows it to be a PWA:

  • Register a service worker that controls a start_url
  • Redirecting HTTP traffic to HTTPS
  • Configure a manifest.json file for the splash screen.
  • Sets a theme_color in the home page.
  • Content is sized correctly on all devices.
  • Provide a valid apple-touch-icon to run it on ios devices.
  • Include a <meta name='viewport'> tag with width or initial-scale
  • A maskable icon for all devices

Registering a service worker that controls a start_url

What is a manifest.json?

The manifest. json is a simple JSON file in your website that tells the browser about your website on user's mobile device or desktop. That controls the start_url, the splash screen and the icons.

Redirecting HTTP traffic to HTTPS

The redirecting from HTTP to HTTPS can be done at both the server and the client side. While server side might not be easily done, it is quite simple to do it on the client side. Simply adding the few lines of script below in the home page will redirect all the traffic from HTTP to HTTPS.
In the home page,

<script>
if(location.protocol !== 'https:') {
    let url = 'https://' + location.href.substring(location.protocol.length);
    location.replace(url);
}
</script>

When the above script gets executed, it will redirect all the traffic from HTTP to HTTPS.

Creating a manifest.json file:

We will need to create a manifest.json file in the root of the website. The manifest.json file will tell the browser about the splash screen, the icons and the theme color. So, let us select the icon and the theme color and add them to the manifest.json file. Create a logo for your website and go to Favicon.io to convert the icon to different sizes according to the needs of our PWA. The theme color is the color that will appear on the notification bar of the PWA on devices where our PWA is installed. And the start_url will tell the browser where the starting page of the PWA is. Let's combine all the information we got from the Favicon.io and the start_url to the manifest.json file.

{
    "short_name": "PWA",
    "name": "PWA App Template",
    "description": "Description of PWA",
    "icons": [
        {
            "src": "manifestlogo.png",
            "type": "image/png",
            "sizes": "512x512",
            "purpose": "any maskable"
        }
    ],
    "start_url": "/",
    "background_color": "#3367D6",
    "display": "standalone",
    "theme_color": "#3367D6"
}

Let's break it down.

  • The short_name is the name of the app on the home screen of the device.
  • The name is the name of the PWA
  • The description is similar to the <meta name='description'>
  • The icons array contains all the icons available from the download from favicon.io, a large icon with "purpose": "any masakble" is acceptable but giving more icons for the PWA enhances the display of the icon on different devices
  • The start_url will tell the browser where the starting page of the PWA is and the app will show this page if the user opens the PWA from their home screen.
  • The background_color will tell what color will be shown in the splash screen of the app while loading
  • The display will tell how to display website in the browser. Options are fullscreen, minimul-ui, standalone, or browser. "standalone" will display as normal with statusbar and "fullscreen" will display in fullscreen.

Add the meta description to viewport

Add the lines before the <title> tag in the head section of the html.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

All this does it to make sure the content is displayed correctly on different view ports. And the apple-touch-icon will show the icon on ios devices. Although the logo from favicon.io is good, you might consider a logo of size 180x180

And that is all, your website is now a PWA! The browser will look for all the vitals and important aspects and will prompt the user to install the PWA.

The code for this example can be found at Github

← Back to home