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 .
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 and 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 to start our project, so firstly create a root folder using this command or another name of your choice then go to that directory by using this command . Run
Once you fill up those details your final output of the file will be below
After that, we need to install the dependency to serve the application in localhost so install it using npm . And then add a script in the file.
So finally our application is ready to serve in localhost. Now let's add some and
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:
You will understand the use of and 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 file.
Next, we need to create a file and paste this code inside this
Once you add the code save all the files and run the script which will start your application in
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 in the root of our application. To understand more about the manifest file check out [this doc]
Now update the head tag by adding the manifest.json file as a link
We should also declare the theme colour which should match with your manifest.json file as .
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 files like icons so let's add the icons inside the folder, I have used to icons and for this demo you can find in this repo. You can use various sizes in it. And finally, add the in the root of the project.
So let's add the attribute after the
And the index.html will head can will look like
You can also verify the 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 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 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
The first 2 variables and are used to create an offline cache in the browser. is used to create a cache of specific name and will be the list of files that we need to cache, will store the root files that is 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 array 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 file and copy the below code.
And add this script in the file.
So the final version of our file will look like:
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 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.
