Ever wondered about deploying an application with 0MB in ALL environments.. ios, android, windows, etc?

Is it really possible... yes, it is… now pull your mobile and open your storage manager on your mobile I am sure that half of the memory will be taken by apps right? guess what today we need to download an application and install it and then if they provide any update we need to update periodically or else some part of the time the app doesn’t work oh god...

For example, on my mobile I am having call of duty mobile which ranges approximately to 2GB right, every time I receive an update it is around 2GB I must update or else the game will not work .. think what if you install call of duty in 0MB and doesn’t need to update for a lifetime and still you get the latest features …sounds great right

Photo by Ben White on Unsplash

I know call of duty is not web application if it is then think

Nowadays its been difficult to design, and manage applications for different platforms we are going to produce one app manage that app and support all environments like android, ios, windows, ubuntu, CentOS etc.. looks cool right

Now you all get a question like how to do it?.. the answer is PWA i.e. Progressive Web Application.. hey! hey! I know PWA is a stranger but don’t worry PWA will be your buddy( you will build your own PWA) after you finish reading this blog that’s my promise...

This naughty boy is expecting something to accept you as a buddy. Let's see what he is expecting:

1. To know about him.
2. To give him a web application.
3. To inform him about the application you gave.

A Progressive Web App is actually a web app that delivers an app-like experience to users by using modern web capabilities such as,

• To install it anywhere irrespective of running environment like windows, Linux, android, ios, etc.
• To get a push notification, access it offline, to do background synchronization

And so much more... In the end, it’s just your website that runs with the help of a browser in the background with modern web capabilities.

Don’t panic we are just going to have a simple web app using HTML, CSS and JavaScript.

Create a root folder say PWA and inside it create an HTML file with the name index.html and add the following code

Above is a markup language that shows content like My First Pwa! Now Create a folder CSS inside the root folder and create a file named style.css and add the following code

I’ve styled it to fill the entire browser viewport. The content is then centred and the text is set in sans-serif type.

Now we test our simple web app. Host our web app using some web server. I used tomcat for hosting and sublime text for editing code. To host place your root folder(PWA) in the webapps folder inside tomcat now run the server and access your application by http://<ipv4_address>:<port> in my case it is http://localhost:8080.

Preview

Hurray Now we have done the web application. Let's provide it to him

It involves two steps Adding web app manifests and Registering service workers

The manifest file is a simple JSON file that will specify how the app work and look. Now add the below code in the manifest.json file in the root folder

{
 "name": "First PWA",
 "short_name": "PWA",
 "lang": "en-US",
 "start_url": "/index.html",
 "display": "standalone",
 "background_color": "black",
 "theme_color": "black"
}

Prompt Window in PC

Prompt window in a mobile

PWA as app name

name: The title of the application which will be shown in the prompting window to install the app. (In mobile it will be prompted like add to the homepage )

short_name: This will be the name of the application after installation.

lang: The default language of the application.

start_url: Tells the browser which page should be first loaded when the application starts up.

display: The type of the application. we are using standalone in order to provide a native app-like feel.

background_color: The colour of the screen that will splash while opening the application.

theme_color: Theme of our application which will be applied to toolbar and task switcher.

Now we have to link this to our web application so that we will easily understand our web application so add it into the head tag of index.html like

Service workers are scripts that run in the background in a separate thread (so it can’t manipulate DOM) capable of automating some stuff that the user feels bored doing. In our case, we use those service workers to store our files in the cache so that users can get our service offline too(if our application doesn’t need internet to operate) or else we can use service workers for other works.

Note: Service workers will work only in https mode if we access across devices while in case of localhost it will work in http mode too.

Service workers can access the file in same directory and sub directory hence it should be placed in root directory.

Create a file named sw.js in the root folder and add the following contents

var cacheName = 'pwa'; // name of the cache//start the service worker and cache the contents// serve cached contents when offline
var filesToCache = [ // array of files to be cached
self.addEventListener('install', function(e) {
self.addEventListener('fetch', function(e) {
 e.respondWith(
 caches.match(e.request).then(function(response) {
 return response || fetch(e.request);
 })
 );
}); 
 e.waitUntil(
 caches.open(cacheName).then(function(cache) {
 return cache.addAll(filesToCache);
 })
 );
}); 
 '/',
 '/index.html',
 '/css/style.css',
 '/js/main.js'
];

Now that the service worker script is created we need to register it with our application. Create a file named in the folder and enter the following code:

window.onload = () => {if ('serviceWorker' in navigator) {
 'use strict'; // to be executed in strict mode 
 navigator.serviceWorker
 .register('./sw.js');
 }
}

Add the code to your app by including the script just before the closing </body> tag in index.html.

Folder Structure

This is what your folder structure should look like…

After installing you could see the app location on your desktop like

The message came after i added to my mobile check size

App Installed on my mobile

- — — — — — — — HEY LISTEN YOU HAVE DONE IT!! — — — — — — — -

Note: The app size varies depends upon the files you cache

You can check it live here. You can access it offline too after you have checked once online try it :)

Thanks for your patience to read my blog... Kindly do more claps and comments to ensure that you are benefited from this…

If you have any more queries regarding how to host in HTTPS mode or in code or have any suggestions kindly comment.

Have a great day... tata...