Implementation Of Progressive Web Technology When Using Express Template Engines.

Progressive Web Apps (PWAs) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications. This application type attempts to combine features offered by most modern browsers with the benefits of a mobile experience.

INTRODUCTION

Progressive Web Applications are experiences that combine the best of web applications features and the best of mobile applications features. They use service workers, HTTPS, a manifest file and an app shell architecture to deliver native app experiences to web applications.

To learn more click here.

I have been implementing this technology mostly on static web applications, but recently I tried implementing it on a dynamic web application powered by the express.js framework. I was faced with some challenges, which include:

1. Not knowing where my manifest file will reside, of course it should be in your public folder.
2. Not knowing how to cache my view files, since am using a template engine.
3. But more importantly not knowing where my service worker should reside and how to implement it or make it work as usual.

knowing that the service worker only caches the files within its scope,and only has access to the files on its folder or below, you might be tempted to put the serviceWorker file on your views folder since you just want to cache the views files, just like the same way you cache in your static applications. But if you do this, your service worker wont be registered, and of course wont work.

Note: A service worker only caches a response for a given url.

Bearing this in mind, our service worker should be on our public folder not in our views folder, so that it can be easily registered on your JavaScript file which is on the same public folder, and when caching, you should cache all static files in your public folder, and as for your view files, only cache the customized routes that is rendering your views files. Example

As you can see from the above example, I cached the routes that is rendering the files in my views folder and as well cached all the static files in my public folder.

I hope this helps.