Progressive web apps have been on the hype in the web dev community. Many developers are "converting" their sites into PWAs. But am not here to tell you about converting a site to a pwa, but on making mobile apps through pwa technology.

Oh and I'll also help you in making your pwa into an installable app and even publish it to playstore if your interested in that.

1. Mobile first design

First of all make sure that you have designed your app to look and feel well on mobile.

You can do this through css media queries and ensuring that the animations if any are smooth but if you're not willing to go through that hustle I would suggest using a mobile UI framework like Ionic
Check it out here Ionic Docs

1. Generating the manifest.json file

After all the coding is done and you have your beautiful app ready, now its time to generate the file that will allow the browser to identify your app as a pwa.

You can type out the file using the following structure


"name": "Temporas", "short_name": "Temporas", "theme_color": "#222831", "background_color": "#ffad17", "display": "standalone", "Scope": "", "start_url": "/index.html", "icons": [ // A lot of icons ]

or generate it using a tool like this one
I believe everything here is self explanatory 😉.

Put this file outside your the folder containing your static assets e.g Public or Dist folder

1. Registering the service worker > A service worker is generally a script that gives you access to some native device features like push notifications and background sync and allows caching of your assets (markup,css and Js) to allow your app to run offline To register it you can just paste in the following snippet in your index.html (or the html file you specified as you start url in the manifest.json)

<script> // Registering our Service worker if('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js', { scope: './' }) } </script>

4.The last step 🎉🎉

Now we need to tell the browser which files to cache for offline use.

This is done in the sw.js file. Create this outside of your assets folder in the same level as your manifest file.
The edit this snippet in accordance with your app.


const cacheName = 'Temporas'; // Cache all the files to make a PWA self.addEventListener('install', e => { e.waitUntil( caches.open(cacheName).then(cache => { // Our application only has two files here index.html and manifest.json // but you can add more such as style.css as your app grows return cache.addAll([ './', './index.html', './manifest.json' ]); }) ); });


We are all done, or are we 😑. At this stage you can open your app on your phone web browser and then click on Add to homescreen 🎉🎉

Since I don't want to make this post any longer I'll cover the deployment in part 2 of this. Be free to ask any question or give suggestions or corrections wherever necessary.