DEV Community

Cover image for Supercharge Your Website Using PWA: Installable Website
Tapajyoti Bose
Tapajyoti Bose

Posted on • Updated on

Supercharge Your Website Using PWA: Installable Website

What is a PWA?

Progressive Web Apps (PWA) are web applications that have been designed so they are capable (utilize native features), reliable (work even in offline mode), and installable. These three pillars transform them into an experience that feels like a platform-specific application.

Why use PWA?

At their heart, Progressive Web Apps are just web applications. Using progressive enhancement, new capabilities are enabled in modern browsers. Using service workers and a web app manifest, a web application can be converted into a PWA. If the new capabilities aren't available, users still get the core experience.

Comparison between native app, web app and pwa

As it can be seen from the picture above, PWA offers the best of both worlds by delivering a web experience your users will love, using the latest web features to bring enhanced capabilities and reliability, Progressive Web Apps allow what you build to be installed by anyone, anywhere, on any device with a single codebase.

Getting Started

The requirements for a website to be turned into a PWA are:

  • The website itself (served over https or from localhost)
  • manifest.json (provides information about a web application)
  • service worker (a script that allows intercepting and control of how a web browser handles its network requests and asset caching.)

Here we will not be focusing on creating a website, but on making an existing website installable. To follow along just use a basic website like the one given below.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PWA: Installable website</title>
    </head>
    <body>
        <h1>Test</h1>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

NOTE: Its possible to style the site or add scripts, but for the purpose of adding PWA installation feature, this will suffice.

The defination of manifest.json

{
  "name": "<name of the application>",
  "short_name": "<short name for the application> (can be same as name)",
  "start_url": "<start url for the website>",
  "display": "<display mode for the website>",
  "description": "<description of the application>",
  "background_color": "<color>",
  "theme_color": "<color>",
  "orientation": "<orientation>",
  "icons": [{
    "src": "<image source>",
    "sizes": "<widthxheight>",
    "type": "image/png"
  }]
}
Enter fullscreen mode Exit fullscreen mode

An example manifest.json would look like

{
    "name": "PWA: Installable website",
    "short_name": "Installable PWA",
    "start_url": "index.html",
    "display": "standalone",
    "description": "App for testing PWA features",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "orientation": "portrait-primary",
    "icons": [
        {
            "src": "image/icon-24.png",
            "sizes": "24x24",
            "type": "image/png"
        },
        {
            "src": "image/icon-32.png",
            "sizes": "32x32",
            "type": "image/png"
        },
        {
            "src": "image/icon-48.png",
            "sizes": "48x48",
            "type": "image/png"
        },
        {
            "src": "image/icon-64.png",
            "sizes": "64x64",
            "type": "image/png"
        },
        {
            "src": "image/icon-128.png",
            "sizes": "128x128",
            "type": "image/png"
        },
        {
            "src": "image/icon-256.png",
            "sizes": "256x256",
            "type": "image/png"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

To add the manifest to the website, add the following in the head section

<link rel="manifest" href="manifest.json" />
Enter fullscreen mode Exit fullscreen mode

Its a good practice to add the following in the head section as well for iOS support

<link rel="apple-touch-icon" href="image/icon-24.png" />
<link rel="apple-touch-icon" href="image/icon-32.png" />
<link rel="apple-touch-icon" href="image/icon-48.png" />
<link rel="apple-touch-icon" href="image/icon-64.png" />
<link rel="apple-touch-icon" href="image/icon-72.png" />
<link rel="apple-touch-icon" href="image/icon-96.png" />
<link rel="apple-touch-icon" href="image/icon-128.png" />
<link rel="apple-touch-icon" href="image/icon-256.png" />
<meta name="apple-mobile-web-app-status-bar" content="#db4938" />
<meta name="theme-color" content="#db4938" />
Enter fullscreen mode Exit fullscreen mode

Now only the service worker is left to be dealt with.

service-worker.js

const STATIC_CACHE = "static-cache-v1"
const static_assets = [
    "/",
    "/index.html",
    "/script.js",
    "/image/icon-24.png",
    "/image/icon-32.png",
    "/image/icon-48.png",
    "/image/icon-64.png",
    "/image/icon-72.png",
    "/image/icon-96.png",
    "/image/icon-128.png",
    "/image/icon-256.png",
]

// storing static assets in cache on service worker install
self.addEventListener("install", event => {
    event.waitUntil(
        caches.open(STATIC_CACHE).then(cache => {
            cache.addAll(static_assets)
        })
    )
})

// returning static assets from cache
self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        })
    )
});
Enter fullscreen mode Exit fullscreen mode

