Offline is only working in development

[liamb0t]

When I run my app with network enabled I can see that workbox has cached the items built by Nuxt successfully.

However, if I disable the network in dev console and check the cache, it is empty.

And I also get a network error for the route I'm trying to open. And the page is offline.

In development though if I disable the network, the page loads fine and the items are still in the cache (although the items are cached in the homepage cache, not workbox-precache).

This is my config. It is the only config I've been able to use that actually somewhat works with offline caching.

  pwa: {
    registerType: 'autoUpdate',
    strategies: 'generateSW',
    injectRegister: 'script',
    manifest: false,
    workbox: {
      navigateFallback: '/',
      globIgnores: ['google*.html'],
      globPatterns: ['**/*.{js,css,html,json,svg,png,webmanifest}'],
      maximumFileSizeToCacheInBytes: 5 * 1024 * 1024, // 5 MB
      navigateFallbackDenylist: [
        /^\/.*\\?giscus=.*/,
        /^\/.*\\?api.*/,
        /^\/privacy.*/
      ],
      runtimeCaching: [
        {
          urlPattern: ({ url }) => url.href.startsWith('https://mysite.directus.app/items/'),
          handler: 'CacheFirst',
          options: {
            cacheName: 'directus-items'
          }
        },
        {
          urlPattern: ({ url, sameOrigin }) => sameOrigin && url.pathname.match(/^\/.*(avatar|favicon|privacy|manifest|).*/i),
          handler: 'CacheFirst' as const,
          options: { cacheName: 'homepage' }
        }, // Every article have to be visited before it is cached
        {
          urlPattern: ({ url, sameOrigin }) => sameOrigin && url.pathname.match(/^\/(api|article)\/.*/i),
          handler: 'CacheFirst' as const,
          options: { cacheName: 'articles' }
        } // when this is cached - the frontpage is working offline
      ]
    },
    devOptions: {
      enabled: true,
      type: 'module',
      navigateFallback: '/',
      navigateFallbackAllowlist: [/^\/$/]
    },
    client: {
      installPrompt: true
    }
  },

[userquin]

dev mode is about checking sw logic will not work when offline (we're caching only the root page): if you enable sw in dev mode will be a pain, use nuxt generate/build and check in your local the offline support

[liamb0t]

dev mode is about checking sw logic will not work when offline (we're caching only the root page): if you enable sw in dev mode will be a pain, use nuxt generate/build and check in your local the offline support

So you suggest I set devOptions enabled: false and then test it?

If I do that and do bun run build then bun run dev, and look in the dev console, there is no sw, even when network is enabled?

[userquin]

You need to run npx serve ... or node ..., check nuxt hint once generate/build script finish.

You are running the build command and then start the dev server again, you need to run app built for production (static or ssr app).