Code Playground.

Progressive Web Apps(PWA’s), are a sort of use that is created utilizing web innovations and can be introduced on any gadget like a customary application. Making a basic PWA is exceptionally simple as it includes adding two significant documents to the venture which are manifest.json and serviceworker.js. From that point forward, the PWA would be fit to be introduced on any Operating System.

Stage 1: Create a manifest.json document in a similar catalog where index.html record is put. This document contains the application name, begin URL, subject tone and some more essential data about the application in JSON design

{ 
"name": "CrowdforGeeks", 
"short_name": "CrowdforGeeks", 
"description": "PWA for CrowdforGeeks", 
"start_url": "/", 
"display": "standalone", 
"scope": "/", 
"orientation": "any", 
"background_color": "#ffffff", 
"theme_color": "#000000", 
"status_bar": "default", 
"icons": [
       {
       "src": "/static/icons/Django-Blogiee.1b98d36d50a7.png", 
       "sizes": "512x512", 
       "purpose": "any maskable"
       }
       ],
   "dir": "ltr", 
"lang": "en-US" }

Stage 2: Create serviceworker.js, a JavaScript document in a similar registry as manifest.json which handles introducing and reserving of the PWA application.

var staticCacheName = "crowdforgeeks" + new Date().getTime();
var filesToCache = [
    '/static/icons/Django-Blogiee.1b98d36d50a7.png',
];
  
self.addEventListener("install", event => {
    this.skipWaiting();
    event.waitUntil(
        caches.open(staticCacheName)
            .then(cache => {
                return cache.addAll(filesToCache);
            })
    )
});
  
self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                return response || fetch(event.request);
            })
            .catch(() => {
                return caches.match('/offline/');
            })
    )
});
});

Stage 3: Link serviceworker.js to index.html utilizing <script> tag in index.html.

<script type="application/javascript">
    // Initialize the service worker
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/serviceworker.js', {
            scope: '/'
        }).then(function (registration) {
            // Registration was successful
            console.log('crowdforgeeks: ServiceWorker registration successful with scope: ', registration.scope);
        }, function (err) {
            // registration failed <img draggable="false" class="emoji" alt="????" 
            // src="https://s.w.org/images/core/emoji/11/svg/1f641.svg">
            console.log('crowdforgeeks: ServiceWorker registration failed: ', err);
        });
    }
</script>

At last, you have made a PWA. PWA's can assist you with making your site into an application in your client's cell phone. A few instances of Google Map Go, Twitter light, and Instagram Lite. On the off chance that you take a gander at PWA's obviously, they are not utilizing customary APK records for establishment. So these PWA can be submitted to the play store, yet we can introduce every one of the above models from the play store. This made conceivable by Google utilizing an innovation called Trusted Web Activity(TWA).

Google says "A Trusted Web Activity lets your Android App send off a full-screen Browser Tab with next to no program UI. This capacity is limited to sites that you own, and you demonstrate this by setting up Digital Asset Links. Computerized Asset Links comprise basically of a document on your site that focuses to your application and some metadata in your application that focuses to your site. At the point when you send off a Trusted Web Activity, the program will make sure that the Digital Asset Links look at, this is called check. In the event that confirmation comes up short, the program will fall back to showing your site as a Custom Tab."

For this instructional exercise, we utilize the site django-blogiee.herokuapp.com. You can investigate its manifest.json and serviceworker.js.

There are three methods for doing this as follows:

Assuming you are an Android designer you can construct yourself and you have compelling reason need to follow this tutorial(Hard way)
Indeed, even you are not an Android engineer but rather have insight with NodeJs, NPM, JDK, and android order line devices and order line interface you can utilize the Bubblewrap project.(Medium way however need a ton of downloads)
Assuming you are running your blog utilizing pre-assembled Content Management Systems(CMS) like WordPress, Ghost, and its modules, You can follow this instructional exercise. (Simple way)
Ensure your site is a completely viable PWA. You can utilize the Google LightHouse apparatus to look like the underneath picture.

Presently on the off chance that you are Good with your PWA, go to site PWABuilder by Microsoft and place the URL of your site and snap start. in the event that you see your site score as 100, click fabricate my PWA. you will see something like the beneath picture.

Then you can download your android bundle which can be submitted to the play store. Indeed, even you can download bundles for Apple App Store, Windows Store, and Galaxy store.

Remove the Downloaded Zip to get the APK document to add the Digital Asset record "assetlinks.json". Ensure your assetlinks.json document can be found at URL https://<your domain>/.notable/assetlinks.json.