title: service worker app-shell PHP implementation
body: <p>I'm introducing service worker on my site.And i'm using app-shell approach for responding to requests.Below is my code structure.</p>
  
  <p>serviceWorker.js</p>
  
  <pre><code>self.addEventListener("fetch", function(event) {
    if (requestUri.indexOf('-spid-') !== -1) {
      reponsePdPage(event,requestUri);
    }else{
      event.respondWith(fetch(requestUri,{mode: 'no-cors'}).catch(function (error){
          console.log("error in fetching =&gt; "+error);
          return new Response("not found");
          }) 
      );
    }
  });
  
  
  function reponsePdPage(event,requestUri){
     var appShellResponse=appShellPro();
     event.respondWith(appShellResponse);  //responds with app-shell
     event.waitUntil(
        apiResponse(requestUri)       //responds with dynamic content
     );
  }
  
  function appShellPro(){
     return fetch(app-shell.html);
  }
  function apiResponse(requestUri){
     var message=['price':'12.45cr'];
     self.clients.matchAll().then(function(clients){
      clients.forEach(function (client) {
          if(client.url == requestUri)
              client.postMessage(JSON.stringify(message));
      });
     });
  }
  </code></pre>
  
  <p>App-shell.html</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script&gt;
              if ('serviceWorker' in navigator) {
                navigator.serviceWorker.onmessage = function (evt) {
                  var message = JSON.parse(evt.data);
                  document.getElementById('price').innerHTML=message['price'];
                }
              }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="price"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>serviceWorker.js</strong> is my only service worker file. whenever i'm getting request of -spid- in url i calls <strong>reponsePdPage</strong> function.In reponsePdPage function i'm first responding with <strong>app-shell.html</strong>. after that i'm calling <strong>apiResponse</strong> function which calls postmessage and send the dynamic data.The <strong>listener</strong> of <strong>post message</strong> is written in <strong>app-shell.html</strong>.</p>
  
  <p>The issue i'm facing is, sometimes post message gets called before the listener registration.It means the <strong>apiResponse</strong> calls post message but their is not register listener to that event. So i cant capture the data.?Is their something wrong in my implementation.</p>