Serviceworker `onupdatefound` nicht ausgelöst auf mobilen

Question

Bellow ist, wie ich meine Serviceworker registrieren:

if ('serviceWorker' in navigator) { 
    window.addEventListener('load',() => { 
    function updateOnlineStatus() { 
     SnackBar.show({ 
     text: navigator.onLine ? onlineMsg : offlineMsg, 
     backgroundColor: '#000000', 
     actionText: close, 
     actionTextColor: '#d2de2f', 
     customClass: 'custom-snackbar', 
     }); 
    } 
    window.addEventListener('online', updateOnlineStatus); 
    window.addEventListener('offline', updateOnlineStatus); 
    navigator.serviceWorker.register('sw.js').then((reg) => { 
     reg.onupdatefound =() => { 
     const installingWorker = reg.installing; 
     installingWorker.onstatechange =() => { 
      switch (installingWorker.state) { 
      case 'installed': 
       if (navigator.serviceWorker.controller) { 
       SnackBar.show({ 
        text: refreshMsg, 
        backgroundColor: '#000000', 
        actionText: refresh, 
        actionTextColor: '#d2de2f', 
        onActionClick:() => { location.reload(); }, 
        customClass: 'custom-snackbar', 
       }); 
       } else { 
       console.info(availableMsg); 
       } 
       break; 
      case 'redundant': 
       console.info(redundantMsg); 
       break; 
      default: 
       break; 
      } 
     }; 
     }; 
    }).catch((e) => { 
     console.error(errorMsg, e); 
    }); 
    }); 
} 

Diese Serviceworker wird durch Workbox während Build erzeugt.

ich ein wenig besorgt bin, weil diese Benachrichtigungen auf meinem Computer (ubuntu + chrome 59.0.3071.115) jedoch nie auf meinem Handy (android 6.0.1 + chrome 59.0.3071.125)

Nach der Analyse mit Remote-Debugging-Funktion angezeigt werden, sieht es aus wie onupdatefound nie ist ausgelöst auf meinem Handy.

Ich fühle mich sehr schlecht über UX, über die Besucher auf mobilen denken, die nicht, dass eine neue Version der Website wissen würde aussteht ...

vorschläge oder Beratung wird

---

geschätzt werden Edit 1: Ich habe weitere Details zum Abschnitt "Browser-Kompatibilität" auf dieser Webseite gefunden: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/onupdatefound. Es scheint, dass die Unterstützung dieser Funktion von Chrome für Android nicht bekannt ist.

Haben Sie eine Art Fallback/Workaround, wenn der Browser onupdatefound Event nicht unterstützt?

---

Edit 2: Als Antwort auf Jeff,
sw.js Header wird in .htaccess Datei verwaltet:

<Files sw.js> 
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate" 
    Header set Pragma "no-cache" 
    Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT" 
</Files> 

, die produziert:

accept-ranges: bytes 
cache-control: max-age=0, no-cache, no-store, must-revalidate 
content-encoding: br 
content-language: fr-FR 
content-length: 1636 
content-type: application/javascript; charset=utf-8 
date: Fri, 21 Jul 2017 13:04:06 GMT 
expires: Wed, 11 Jan 1984 05:00:00 GMT 
last-modified: Tue, 18 Jul 2017 02:58:30 GMT 
pragma: no-cache 

In Bezug auf workbox Feinabstimmung Sie vorschlagen, ich habe noch keine Zeit gefunden, um zu graben, also benutze ich den einfachen workbox-build in einer Schluckdatei. Aber ich werde hoffentlich :)

// Service Worker generation 
gulp.task('bundle-sw', gulp.series('generate-sitemap',() => { 
    return wbBuild.generateSW({ 
    globDirectory: gulpOutputDir, 
    swDest: `${gulpOutputDir}/sw.js`, 
    globPatterns: ['**/*.{html,png,xml,css,ico,txt,json,svg,js,map,gif,jpeg,jpg,bmp,cur,webp,woff2}'], 
    skipWaiting: true, 
    clientsClaim: true, 
    }) 
    .then(() => { 
    console.warn('Service worker generated.'); 
    }) 
    .catch((err) => { 
    console.error(`[ERROR] This happened: ${err}`); 
    }); 
})); 

Glauben Sie, es durch skipWaiting: true verursacht werden könnten?

---

bearbeiten 3: mit BroadcastChannel

navigator.serviceWorker.register('/sw.js').then((reg) => { 
    console.log('test'); 
    const updateChannel = new BroadcastChannel('precache-updates'); 
    updateChannel.addEventListener('message', event => { 
    console.log(`Cache updated: ${event.data.payload.updatedUrl}`); 
    }); 
}).catch((e) => { 
    console.error(errorMsg, e); 
}); 

Versuch

Auch wenn test in Protokoll auf Chrome, mobile outputed ist, oder firefox, Nachrichten aktualisieren werden auf Chrome

nur geworfen

Answer 1

sollte es nicht Unterschiede in der Implementierung von Service-Mitarbeitern in Chrome unter Android und Linux, die für eine Plattform verantwortlich sind, bei der das Ereignis updatefound bei einer Service-Mitarbeiter-Registrierung nicht angezeigt wird. (MDN ist hier nicht unbedingt autorisierend.)

Immer, wenn ich diese Art von unvorhersehbaren Updates in der Vergangenheit debuggte, ist dies auf Interaktionen mit dem HTTP-Cache und dem sw.js Skript zurückzuführen. Können Sie überprüfen, welche Cache-Control Header Sie verwenden, wenn Sie sw.js bedienen?

Sie erwähnen auch, dass Sie Workbox verwenden. Sie haben Zugriff auf eine erweiterte Methode zum Suchen nach aktualisierten Ressourcen, wenn dies der Fall ist. Das workbox-broadcast-cache-update-Plug-in (standardmäßig aktiviert, wenn Sie die workbox-sw-Methode precache() verwenden) kann ankündigen, wann eine bestimmte zwischengespeicherte Ressource aktualisiert wird, und Sie können dann mithilfe der Broadcast-Channel-API auf diese Nachricht auf Ihrer Seite warten. Auf diese Weise können Sie Ihre SnackBar nur dann anzeigen, wenn sich die wichtigsten Ressourcen ändern, z. B. die HTML-Ressourcen und nicht weniger wichtige Ressourcen wie zufällige Bilder, die möglicherweise vorgeladen wurden.

Answer 2

Wie Sie vermutet haben, kam das Problem vom Service Worker allein nicht.

Ich habe von Null angefangen und versucht, den Ursprung dieses Problems zu identifizieren, Code Stück für Stück hinzufügen, bis kein Ereignis mehr ausgesetzt ist. Ich fand es heraus: Es war wegen einer "teuren" Schleife, die in einer three.js Animation verwendet wurde.

Nachdem ich diesen Code in einen Worker gesteckt habe, kann meine Seite nun diese Ereignisse auf Mobilgeräten oder in Firefox abfangen, und die Benachrichtigung der Nutzer funktioniert einwandfrei!

über die verwirrende Tatsache, dass es auf Desktop-Version von Chrome arbeitet, ich denke, es ist, weil es Multithreading unterstützen muß ...

Nochmals vielen Dank für Ihre Hilfe :)