Carried out a service employee the place I would like a lot of the internet app being accessible offline. It really works effective on iOS PWA, Android/Home windows Chrome and internet pages are accessible whereas service employee is being put in within the background(register, set up, activate,and so on). Nevertheless it breaks on iOS Safari/Chrome. No errors in console or community request to debug, simply the web page request getting stalled untill occasion is completed. I’ve tried the technique of community first then cache however that did not work both.
Beneath is the move of the app:

  1. On person login, I’m registering my service employee:

                                 const registerServiceWorker = async () => {
                             if ('serviceWorker' in navigator) {
                                 strive {
                                     const registration = await navigator.serviceWorker.register('/offlineSW.php');

                                 } catch (error) {
                                     console.error(`Registration failed with ${error}`);
                                 }
                                 navigator.serviceWorker.prepared.then(() => {
                                     console.log("Do one thing right here...");
                                 });

                             } else {
                                 console.log("This browser is just not service employee suitable");
                             }
                         };

                         $("#btnYes").on("click on", operate () {
                             registerServiceWorker();
                         });

  2. OfflineSW.php:

     const staticPaths = [
     "https://stackoverflow.com/",
     '/manifest.php',
     '/css/siteStyles/app/template.min.css',
     .
     .
     .
     30 or so urls here
 ];

 let dynamicPaths = [
     '/offline.html',
     '/index.php',
     '/app/pages/pages.php',
     .
     .
     .
     500 urls here
 ];

 const cacheName="myapp-offline-cache-v3"; 
 const phpSessionCookie = "SID=<?php echo $_ThisCookie["cookieID"] ?>";
 dynamicPaths = dynamicPaths.map(
     url => new Request(url, {
         headers: {
             Cookie: phpSessionCookie
         },
         credentials: 'embody'
     })
 );
 const contentToCache = staticPaths.concat(dynamicPaths);

 //based mostly of https://internet.dev/offline-cookbook/#on-install-not
 self.addEventListener('set up', operate (occasion) {
   occasion.waitUntil(
     caches.open(cacheName).then(operate (cache) {
       cache.addAll(dynamicPaths);

       return cache.addAll(staticPaths).then(operate () {
         console.log("All sources have been cached");
       }).catch((error) => {
         console.log(`Failed as a result of: ${error}`);
       });
     })
   );
 });

 self.addEventListener('activate', occasion => {
     const currentCaches = [cacheName];
     occasion.waitUntil(
       caches.keys().then(cacheNames => {
         return cacheNames.filter(cacheName => !currentCaches.contains(cacheName));
       }).then(cachesToDelete => {
         return Promise.all(cachesToDelete.map(cacheToDelete => {
           return caches.delete(cacheToDelete);
         }));
       }).then(() => self.shoppers.declare())
     );
   });



 self.addEventListener('fetch', operate (occasion) {
   occasion.respondWith(
     caches.match(occasion.request).then(operate (response) ),
   );
 });