DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for PWA || MAKING APP synchronous || Auto update assets
ShGI
ShGI

Posted on

PWA || MAKING APP synchronous || Auto update assets

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>
...
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo NotableAPP / Formal-stack-pdfs

Make pdf from image , markdown and more is coming...

Formal-stack-pdfs

The app where pdfs created in multiple ways like from markdown text , plain text , images to pdf and many features coming soon.

Formal contribution

if you want to contribute to our app/site then see issue availibility for you and then fork , edit and pr to project.






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 ๐Ÿ’•
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

This post blew up on DEV in 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!