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.
And whenever the js file reads it on tab is changed and display content after reading means in my app content is purely synchronous with user .
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 💕
Top comments (0)