kostenloser Webspace werbefrei: lima-city

JS serviceWorker blockiert

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   mehralsnurradio

   mehralsnurradio hat kostenlosen Webspace.

   22:38, 11.1.2021

   Ich habe per Tutorial einen serviceWorker erstellt um eine Offline-Seite für meine Seite zu erstellen.
   Das funktioniert auch, allerdings wird solange ich ihn über meine index.php (siehe unten, erforderlich) eingebunden habe, jeglicher POST-Input blockiert (von index.php auf andere Seiten). Da es ein Tutorial war und ich mich da nicht so auskenne weiß ich nicht wo der Fehler liegt:
   
   Einbindung im manifest.json:
   

   "serviceworker": {
     "src": "/service-worker.js",
     "type": "",
     "update_via_cache": "none"
    }

   
   Einbindung im index.php:
   

   <script>
   if ('serviceWorker' in navigator) {
   	navigator.serviceWorker.register('service-worker.js').then(function(registration) {
       console.log('ServiceWorker registration successful with scope: ', registration.scope);
   }).catch(function(err) {
       	console.log('ServiceWorker registration failed: ', err);
       });
   }
   </script>

   
   service-worker.js:
   

   'use strict';
   
   var cacheVersion = 1;
   var currentCache = {
     offline: 'offline-cache' + cacheVersion
   };
   const offlineUrl = 'offline.html';
   
   this.addEventListener('install', event => {
     event.waitUntil(
       caches.open(currentCache.offline).then(function(cache) {
         return cache.addAll([
             './assets/css/offline.css',
             './assets/imgassets/wlan.png',
             offlineUrl
         ]);
       })
     );
   });
   
   
   
   this.addEventListener('fetch', event => {
     // request.mode = navigate isn't supported in all browsers
     // so include a check for Accept: text/html header.
     if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
           event.respondWith(
             fetch(event.request.url).catch(error => {
                 // Return the offline page
                 return caches.match(offlineUrl);
             })
       );
     }
     else{
           // Respond with everything else if we can
           event.respondWith(caches.match(event.request)
                           .then(function (response) {
                           return response || fetch(event.request);
                       })
               );
         }
   });

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?