How to Build a PWA in Vanilla JS
A simple step-by-step tutorial, all done with pure JavaScript, to set up a simple PWA that can be accessed offline using a web app manifest and a service worker.
Today we will learn about the progressive web app, a very interesting and trending topic in current times, We will start with the basic steps first on how Progressive Web App works with vanilla js. Also, we’ll cover the concept of PWAS without using any of the frameworks, it's just a plain vanillaJS.
What are Progressive Web Apps?
A Progressive Web app is an application which is built on top of HTML, JS and CSS with some extra features like service worker and manifest.json file. These extra features will give the ability to run the web application offline.
Various big companies are moving towards the progressive web app instead of native apps, as it gives some much flexibility to end-users. In some websites you can find the + icon at the right side of the address bar, those are progressive web apps.
Setup your base app for PWA
We will be using npm to start our project, so firstly create a root folder using this command mkdir first-pwa-app or another name of your choice then go to that directory by using this command cd first-pwa-app. Run npm init
1npm init
2package name: (first-pwa-app)
3version: (1.0.0)
4description: This is the first PWA example
5entry point: (index.js): index.html
6test command:
7git repository:
8keywords:
9author: Mohammed Modi
10license: (ISC)Once you fill up those details your final output of the package.json file will be below
1{
2 "name": "first-pwa-app",
3 "version": "1.0.0",
4 "description": "This is the first PWA example",
5 "main": "index.html",
6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1"
8 },
9 "author": "Mohammed Modi",
10 "license": "ISC"
11}After that, we need to install the serve dependency to serve the application in localhost so install it using npm npm i serve --save. And then add a script in the package.json file.
1{
2 ...
3 "scripts": {
4 "test": "echo \"Error: no test specified\" && exit 1",
5 "serve": "serve ."
6 },
7 ...
8}So finally our application is ready to serve in localhost. Now let's add some html and css
Setting up the Javascript
Create a directory for the app and add js, css, and images subdirectories. It should look like this when you’re finished:
1/first-pwa-app # Project Folder
2 /css # Stylesheets
3 /js # Javascript
4 /images # Image files.
5 package.json
6 package-lock.json
7 index.html
8 manifest.json
9 sw.jsYou will understand the use of manifest.json and sw.js files once we move ahead in this tutorial.
Add Some code for app interface
When writing the code for Progressive Web Application we need to keep in mind two requirements
- The landing page should have some content even if the javascript is not loaded
- The App should be responsive and can be properly interactive in any device.
For this app, to handle the first requirement we will add the static text in the Html page and for the second requirement, we will use the viewport.
So let's add this code inside the index.html file.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <title>My First PWA</title>
6 <link rel="stylesheet" href="css/style.css" />
7 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8 </head>
9 <body class="fullscreen">
10 <div class="container">
11 <h1 class="title">My First PWA!</h1>
12 </div>
13 </body>
14</html>Next, we need to create a file css/style.css and paste this code inside this
1body {
2 font-family: sans-serif;
3}
4/* Make content area fill the entire browser window /
5/ Make content area fill the entire browser window */
6html,
7.fullscreen {
8display: flex;
9height: 100%;
10margin: 0;
11padding: 0;
12width: 100%;
13}
14/* Center the content in the browser window */
15.container {
16margin: auto;
17}
18.title {
19font-size: 3rem;
20}Once you add the code save all the files and run the script npm run serve which will start your application in http://localhost:5000/
Testing the App
As we can see our application is running in the browser, let test it using the LightHouse Extension in Google Chrome browser. For the best result, I recommend testing in an incognito tab of google chrome.
As you can see we have green signals for both of our above requirement:
- Has a tag with width or initial-scale
- Contains some content when JavaScript is not available
But still, there is lots of work to do, so let's start with the first feature of PWA's.
Adding a Web App Manifest
Let's create a new file called manifest.json in the root of our application. To understand more about the manifest file check out [this doc]
1{
2 "name": "My First Progressive Web app",
3 "short_name": "First PWA",
4 "lang": "en-US",
5 "start_url": "/index.html",
6 "display": "standalone",
7 "background_color": "white",
8 "theme_color": "white"
9}Now update the index.html head tag by adding the manifest.json file as a link
1<head>
2 ...
3 <link rel="manifest" href="/manifest.json" />
4 ...
5</head>We should also declare the theme colour which should match with your manifest.json file as meta tag.
1<head>
2 ...
3 <meta name="theme-color" content="white" />
4 ...
5</head>Once you run the lighthouse test again you can see we got green signals in some points like
- Sets a theme colour for the address bar.
App Icons
Still, we need to add more attributes to our manifest.json files like icons so let's add the icons inside the images folder, I have used to icons pwa-icon-256.webp and pwa-icon-256.webp for this demo you can find in this repo. You can use various sizes in it. And finally, add the favicon.webp in the root of the project.
So let's add the icons attribute after the short-name
1{
2 "name": "My First Progressive Web app",
3 "short_name": "First PWA",
4 "icons": [
5 {
6 "src": ".images/pwa-icon-256.webp",
7 "sizes": "256x256",
8 "type": "image/png"
9 },
10 {
11 "src": ".images/pwa-icon-512.webp",
12 "sizes": "512x512",
13 "type": "image/png"
14 }
15 ],
16 "lang": "en-US",
17 "start_url": "/index.html",
18 "display": "standalone",
19 "background_color": "white",
20 "theme_color": "white"
21}And the index.html will head can will look like
1<head>
2 ...
3 <link rel="apple-touch-icon" href="images/pwa-icon-256.webp" />
4 ...
5</head>You can also verify the manifest.json file by opening Chrome DevTools, in the Application Tab, the first tab in the sidebar manifest
After running the test again, we can see all the manifest.json related issues are solved, The remaining issues can be resolved by adding the service worker.
Adding Service Worker
The next requirement of our app will be the service worker. The service worker is a script that runs in the background without any user interaction.
The task of service worker will be to download and cache our content and then serve it when the user is offline. To understand more on service workers you can check this doc from mozilla.
To integrate service workers we need to create a file called sw.js in the root of our project.
Note: Service worker will only have the access to the files of the current and sub-directories hence we need to place it in the root of our project
1let cacheName = "my-first-pwa";
2let filesToCache = ["/", "/index.html", "/css/style.css", "/js/main.js"];
3/* Start the service worker and cache all of the app's content */
4self.addEventListener("install", (e) => {
5e.waitUntil(
6caches.open(cacheName).then(function (cache) {
7return cache.addAll(filesToCache);
8})
9);
10});
11/* Serve cached content when offline */
12self.addEventListener("fetch", (e) => {
13e.respondWith(
14caches.match(e.request).then((response) => {
15return response || fetch(e.request);
16})
17);
18});The first 2 variables cacheName and filesToCache are used to create an offline cache in the browser. cacheName is used to create a cache of specific name and filesToCache will be the list of files that we need to cache, / will store the root files that is index.html even if the user does not specify the file name in the URL and then all other files specified in the array.
Note: Here I have used the
filesToCachearray as a list of static files just to demonstrate the purpose of PWA, it will stop working in production if even one file fails to load.
Finally, we will load our service worker, for that create js/main.js file and copy the below code.
1window.onload = () => {
2 "use strict";
3if ("serviceWorker" in navigator) {
4navigator.serviceWorker.register("./sw.js");
5}
6};And add this script in the index.html file.
1...
2<script src="js/main.js"></script>So the final version of our index.html file will look like:
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <title>Hello World</title>
6 <link rel="apple-touch-icon" href="images/pwa-icon-256.webp" />
7 <link rel="stylesheet" href="css/style.css" />
8 <link rel="manifest" href="/manifest.json" />
9 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10 <meta name="theme-color" content="white" />
11 </head>
12 <body class="fullscreen">
13 <div class="container">
14 <h1 class="title">Hello World!</h1>
15 </div>
16 <script src="js/main.js"></script>
17 </body>
18</html>Now our application is made as fully PWA supported, you can verify it by running the lighthouse test.
Finishing Up
We are done with the code, now the last thing remaining in to host it in any of the https domain. As the PWA will be required to run in the secure domain.
You can get the full source code of this example in this Github repo
I hope you enjoyed the progressive web apps using vanilla js tutorial and found it useful. Please let me know what you think in the comments below.
