Workbox Service Worker mit Hintergrundsynchronisierungsmodul

Question

Ich habe Workbox seit ein paar Tagen verwendet und ich habe es korrekt eingerichtet, um einen Service Worker aus einer Quelle zu generieren, und lasse Workbox es nicht für mich generieren.

Es funktioniert ok, aber jetzt versuche ich die Workbox-Hintergrund-Sync-Modul für die Speicherung von einigen fehlgeschlagenen POST-Anfragen und ich kann es nicht funktionieren. Nach dem Ausführen der SW, bekomme ich "Uncaught TypeError: Kann die Eigenschaft 'QueuePlugin' von undefined" auf der ersten backgroundSync-Zeile (Zeilennummer 9) nicht lesen. Dies ist die erzeugte Serviceworker-Datei:

importScripts('workbox-sw.prod.v2.1.2.js'); 
importScripts('workbox-background-sync.prod.v2.0.3.js'); 

const workbox = new WorkboxSW({ 
    skipWaiting: true, 
    clientsClaim: true 
}) 

let bgQueue = new workbox.backgroundSync.QueuePlugin({ 
    callbacks: { 
    replayDidSucceed: async(hash, res) => { 
    self.registration.showNotification('Background sync demo', { 
    body: 'Product has been purchased.', 
    icon: '/images/shop-icon-384.png', 
    }); 
}, 
replayDidFail: (hash) => {}, 
requestWillEnqueue: (reqData) => {}, 
requestWillDequeue: (reqData) => {}, 
}, 
}); 

const requestWrapper = new workbox.runtimeCaching.RequestWrapper({ 
    plugins: [bgQueue], 
}); 

const route = new workbox.routing.RegExpRoute({ 
    regExp: new RegExp('^https://jsonplaceholder.typicode.com'), 
    handler: new workbox.runtimeCaching.NetworkOnly({requestWrapper}), 
}); 

const router = new workbox.routing.Router(); 
router.registerRoute({route}); 

workbox.router.registerRoute(
    new RegExp('.*\/api/catalog/available'), 
    workbox.strategies.networkFirst() 
); 

workbox.router.registerRoute(
    new RegExp('.*\/api/user'), 
    workbox.strategies.networkFirst() 
); 

workbox.router.registerRoute(
    new RegExp('.*\/api/security-element'), 
    workbox.strategies.networkOnly() 
); 

workbox.precache([]); 

Ich habe versucht, es mit workbox.loadModule zu laden (‚workbox-Hintergrund-sync‘), dieses Problem zu umgehen i auf Github gefunden habe, aber es funktioniert immer noch nicht. Versuchen Sie auch mit self.workbox = new WorkboxSW(), mit dem gleichen Glauben.

P. S: Gibt es eine Weise, die ich eine Funktion NACH eine Strategie, wie networkFirst ausgefallen Haken und sein Gehen mit Cache reagieren? weil ich wissen will, wenn ich eine zwischengespeicherte Antwort erhalte, möchte ich dem Benutzer sagen, dass durch das Ändern der eingehenden Antwort und handle es später in Vue zum Beispiel. Danke fürs Lesen!

Answer 1

ich es gelöst .. es eigentlich ziemlich dumm war, war ich accesing die const workbox stattdessen ein neues workbox.backgroundSync instanziieren, fest ich es durch einfaches Umbenennen der const workbox-const workboxSW