백그라운드 동기화 모듈이 포함 된 Workbox Service Worker

Question

며칠 동안 Workbox를 사용하고 있었고 소스에서 서비스 작업자를 생성하기 위해 올바르게 설정했으며 Workbox에서 생성하도록하지 않았습니다.

괜찮 았지만 지금은 일부 실패한 POST 요청을 저장하기위한 workbox-background-sync 모듈을 포함하려고합니다. 제대로 작동하지 않습니다. SW를 실행 한 후 "잡히지 않음 TypeError : 첫 번째 backgroundSync 행 (행 번호 9)에서 'QueuePlugin'이 정의되지 않은 '속성을 읽을 수 없습니다. 이렇게 생성 된 ServiceWorker 파일입니다

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([]); 

내가 workbox.loadModule ('연장 상자 - 배경 동기화'), 내가 GitHub의에서 발견 한 해결 방법으로로드하려고했지만, 여전히 작동하지 않습니다. 또한 같은 믿음으로 self.workbox = new WorkboxSW()으로 시도하십시오.

P.S : networkFirst 같은 전략에 오류가 난 함수 AFTER 를 연결할 수있는 방법이 있나요 및 캐시로 응답 것? 왜냐하면 내가 알고 싶어, 메신저 캐시 된 응답을 나는 사용자에게 들어오는 응답을 수정하여 나중에 예를 들어 Vue에서 그것을 처리하고 싶습니다. 읽어 주셔서 감사합니다!

Answer 1

나는 내가 const workbox을 accesing 대신 새로운 workbox.backgroundSync을 인스턴스화하고, 그 .. 실제로 꽤 바보였다 해결, 나는 단순히 const workbox