Service Worker Rendering - Fetch Event

sw.fetch.js

self.addEventListener('fetch', function(event) {

  var requestURL = new URL(event.request.url);

  if (/^\/post\//.test(requestURL.pathname)) {
    event.respondWith(
      Promise.all([
        caches.match('/post/', {ignoreSearch: true}).then(function(response) {
          return response.text();
        }),
        caches.match('https://jsonplaceholder.typicode.com/posts').then(function(response) {
          return response.json();
        })
      ]).then(function(responses) {
        var html = responses[0];
        var data = responses[1];
        var postData = data.find(x => x.id == requestURL.searchParams.get("id"));
        var template = Handlebars.templates.post;
        var postHtml = template(postData);
        var finalHtml = html.replace('<div id="output"></div>', postHtml);
        return new Response(finalHtml, {headers: {'content-type': 'text/html'}});
      })
    )
  } else {
    // Other caching strategies
  }

});