We are required to handle the fetch event to enable installation.

Enable the service worker by adding the following script in the website

<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/service-worker.js');
    } else {
        console.log("Service worker is not supported");
    }
</script>
Enter fullscreen mode Exit fullscreen mode

Now the last piece of the puzzle, serving the website on localhost. If you are using VS Code, you can easily do it using the live server extension (recommended for beginners).

Installable website

The installation icon on the top right of the url-bar signifies its now installable. Click it to install the pwa on your device.

NOTE: This is just a brief overview. In a production grade pwa its more advisible to periodically refresh the static assets as well to ensure that the user don't access outdated content.

Project using this Implementation

Smartsapp

Web-app: https://smartsapp-ba40f.firebaseapp.com

GitHub logo ruppysuppy / SmartsApp

💬📱 An End to End Encrypted Cross Platform messenger app.

Smartsapp

A fully cross-platform messenger app with End to End Encryption (E2EE).

Demo

NOTE: The features shown in the demo is not exhaustive. Only the core features are showcased in the demo.

Platforms Supported

  1. Desktop: Windows, Linux, MacOS
  2. Mobile: Android, iOS
  3. Website: Any device with a browser

Back-end Setup

The back-end of the app is handled by Firebase.

Basic Setup

  1. Go to firebase console and create a new project with the name Smartsapp
  2. Enable Google Analylitics

App Setup

  1. Create an App for the project from the overview page
  2. Copy and paste the configurations in the required location (given in the readme of the respective apps)

Auth Setup

  1. Go to the project Authentication section
  2. Select Sign-in method tab
  3. Enable Email/Password and Google sign in

Firestore Setup

  1. Go to the project Firestore section
  2. Create firestore provisions for the project (choose the server nearest to your location)
  3. Go to the Rules

Reference

  1. web.dev/what-are-pwas
  2. MDN Docs

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

Thanks for reading

Reach out to me on:

Latest comments (11)

Collapse
 
rizwanrajput profile image
Rizwan Aaqil

Nice tutorial!

Is it possible to convert a pwa app into installable apk/ipa file, which we can submit to app stores too?

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

The blog shared in the comments by @vimal goes into the details of how to publish your apps in the play store

Collapse
 
dorshinar profile image
Dor Shinar

PWA is really sweet, and for a long I was sure it was going to be the future, but now I begin to doubt it.
On my phone I have exactly one app that is a PWA (dev.to), and most people I know have zero PWAs, even though they have close to 100 regular apps.
I think people are used to installing apps from stores (the App Store or the Play Store), and are very hesitant to "install" a web site (which, admittedly sound a bit suspicious).

Collapse
 
vimal profile image
VIMAL KUMAR

PWA can be published at Play Store
medium.com/@firt/google-play-store...

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

I wasn't aware of this. Thanks for sharing

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

I am not sure if pwa is the future, but its definitely a fun technology to toy around with. I think what you said definitely has a lot of weight

I think people are used to installing apps from stores (the App Store or the Play Store), and are very hesitant to "install" a web site

Collapse
 
anandmoorthyj profile image
Anand Moorthy

I built my entire app as PWA, it's so awesome.
checkout deepfeed.net

Collapse
 
mdhesari profile image
Mohammad Fazel

What a great site!

Collapse
 
anandmoorthyj profile image
Anand Moorthy

Thanks @mdhesari

Collapse
 
therickedge profile image
Rithik Samanthula

Thanks Man, Can't wait to try it out and make my portfolio a PWA!

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Welcome :)