獲取緩存數據Vue CLI Vuex PWA

Question

如何在脫機模式下將服務工作者的緩存數據傳入vuex存儲？

該應用程序在瀏覽器中以脫機模式運行，但是當我將該站點添加到包含manifest.json文件的主屏幕時，它將不顯示緩存數據，只顯示常規js，css和html。

我很難搞清楚，如何從PWA獲取緩存數據。 我已經緩存了數據。 問題是將其檢索回稱為“游戲”的vuex商店狀態，以便在應用程序離線時顯示。

vue.config.js代碼，用於緩存服務工作者的api調用。

 module.exports = { pwa: { workboxPluginMode: "GenerateSW", workboxOptions: { navigateFallback: "/index.html", runtimeCaching: [{ urlPattern: new RegExp('API_URL'), handler: 'networkFirst', options: { networkTimeoutSeconds: 20, cacheName: 'api-cache', cacheableResponse: { statuses: [0, 200], }, }, }] } } }; 

正如您在代碼上方的圖像中所看到的，它已經使用API​​中的對象存儲了緩存“api-cache”。

現在，當站點離線時，我希望在我的站點上的api-cache中使用此數據。

所以我的問題是：當用戶將應用程序添加到主屏幕時，如何將我的緩存數據從服務工作者轉移到離線模式的vuex商店？

Answer 1

你是以錯誤的方式思考這個問題。 您不需要服務工作人員為您做任何事情。 它已經通過為您提供緩存實現來實現。 相反，您需要使用navigator.onLine掛鈎來確定它們是否具有Internet訪問權限。 如果沒有，那么從緩存中保存你的商店，並確保訂閱任何突變並將狀態推回緩存，如下所示：

if (!navigator.onLine) {
    const state = hydrateFromCache()

    store.subscribe((mutation, state) => cache.setItems(state)
}

其中hydrateFromCache方法只是從緩存中提取存儲並保持所有vuex模塊的狀態。