kevinmarrec / nuxt-pwa-module

⚠️ DEPRECATED ⚠️ Zero config PWA solution for Nuxt 3
MIT License
339 stars 32 forks source link

disable debug messages #79

Closed felek000 closed 1 year ago

felek000 commented 1 year ago

Hello, I use standard config:

```

pwa: { workbox: { enabled: true } }


How can i enable production mode to disable console messages?
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 ?
kevinmarrec commented 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

kevinmarrec commented 1 year ago

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

felek000 commented 1 year ago

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 }),
    ],
  }),
)
kevinmarrec commented 1 year ago

@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 !')
  }
})