Progressive Web Apps PWA

[alphabet]

A progressive web application (PWA) takes advantage of the latest technologies to combine the best of web and mobile apps.

More importantly, it makes your page speed blazing fast and can even operate offline.

It was super easy to convert my site to a Progressive Web App with the attached tutorial.

With a PWA, your web site loads in a browser as normal. You add a small javascript file to detect if the browser can use a service worker. A service worker is a small script that intercepts network requests and serves the resource from the users device storage. Service Workers require https protocol only. You can also add a manifest that allows the user to save your website and launch it like an app.

[PCINET - Andreas]

Awesome stuff! Where is the tutorial? I read the developers guide on Google but this doesn't help to integrate a Miva store. Keep on posting apps/code like this!

[AHerb]

The only problem is... frequently updated store content. User will keep seeing data from his/her browser storage

[alphabet]

AHerb

There are different service worker design patterns to serve the freshest resource first. For example, when the PWA is launched your site could display the last render while it goes to the network to get fresh content. Once the content arrives the service worker can refresh the page and saves the new content to disk. I think Jake Archibald from Google has a cookbook on service worker patterns.

[AHerb]

Cool. Thank you, will have a look at it.

[alphabet]

Hi Andreas,

That link is kind of tricky, click on the link that says Your First Progressive Web App, not the Google Developers link below it.

I'm hesitant to post code that can break a merchant store and the Service Worker can be risky, besides, none of the PWA is unique to Miva code and doesn't go in the mm5 directory.

The Service Worker needs to be on a secure protocol even for testing. I'm not sure how easy that is on a Miva dev store, so the Google tutorial includes a Chrome Server Extension that allows you to serve the PWA while developing.

Some of the tutorial is about making an SPA but the codelab is focused on Progressive Web Apps. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.

The tutorial also shows how to troubleshoot the SW.js in Chrome Dev Tools, really cool.

[lesliekirk]

I noticed the date on this original post and now wonder if Miva is now actively working on incorporating this? Or have any developers taken up the clarion call? And the word "risky" has been tossed out there.