DEV Community

loading...
Cover image for How to convert any website/webpage into an installable progressive web app (PWA)

How to convert any website/webpage into an installable progressive web app (PWA)

Shashwat Verma
Sometimes I code, sometimes I design. 17 y/o
Updated on ・4 min read

Hi there!
Thinking about how to convert any website/webpage to an installable progressive web app? read on.

In this tutorial, we are going to convert an HTML5 based game into an installable web application, which can be installed on Android or iOS devices.

Made this classic simon game, which is really simple in nature but quite addictive. You can fork or star this repository to make it your own or suggest any further improvements.

Simon-game PWA screenshot

What is a PWA?

A progressive web app (PWA) is the set of mobile web application development techniques that entails building apps that feel and look like native ones. Using a web stack (JS, HTML, and CSS), progressive web apps combine rich functionality and a smooth user experience associated with native apps. Simply put, PWA is the web app with the native-app flavor: After the installation, a user clicks on its icon on a device's home screen and gets straight to the website.

One of the best features of PWA's is that it is installable on user's devices like native apps, and work in offline mode too.

Steps to take -

  • Create a service worker file.
  • Update the main document to check if the functionality is supported.
  • Create manifest.json for app metadata.
  • Use Chrome dev tools to debug the app.

1. Service worker

Create a service-worker.js file in the root directory of the project, it is important to put it in the root directory to help us store static content in cache storage. You can almost store any kind of media in cache storage like mp3, mp4, video maybe? and obviously the static file HTML, CSS, and JS.

// Installing service worker
const CACHE_NAME  = 'Simon-game';

/* Add relative URL of all the static content you want to store in
 * cache storage (this will help us use our app offline)*/
let resourcesToCache = ["./", "./img/game.png", "./game.js", "./styles.css"];

self.addEventListener("install", e=>{
    e.waitUntil(
        caches.open(CACHE_NAME).then(cache =>{
            return cache.addAll(resourcesToCache);
        })
    );
});
Enter fullscreen mode Exit fullscreen mode

NOTE: change the CACHE_NAME const to your own app's name

Add two more event listeners -

// Cache and return requests
self.addEventListener("fetch", e=>{
    e.respondWith(
        caches.match(e.request).then(response=>{
            return response || fetch(e.request);
        })
    );
});

// Update a service worker
const cacheWhitelist = ['Simon-game'];
self.addEventListener('activate', event => {
    event.waitUntil(
      caches.keys().then(cacheNames => {
        return Promise.all(
          cacheNames.map(cacheName => {
            if (cacheWhitelist.indexOf(cacheName) === -1) {
              return caches.delete(cacheName);
            }
          })
        );
      })
    );
  });
Enter fullscreen mode Exit fullscreen mode

NOTE: Replace the cacheWhiteList variable with your own app's name

2. Check for availability (update index.html)

In the case of a static website, update the main HTML document to check for the availability of service workers, and register our app using the service-worker.js file.

  <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

3. Create manifest.json file

Create a manifest.json file, we need to link that to our main HTML document.

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

Now, this file contains metadata about our app, like App name, icons reference, URL to open on the opening of the app, etc.

{
    "name": "Simon Game",
    "short_name": "Simon Game",
    "start_url": "/",
    "background_color": "#FFDCB5",
    "theme_color": "#1E003D",
    "icons": [
        {
            "src": "img/512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable any"
        },
        {
            "src": "img/192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "maskable any"
        }
    ],
    "display": "standalone",
    "orientation":"portrait"
}
Enter fullscreen mode Exit fullscreen mode

Copy/paste the above code in the manifest and change your app details. You can reference a single icon or use icons of multiple sizes, as devices differ in screen sizes.

4. Use dev tools to debug

Now open the chrome dev tool (ctrl+shirt+i) and click on the applications tab to check if the service worker and manifest file are detected by the browser.
As you can see below the logo and name of the app are shown.

Dev tools

The background_color property sets the splash screen color and theme_color the notification bar.
Splash screen simon-game

You can also check if your app meets the standard for PWA, in the lighthouse tab and click generate the report.

Lighthouse tool

This will also help you to add things that you might forget like adding this line for iPhone/Apple users.

<link rel="apple-touch-icon" href="img/game.png"/>
Enter fullscreen mode Exit fullscreen mode

PWA compatible

BOOM, we are done! You have successfully converted a website/game into a PWA.

How to install on devices?

On chrome, you'll have this small add icon on the URL bar, which prompts you to install the app on your device.
Install icon on URL bar

On mobile devices, you'll get a prompt (Chrome)
Install prompt

If not then click on the 3 dots in the top right corner, an "Install app" option appears.
3 dot menu on chrome

Perfectly installed on Android.
Installed on Android device

Hope it helped. Give a like :)

Cheers,
Shashwat
Follow me on twitter

Discussion (25)

Collapse
eric23 profile image
Eric

I've been wanting to try this. Thanks for the excellent instructions!

Collapse
zippytyro profile image
Shashwat Verma Author

Glad you found it helpful

Collapse
girishgr8 profile image
Girish Thatte

Fabulously laid down the instructional content..... Found it really easy to follow the instructions and get the task done

Collapse
zippytyro profile image
Shashwat Verma Author

Thanks, bro, will write more in the future. I spend enough time writing these and I enjoy helping people.

Collapse
jdnichollsc profile image
J.D Nicholls

Hello mate, thanks for sharing! What do you think to use Workbox from web worker?

Collapse
seriouslee13 profile image
SeriousLee13

Epic post. I'll definitely be using it in the near future.

Collapse
zippytyro profile image
Shashwat Verma Author

Means a lot to me, Thanks!

Collapse
ssjvirtually profile image
Shashi_Jakka

Thanks for sharing , very much needed for web devs,who want to create app like experience to their users.

Collapse
zippytyro profile image
Shashwat Verma Author

Your welcome, Indeed. Try it you'll love it

Collapse
saber0769 profile image
Saber

Thank you

Collapse
zippytyro profile image
Shashwat Verma Author

Your welcome!

Collapse
brooksforsyth profile image
Brooks Forsyth

What if my site uses flash??? Hehehe

Collapse
zippytyro profile image
Shashwat Verma Author

Can you send me your website? however, flash is discontinued
timesofindia.indiatimes.com/gadget...

Collapse
brooksforsyth profile image
Brooks Forsyth

I was joking. Would be interesting if you could though.

Thread Thread
zippytyro profile image
Shashwat Verma Author

we may find a way but will prove futile its support is discontinued.

Collapse
lukeshiru profile image
LUKE知る

Great work!

Collapse
zippytyro profile image
Shashwat Verma Author

Lots of love

Collapse
ben profile image
Ben Halpern

Great writing here

Collapse
zippytyro profile image
Shashwat Verma Author

I appreciate it

Collapse
jamesabaja profile image
James Gabriel Abaja

Thanks for this guide! Excited to try this out for my personal projects.

Collapse
zippytyro profile image
Shashwat Verma Author

Your welcome, try it you'll love it.

Collapse
arpan_dev_007 profile image
arpan_srivastava

A very well-written guide on PWA's
loved the way it was written and explained in a very simple manner
become a fan of your blogs sir 😍
need more blogs like this sir 🙏

Collapse
zippytyro profile image
Shashwat Verma Author

Thanks a lot for your appreciation. Don't call me sir I'm 17 xD

Collapse
jakjub profile image
ja-kjub

Does this work also for a web app to be installed on PC / windows?

Collapse
zippytyro profile image
Shashwat Verma Author

Yes, bro, absolutely. Works Like butter on PC