title: Progressive Web App: offline cache does not work on mobile
body: <p>I have a simple PWA that works fine online. I have also tested the offline behavior in Chrome Dev Tools, and the service worker is doing its job perfectly. But when I run the app from my Android phone or ios mobiles, only welcome page work offline perfectly but when we redirect in second page it doesn't work offline as the Cache Storage.
  my first page code written in html5,css and js and other page code written in jsp,css and js.</p>
  
  <p>This is the service worker:</p>
  
  <pre><code>    var staticCache = 'v0.002';
  var files = [
    '/',
      './index.html',
      './index.html?homescreen=1',
      './?homescreen=1',
      '../home.jsp',
      './user/test/SecondPage.jsp',
      './user/test/ThirdPage.jsp',
      './user/test/menu.jsp',
      './user/test/FourthPage.jsp',
      './user/test/FifthPage.jsp',
      './manifest.json'
  ];
  
  
  // Install
  self.addEventListener('install', e =&gt; {
      self.skipWaiting();
      e.waitUntil(
          caches.open(staticCache).then(cache =&gt; {
              return cache
                  .addAll(files)
                  .then(() =&gt; console.log('App Version: ' + staticCache))
                  .catch(err =&gt; console.error('Error adding files to cache', err));
          }),
      );
  });
  
  // Activate
  self.addEventListener('activate', e =&gt; {
      e.waitUntil(
          caches.keys().then(cacheNames =&gt; {
              return Promise.all(
                  cacheNames.map(cache =&gt; {
                      if (cache !== staticCache) {
                          console.info('Deleting Old Cache', cache);
                          return caches.delete(cache);
                      }
                  }),
              );
          }),
      );
      return self.clients.claim();
  });
  self.addEventListener('fetch', function(event) {
       console.log(event.request.url);
  
       event.respondWith(
         caches.match(event.request).then(function(response) {
           return response || fetch(event.request);
         })
       );
      });
  async function cacheFirst(req) {
      let cacheRes = await caches.match(req);
      return cacheRes || fetch(req);
  }
  
  async function networkFirst(req) {
      const dynamicCache = await caches.open('dynamic');
      try {
          const networkResponse = await fetch(req);
          if (req.method !== 'POST') dynamicCache.put(req, networkResponse.clone());
          return networkResponse;
      } catch (err) {
          const cacheResponse = await caches.match(req);
          return cacheResponse;
      }
  }
  </code></pre>
  
  <p>When testing the app on its url from Chrome Dev tools, it responds also offline. But as it was not working on the phone.</p>
  
  <p>This is my first page its working fine as a offline.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;meta charset="UTF-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
          &lt;meta name="description" content="test" /&gt;
          &lt;meta name="theme-color" content="#44A752" /&gt;
          &lt;meta name="msapplication-TileColor" content="#44A752" /&gt;
          &lt;meta name="msapplication-TileImage" content="./images/logo.png" /&gt;
          &lt;meta name="mobile-web-app-capable" content="yes" /&gt;
          &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
          &lt;meta
              name="apple-mobile-web-app-status-bar-style"
              content="black-translucent"
          /&gt;
          &lt;meta name="apple-mobile-web-app-title" content="test" /&gt;
          &lt;meta name="application-name" content="test" /&gt;
      &lt;title&gt;test pwa&lt;/title&gt;
      &lt;link rel="manifest" href="manifest.json" /&gt;
      &lt;link rel="stylesheet" href="css/bootstrap/main.css" /&gt;
   &lt;script src="js/bootstrap/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
  
    &lt;script&gt;
    if ('serviceWorker' in navigator) {
          // we are checking here to see if the browser supports the service worker api
   navigator.serviceWorker.register('./sw.js').then(function(registration) {
                        // sometime later…
                        registration.update();
                        registration.addEventListener('updatefound', function() {
                            var installingWorker = registration.installing;
                            console.log('A new service worker is being installed:',
                              installingWorker);    
                        });
                 // Registration was successful
                 console.log('Service Worker registration was successful with scope: ', registration.scope);
               }, function(err) {
               console.log('ServiceWorker registration failed: ', err);
               });
  
            if (navigator.onLine)
              {
              // alert('online');
              } else {
                      alert('You have lost internet access!');
                      }
  
            window.addEventListener('online',function()  {
                alert("You're now back online! ");
              });
  
              window.addEventListener('offline', function() {
                  alert("You're offline! ");
              });
  
       }
  
  
  &lt;/script&gt;
          &lt;!-- Wrapper --&gt;
              &lt;div id="wrapper" class="divided"&gt;
  
                  &lt;!-- One --&gt;
                      &lt;section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right"&gt;
  
                          &lt;div class="content" style="background-color: #E0FFFF; border: 1px solid black;"&gt;
                          &lt;img class="img-responsive" alt="" src="images/logo.png"&gt;
                              &lt;h1&gt;test&lt;/h1&gt;
  
                              &lt;form action="home.jsp" method="post" onsubmit="return validateForm();"&gt;
                               &lt;input class="button big wide smooth-scroll-middle" value="Login" type="submit"&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
  
                          &lt;div class="image"&gt;
                              &lt;img src="img\slides\flexslider/first.jpg" alt="" /&gt;
                          &lt;/div&gt;
  
                      &lt;/section&gt;
  &lt;/div&gt;
              &lt;script src="js/bootstrap/jquery.min.js"&gt;&lt;/script&gt;
              &lt;script src="js/bootstrap/jquery.scrollex.min.js"&gt;&lt;/script&gt;
              &lt;script src="js/bootstrap/jquery.scrolly.min.js"&gt;&lt;/script&gt;
              &lt;script src="js/bootstrap/breakpoints.min.js"&gt;&lt;/script&gt;
              &lt;script src="js/bootstrap/util.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It is working fine from the desktop browser. The offline problem appears only when running from the mobile as a PWA or running mobile browser.</p>
  
  <p>Screen Shot of second page in offline mode.....</p>
  
  <p><a href="https://i.stack.imgur.com/GpO34.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GpO34.png" alt="enter image description here"></a></p>