Convert your Website into an APP with 3 easy steps

Featured on daily.dev

Subscribe to my newsletter and never miss my upcoming articles

Hey, If you like this article make sure you check out my YouTube Channel and my Twitter where I share things about technology.

There are several websites which let you convert your website into an Android/IOS app, But in reality, They provide a web view of the website with tons of watermark

Instead of using these services let me tell you about PWA's and how you can convert your website into a Progressive Web Application (PWA) by following 3 easy steps.

What's a PWA?

WHAT (1).png Progressive Web Applications is a technology built by Google developers which allow developers to add native looks and some features like offline load & Push Notifications to your website.

Advantages of PWA

WHAT (6).png

  • Easy Installation for users: It just take few seconds to install PWAs and they are lightweight which is the reason why Instagram lite and Facebook lite is basically a PWA.
  • Easy to build: Web technologies are easier to learn than native development and numbers of developers required to build a project is also less.
  • Cost-Effective: With one code base your website can run on android phones, iPhones and Windows Computers.
  • Better Performance: With image and code caching the performance is increased drastically.

Prerequisites

  • Basics of HTML and JavaScript
  • Current Website should load with HTTPS
  • Current Website should be responsive

    How can you do it?

    These are the three files needed to convert your current website into an installable PWA.

Manifest JSON

WHAT (4).png This is the file which helps you add splash screens and icons to your app. In this file, you specify basic metadata like your app name, icon size, icon directory and start URL of your website.

Here is my Manifest.JSON which you can copy and replace it with your details.

{ 
  "name": "Hrithwik Bharadwaj",
  "short_name": "Hrithwik",
  "description": "Portfolio PWA of Hrithwik Bharadwaj",
  "icons": [
    {
      "src": "/assets/img/icons/512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "/assets/img/icons/256x256.png",
      "type": "image/png",
      "sizes": "256x256"
    },
    {
      "src": "/assets/img/icons/192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/",
  "scope": "/",
  "dir": "ltr",
  "background_color": "#111111",
  "display": "standalone",
  "theme_color": "#111111",
  "orientation": "portrait",
  "prefer_related_applications": false
}

This might be confusing to understand if you are a beginner so just check out this manifest generator to generate icons and later download the file.

Also don't forget to Include this in your HTML file

 <link href="/static/manifest.json" rel="manifest">

Service Worker

WHAT (5).png This file helps in making your app work offline by caching important files. If you have worked on React or Vue Projects this file is usually shipped along.

Here I am using WorkBox API for service worker as its very simple. Just create a file called sw.js and paste the below code there.

if ('undefined' === typeof window) {
    importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
}

workbox.core.skipWaiting();
workbox.core.clientsClaim();

if (workbox) {

    console.log(`Yay! Workbox is loaded 🎉`);

    workbox.precaching.precacheAndRoute([
        {
            "url": "/",
            "revision": "1"
        }
    ]);

    workbox.routing.registerRoute(
        /\.(?:js|css)$/,
        new workbox.strategies.StaleWhileRevalidate({
            cacheName: 'static-resources',
        }),
    );

    workbox.routing.registerRoute(
        /\.(?:png|gif|jpg|jpeg|svg)$/,
        new workbox.strategies.CacheFirst({
            cacheName: 'images',
            plugins: [
                new workbox.expiration.Plugin({
                    maxEntries: 60,
                    maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
                }),
            ],
        }),
    );

    workbox.routing.registerRoute(
        new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
        new workbox.strategies.CacheFirst({
            cacheName: 'googleapis',
            plugins: [
                new workbox.expiration.Plugin({
                    maxEntries: 30,
                }),
            ],
        }),
    );
} else {
    console.log(`Boo! Workbox didn't load 😬`);
}

workbox.googleAnalytics.initialize();

Now that you have created an sw.js file just add the link to it on your HTML page.

<script src="sw.js"> </script>

Adding the installable component

lolzRag.gif

This part is the one which will allow you to get automatic "install now" prompt.

   <script>
            if ('serviceWorker' in navigator) {
              navigator.serviceWorker
                .register("sw.js", {scope: '/'})
                .then(registration => {
                  console.log("ServiceWorker running");
                })
                .catch(err => {
                   console.log(err);
                })
            }

</script>

Copy this and add it in your HTML file.


Testing

After you add these things. To check if everything is working fine, Use Lighthouse in chrome and check if it is showing a PWA sign.

dev.jpg


What next?

PWA's can have many other features and even have a different type of service worker. Above code was the easiest implementation for beginners.

Below are some small things which you can add.

Custom Install Button

You can do something like this where the button hides after installation using this code some simple JavaScript code and CSS.

lol.gif

Push Notifications

From BookMyShow to Instagram everyone sends Push Notifications from PWA to their users. This can be implemented using OneSignal or Firebase Cloud Functions push.JPG


Conclusion

If your Website is responsive, It's Cool to make it a PWA but if you want to build an app which uses native features like Bluetooth don't make it a PWA. There is also Flutter and React Native booming which can be used for cross-platform development.

Maria Kristina Salada's photo

I've already tried to make a PWA before even knowing what really is it thru one of the web.dev lessons. I just follow the instructions and I thought I'm just making a responsive website but not. There's a lot to it that I don't really know, but I enjoyed it because it's so cool. These past few days I'm learning more knowledge about it and I find your post helpful. Thanks.

Hrithwik Bharadwaj's photo

I am happy knowing it was helpful

Edidiong Asikpo's photo

Very insightful article Hrithwik Bharadwaj. Thanks for sharing.

Hrithwik Bharadwaj's photo

Glad to know you liked it

Rajendra Basu's photo

Was just hearing about PWA's yesterday at work and nice to see an article pop up here at this platform

Andrew Baisden's photo

Nice very cool App development is really hot at the moment.

Spot Raju's photo

Woah learnt something new