DEV Community

Cover image for Convert any website into a PWA in just 3 simple steps
Tharun Shiv
Tharun Shiv

Posted on • Updated on

Convert any website into a PWA in just 3 simple steps

This will be a do-as-you-read article, where I will provide you the base code and the code that you can use to try it along to build a basic PWA.

PWA - Progressive Web Apps

PWA stands for Progressive Web Apps. PWA is a web app, which can be displayed in the form of a regular App on a phone ( platform-independent) and also works like a regular responsive website on the internet. It is like building a usual website, using the same technologies that you would use, but giving that extra functionalities and advantages of Progressive Web Apps. It is light, fast and secure.

What goes into a Progressive Web App?

You can build your website mostly the way you would always, considering you have set up a responsive layout and works on majority of the browsers. It consists of Javascript mainly and uses Service Workers, in which the server of the PWA is saved in the user’s web browser, and from time to time new feeds are loaded into it. This is the main reason of the speed of a PWA. So these service workers takes care of features which we will be talking about below.

Read more about the Advantages and Disadvantages of PWA here

Convert any website* into a PWA in just 3 simple steps

Features of this PWA that we're building

  1. Works responsively on deskop and mobile
  2. Works Offline
  3. Can be installed on desktop and mobile like an App
  4. Extremely light weight

1. Build the basic website

The first step would require you to build your simple website using the steps that you usually would. Websites are built using the basic building blocks such as the HTML, CSS, and JavaScript. There are a few things that you need to make sure:

  1. When you deploy the website, make sure you serve through HTTPS ( running it locally is an exception )
  2. Make sure you build a responsive site, that works responsively on both Mobile and desktop You're good to go when you have these setup.

To help you get started with the step one quickly, you can clone my sample github project:

2. Create a Web App Manifest file

The Manifest file is a JSON file that has the metadata about your PWA like the name, short_name, start_url, the scope, the icons for the PWA, the Theme color, the background color, and how your PWA should display.

Create a manifest.json in the root folder of the project and fill in the JSON such as the below one.

