Can a templating engine such as EJS be used in a PWA? - ejs

Question

I am learning about writing Progressive Web Apps and all of the examples use html files. I'd prefer to use EJS with a node server. Is it possible to cache the ejs so it can be used locally?

Answer 1

Short answer: Yes.
A service worker is going to cache a response for a given URL, so it is irrelevant of whether you will be using EJS or any other templating engine.
Of course, you need to see whether you would use the service worker to cache the template file (ex: templates/mytemplate.ejs) or the rendered HTML. If you cache the output HTML, then it will be returned from the cache and not rendered dynamically from the template on successive requests..

Answer 2

This may help you
Service-worker.js
const cacheName = 'pwa-demo-v1';
const filesToCache = [
'/',
'/index.ejs',
'/partials/header.ejs',
'/partials/footer.ejs',
'/css/style.css',
'/js/app.js',
'/js/menu.js',
'/images/refresh.svg',
'/images/pwa.png'
]
// Install Service Worker
self.addEventListener('install', function(event){
console.log('Service Worker: Installing....');
event.waitUntil(
// Open the Cache
caches.open(cacheName).then(function(cache) {
console.log('Service Worker: Caching App Shell at the moment......');
// Add Files to the Cache
return cache.addAll(filesToCache);
})
);
})
// Fired when the Service Worker starts up
self.addEventListener('activate', function(event) {
console.log('Service Worker: Activating....');
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(cacheNames.map(function(key) {
if( key !== cacheName) {
console.log('Service Worker: Removing Old Cache', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});
self.clients.claim()
self.addEventListener('fetch', function(event) {
console.log('Service Worker: Fetch', event.request.url);
console.log("Url", event.request.url);
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
manifest.json file:
{
"name": "Progressive Web App - Demo",
"short_name": "PWADemo",
"description": "Progressive Web Apps - demo application",
"start_url": "/",
"display": "standalone",
"background_color": "#4c4849",
"theme_color": "#4c4849",
"icons": [
{
"src": "/images/192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/168x168.png",
"type": "image/png",
"sizes": "168x168"
},
{
"src": "/images/144x144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/images/96x96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/images/72x72.png",
"type": "image/png",
"sizes": "72x72"
},
{
"src": "/images/48x48.png",
"type": "image/png",
"sizes": "48x48"
}
],
"gcm_sender_id": "1001123745362"
}
for more details please check my repository - https://github.com/deepakgd/PWA-Demo

Answer 3

I think the service worker only caches the files within its scope
- It only has access to the files on its folder or “below”. Your service worker should be in your public folder not in your views folder. And when caching, you should cache all static files in your folder, then cache the url path that is rendering your views files.
Example.. '/about',
'/404',
'/admin/signup',
'/admin/signin',
That's all. I hope it helps.