Is it possible to access cached data from a service worker in the vuex store while offline?
My app functions properly in offline mode in the browser, but when added to the home screen with the manifest.json file, it fails to display the cached data and only shows general js, css, and html.
I'm struggling to find a way to retrieve the cached data from my Progressive Web App (PWA). The data is already cached, but I can't seem to get it back into the vuex store state named "games" to show it when the app is offline.
https://i.sstatic.net/yv64x.png
The vue.config.js code snippet for caching the API call for the service worker.
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],
},
},
}]
}
}
};As displayed in the image above, the code has saved the cache "api-cache" containing objects from the API.
Now, I aim to utilize this cached data from api-cache on my site, specifically when the site goes offline.
Thus, my inquiry is as follows: How can I transfer cached data from the service worker to the vuex store while in offline mode, particularly after a user adds the app to their home screen?