Closed felek000 closed 1 year ago
Hi @felek000
Are you talking about warnings when running workbow.enabled
in development mode ? Or do you want an option to disable any console messages the module outputs ?
About Workbox hooks, for now you're required to use a custom worker template based on something similar to https://github.com/kevinmarrec/nuxt-pwa-module/blob/main/templates/workbox/sw.js
Also is there is available some hooks for workobox like: updated,register ? Or i have to build file for my own in that case ? any example ?
Also see https://github.com/kevinmarrec/nuxt-pwa-module/issues/58#issuecomment-1357561457
I end on write custom sw. Ony think i woul like to know is how to notify user that new content is available or its updated. For now this is for cache resource.
importScripts('<%= options.workboxUrl %>')
self.__WB_DISABLE_DEV_LOGS = true
self.addEventListener('install', () => self.skipWaiting())
self.addEventListener('activate', () => {})
const { registerRoute } = workbox.routing
const { NetworkFirst, StaleWhileRevalidate, CacheFirst } = workbox.strategies
const { CacheableResponsePlugin } = workbox.cacheableResponse
const { ExpirationPlugin } = workbox.expiration
// Cache page navigations (html) with a Network First strategy
registerRoute(
({ request }) => {
return request.mode === 'navigate'
},
new NetworkFirst({
cacheName: 'pages',
plugins: [
new CacheableResponsePlugin({ statuses: [200] }),
],
}),
)
// Cache Web Manifest, CSS, JS, and Web Worker requests with a Stale While Revalidate strategy
registerRoute(
({ request }) =>
request.destination === 'manifest' ||
request.destination === 'style' ||
request.destination === 'script' ||
request.destination === 'worker',
new StaleWhileRevalidate({
cacheName: 'assets',
plugins: [
new CacheableResponsePlugin({ statuses: [200] }),
],
}),
)
// Cache images with a Cache First strategy
registerRoute(
({ request }) => request.destination === 'image',
new CacheFirst({
cacheName: 'images',
plugins: [
new CacheableResponsePlugin({ statuses: [200] }),
// 50 entries max, 30 days max
new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 60 * 60 * 24 * 30 }),
],
}),
)
@felek000 I think the answer should be found in Workbox documentation.
I think it is through installed
event, something like this :
self.addEventListener('installed', event => {
if (event.isUpdate) {
console.log('New content is available !')
}
})
Hello, I use standard config:
pwa: { workbox: { enabled: true } }