{
  "name": "Stick-it Notes by Tharun",
  "short_name": "Stick-it",
  "start_url": "index.html",
  "scope": "./",
  "icons": [
    {
      "src": "contract.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "contract.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffd31d",
  "background_color": "#333",
  "display": "standalone"
}
Enter fullscreen mode Exit fullscreen mode

In the index.html, add the link tag to link to the manifest.json file so that it knows that there is a manifest file to use.

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

If you noticed the contract.png, that is the icon of the app. You can create your own by using any tool of your choice or check out a generator like https://realfavicongenerator.net which generates the tags and favicons that you need for your site.

Now your site is installable.

3. Adding Service Workers

A service worker is a JavaScript file that is completely asynchronous and runs on a separate thread, that takes care of intercepting network requests, caching or retrieving resources from the cache, and delivering push messages.

It works even when the website is not active, as this is necessary to deliver the push notifications. It also cannot access the DOM directly. It helps us enable the feature of caching, which helps us run our web app offline.
Now let's do this last step to create our PWA

Add this line of code to the existing JavaScript file or create a new one and link it. In this project we already have a linked JavaScript file, we will use this file to register our Service Workers.

In the myscripts.js

if ("serviceWorker" in navigator) {
  // register service worker
  navigator.serviceWorker.register("service-worker.js");
}
Enter fullscreen mode Exit fullscreen mode

Now time to automatically generate the service-worker.js file. We will be using a NPM package called sw-precache.

In the command line/terminal

$ npm install --global sw-precache
Enter fullscreen mode Exit fullscreen mode

Once it is installed, run the below command, make sure you are in the same path as your project root directory, and wait for the eye candy

$ sw-precache
Enter fullscreen mode Exit fullscreen mode

Hurray!

Now your website is completely converted into a PWA and is ready to roll. You can now go to free hosting services such as Netlify and host your GitHub repository there and watch the fun.

Alt Text

You can notice the Add Stick-it to Home screen which will install your PWA to your phone.

Consider Subscribing to my YouTube Channel https://youtube.com/c/developerTharun

Written by,

Thank you for reading, This is Tharun Shiv a.k.a Developer Tharun

Tharun Shiv

Top comments (25)

Collapse
 
venkat121998 profile image
venkat anirudh

Works! Thank you

Collapse
 
developertharun profile image
Tharun Shiv

Glad it helped youπŸ™‚

Collapse
 
marvel1h profile image
Marvelous Afolabi

Thank you πŸ˜€

Collapse
 
developertharun profile image
Tharun Shiv

Glad it helped.. thank youπŸ™‚

Collapse
 
nataliedeweerd profile image
𝐍𝐚𝐭𝐚π₯𝐒𝐞 𝐝𝐞 π–πžπžπ«π • Edited

Do you have any tips for debugging why the "Add to homescreen" button may not appear on mobile? As that's the issue I'm having :(

Nvm - sorted it! Apparently htaccess rewrite's stop the "Add to homescreen" from appearing.

#RewriteCond %{REQUEST_FILENAME} !-d
#RewriteCond %{REQUEST_FILENAME}\.html -f
#RewriteRule ^(.*)$ $1.html [NC,L]
Collapse
 
developertharun profile image
Tharun Shiv

Ah I see.. then what should we do to resolve it?

Collapse
 
nataliedeweerd profile image
𝐍𝐚𝐭𝐚π₯𝐒𝐞 𝐝𝐞 π–πžπžπ«π

Just comment any redirects out like I have and it works :) Worth noting I'm not using any js framework, my PWA was very basic - haha.

Thread Thread
 
developertharun profile image
Tharun Shiv

Even I build PWAs without any framework. That doesn't mean it's basic, it means you know to do stuff without the help of a framework. πŸ™‚ Good work πŸ‘

Collapse
 
praveenreddy1798 profile image
praveenreddy1798

Good start to PWA, looking forward for more articles on it.

Collapse
 
developertharun profile image
Tharun Shiv

Thank you 😊

Collapse
 
uma_bcc profile image
umamaheswari.v

Well written πŸ’―

Collapse
 
developertharun profile image
Tharun Shiv

Thank you😊

Collapse
 
sciepsilon profile image
Kalinda Pride

Can you explain more - what does it mean for the website to be installed, and what will the user see as a result?

I'm thinking of Google Docs or Gmail, versus Steam or Zoom or Slack. If I understand correctly, all of these are PWAs. But Docs and Gmail always run in a browser tab, and they feel like websites that happen to still work if your internet connection goes down. Steam, Zoom, and Slack all run in their own windows, have their own icons in the start menu, and need to be explicitly installed by the user, even though their special desktop app looks like it's just a re-skinned web browser. You can run them in a browser tab without downloading, but the features are different. Often sign-in is only available in a browser tab, but other features (e.g. playing a Steam game or making a Zoom call) are only available in the desktop app. A common pattern is that the desktop app will automatically open a browser tab when you need to sign in, and the browser tab will prompt you to open the desktop app when you try to access desktop-only features. If I send you a link for a Zoom call, you can open it in your browser like a normal link, and then your browser will ask for permission to open the desktop app where you can actually join the call.

Collapse
 
developertharun profile image
Tharun Shiv • Edited

Hi,
I have videos, where I demo you the installation of the PWA - Progressive Web Apps on both Mobile and Desktop. Hope it helps.

Installing on a Mobile

Installing on Desktop

To clarify further, Zoom, steam or slack need not be PWAs but can be a regular desktop app. A regular desktop app is downloaded by you from a website, in say .exe format for example, and you install it by using the Wizard.

Whereas a PWA is a single click away from installing , and is installed by the above methods.

Hope the video gives you more clarity. Let me know if you still didn't get it, would be happy to help πŸ™‚

You can try installing on : bit.ly/stick-it-notes

Collapse
 
praveenreddy1798 profile image
praveenreddy1798

Well presented demo

Thread Thread
 
developertharun profile image
Tharun Shiv

thanks!

Collapse
 
chandrika56 profile image
Jaya chandrika reddy

Was waiting for this one! Thanks! πŸ”₯πŸŽ‰

Collapse
 
developertharun profile image
Tharun Shiv

Glad it helped. πŸ™‚

Collapse
 
yashraj021 profile image
Yash

Arey Arey. That was awesome.

Collapse
 
developertharun profile image
Tharun Shiv

πŸ˜… Thank you.

Collapse
 
faelplg profile image
Fael

Thank you!! Very useful!

Collapse
 
developertharun profile image
Tharun Shiv

Thank you! Glad it helped! πŸ™‚

Collapse
 
goodnewsdaniel profile image
Goodnews Daniel

Why do I find myself always googling up this article when I want to convert a website to a PWA? It's addictive, init?

Collapse
 
zeshama profile image
Natnael Getenew

sw-precache is depercated.