如何使用工作箱對發佈請求進行排隊？

用我的服務人員以下JS從workboxjs sample對我的測試：如何使用工作箱對發佈請求進行排隊？

importScripts('https://unpkg.com/[email protected]/build/importScripts/workbox-sw.dev.v0.0.2.js');

我想嘗試如何用針線-SW排隊在離線模式下的post請求，所以一旦網絡可用它處理來自隊列的請求！

問題1： 我想我需要導入額外的庫，如下所示在github issue #634

如何在瀏覽器中使用的進口定義方法後我的路線？我嘗試使用importScripts，但它不起作用。

import * as worker from 'workbox-sw'; 
import 'workbox-routing';

Q 2： 我需要爲後臺同步的附加的庫，所以方法後排隊？

來源

2017-08-10 seUser

我建議使用它作爲更大的workbox-sw框架的一部分，作爲插件。以下是示例代碼的一個版本，修改爲使用importScripts()從CDN中提取工作箱代碼。或者，您可以使用ES2015模塊語法，然後使用捆綁軟件（如Rollup或Webpack）將本地node_modules中的相關代碼包含到最終服務工作者文件中，而不是使用CDN上的預打包捆綁軟件。

importScripts('https://unpkg.com/[email protected]'); 
importScripts('https://unpkg.com/[email protected]'); 
importScripts('https://unpkg.com/[email protected]'); 

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});

來源

2017-08-11 14:36:51

如何使用工作箱對發佈請求進行排隊？

回答

相關問題