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

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