Updating pwa

Whenever you change the version of service worker the app gets auto updated.
And also you can show interface for update.
But You have to make cool app like Amazon android which updates automatically when Amazon wants.

let's get started

To make app like that you have to cache only your index.html.
(If you have to give styled interface , you can add style.css also)

index.html

...

<div id="app" class="full-body">
<H1>You're offline<H1>
</div>

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

one script that will update content.

If you are using the framework like MDL or bootstrap.You have to place their scripts after update.js

update.js

var template = "you're online now";
var app = document.querySelector("div#app");
app.innerHTML=template;

This is process which will update your app when you will update the template variable

Making more complex

In my app I have created 3 tabs which are create,markdown to pdf, settings.
Each tab have it's own template file.
You can check here.

You can check here :
https://formal-stack.netlify.app/

Example of my app

In my app you can see I have created a loader and different tabs when you tap on tab the html template for that tab loads and the loader hides.
On every click on tab button the ui.js file reads the page template stored in pages directory and shows content.

You can see here https://github.com/NotableAPP/Formal-stack-pdfs/tree/main/APP/pages

In my app I have created my own extension which is .stackformal.In this type of file I have stored the html code which appears on the call means on tab opened.

temp.js

In my app I have created temp.js file which handles update temporary and after the service worker update app became stable.

Written by SGI with 💕