Nuxt•8mo ago

Service worker loaded by PWA causing constant reload

I have a service worker loaded by the @vite-pwa/nuxt plugin config in nuxt.config.ts which handles push notifications as well as offline install. This all works initially, but once loaded if I reset notification sin the browser this sometimes cause some issue where the site constantly reloads. Initially it says

workbox-b5f7729d.js:61 workbox Precaching 1 file.

workbox-b5f7729d.js:61 workbox Precaching 1 file.

But then when resetting notifications, in the console it says this and triggers a constant reload situation

workbox-b5f7729d.js:61 workbox Precaching 0 files. 1 file is already cached.

workbox-b5f7729d.js:61 workbox Precaching 0 files. 1 file is already cached.

Eventually it does seem to resolve itself (stop reloading) but is there a way I can stop it having to refresh so much - if the file is already cached, proceed rather than reload The config is

  pwa: {
...
    workbox: {
      navigateFallback: "/",
      importScripts: ['/offline-sw.js'],
    },
    devOptions: {
      enabled: true,
      type: "module",
    },
  },

  pwa: {
...
    workbox: {
      navigateFallback: "/",
      importScripts: ['/offline-sw.js'],
    },
    devOptions: {
      enabled: true,
      type: "module",
    },
  },

22 Replies

TincanOP•8mo ago

Could it be because part of the service worker is doing this? https://web.dev/articles/offline-fallback-page and the other part is managing push notifications

web.dev

Create an offline fallback page | Articles | web.dev

Learn how to create a simple offline experience for your app.

Joaquín•8mo ago

just remove that import script, the offline page will be the navigateFallback, just prerender it or use a custom page (don't forget to prerender it)

TincanOP•8mo ago

how will the service worker be loaded in a PWA then? above issue seems to have resolved itself, but SW doesn't seem to be working on live deployment

TincanOP•8mo ago

it appears its hloaded though

Joaquín•8mo ago

your sw loading itself via importScript check sw.js in source tab

Joaquín•8mo ago

you need to prerender / route or add a custom page and prerender it you can use empty / route with a middleware to redirect to login when required, otherwise redirect to the "home" page check elk.zone github repo

TincanOP•8mo ago

but arent you suggesting to remove the importScript line? also the SW is handling push notifications not just offline mode

Joaquín•8mo ago

use custom sw

TincanOP•8mo ago

use what now? its possible the SW is loading fine but itsn't delivering push notifications for another reason

Joaquín•8mo ago

use injectManifest strategy and configure your options via workbox modules

TincanOP•8mo ago

(i appreciate my issue here has changed since yesterday)

Joaquín•8mo ago

check service-worker folder in elk.zone, exclude that folder from nuxt ts, check typescript entry in nuxt config file and the typecheck script in package.json (if you are running some typechecking in your project) the configuration can be found in config/pwa.ts module and modules/pwa/i18n.ts (if you don't need i18n/theme-color in the webmanifest just use pwa option in your nuxt config file) importScripts should be used only in the service worker file, no idea if using in generateSW works (via workbox-build node module): it seems workbox-build doing weird things with your sw

TincanOP•8mo ago

@Joaquín inject manifest should look like this?

  pwa: {
    strategies: 'injectManifest',

  pwa: {
    strategies: 'injectManifest',

TincanOP•8mo ago

mentioned in this which seems appropriate to the packages im using https://stackoverflow.com/questions/76190074/how-to-add-custom-service-worker-to-nuxt-3-with-vite-pwa

Stack Overflow

How to add custom service worker to Nuxt 3 with vite-pwa?

I am trying to glue together a Nuxt 3 PWA with vite-plugin-pwa, more specifically @vite-pwa/nuxt. I installed the module and set up basic configuration (I basically followed this video) What I want...

Joaquín•8mo ago

yes, add also srcDir and filename: https://github.com/elk-zone/elk/blob/main/config/pwa.ts#L9-L11 move workbox options to injectManifest entry, you should remove some entries like cleanupOutdated and client claims use https://github.com/elk-zone/elk/blob/main/service-worker/sw.ts#L3 for cleanupOutdated for claims add this logic

TincanOP•8mo ago

  pwa: {
    strategies: 'injectManifest',
    registerType: 'autoUpdate',
      manifest: {
      name: "XXXX PWA App",
      short_name: "XXXXPwaApp",
      description: "X PWA App description",
      theme_color: "#085781",
      background_color: "#085781",
      icons: [
        {
          src: "img/prototype/maskable_icon_x192.png",
          sizes: "192x192",
          type: "image/png",
          "purpose": "maskable any"
        },
        {
          src: "img/prototype/apple-icon-x192.png",
          sizes: "192x192",
          type: "image/png",
          "purpose": "maskable any"
        },
        {
          src: "img/prototype/maskable_icon_x512.png",
          sizes: "512x512",
          type: "image/png",
          "purpose": "maskable any"
        },
      ],
    },
    workbox: {
      navigateFallback: undefined,
      // importScripts: ['./sw.js'],
    },
    client: {
      installPrompt: true,
    },
    devOptions: {
      enabled: true,
      type: "module",
    },
  },

  pwa: {
    strategies: 'injectManifest',
    registerType: 'autoUpdate',
      manifest: {
      name: "XXXX PWA App",
      short_name: "XXXXPwaApp",
      description: "X PWA App description",
      theme_color: "#085781",
      background_color: "#085781",
      icons: [
        {
          src: "img/prototype/maskable_icon_x192.png",
          sizes: "192x192",
          type: "image/png",
          "purpose": "maskable any"
        },
        {
          src: "img/prototype/apple-icon-x192.png",
          sizes: "192x192",
          type: "image/png",
          "purpose": "maskable any"
        },
        {
          src: "img/prototype/maskable_icon_x512.png",
          sizes: "512x512",
          type: "image/png",
          "purpose": "maskable any"
        },
      ],
    },
    workbox: {
      navigateFallback: undefined,
      // importScripts: ['./sw.js'],
    },
    client: {
      installPrompt: true,
    },
    devOptions: {
      enabled: true,
      type: "module",
    },
  },

this is where the config is at at the moment

Joaquín•8mo ago

self.skipWaiting()
clientsClaim()

self.skipWaiting()
clientsClaim()

import { clientsClaim } from 'workbox-core' add both lines at the end, before adding push notification listener change workbox: with injectManifest: or remove the entry navigateFallback should be configured in the sw you can use the workbox recipe if you want

Joaquín•8mo ago

https://web.dev/articles/offline-fallback-page

web.dev

Create an offline fallback page | Articles | web.dev

Learn how to create a simple offline experience for your app.

Joaquín•8mo ago

https://developer.chrome.com/docs/workbox/modules/workbox-recipes

Chrome for Developers

workbox-recipes | Modules | Chrome for Developers

Easily use common workbox patterns without needing to set them up yourself from individual packages.

Joaquín•8mo ago

there is a recipe for offline you can use recipes or just workbox modules the recipes will use modules don't use maskable any in pwa icons' purpose if you've a favicon.svg or logo.svg check pwa assets generator to generate the pwa icons: https://vite-pwa-org.netlify.app/assets-generator/cli.html https://vite-pwa-org.netlify.app/assets-generator/#preset-minimal-2023 or you can generate pwa icons on the fly with just a single icon: https://vite-pwa-org.netlify.app/assets-generator/integrations.html and https://vite-pwa-org.netlify.app/frameworks/nuxt.html#pwa-assets here an example: https://github.com/vite-pwa/nuxt/tree/main/playground-assets check also the Elk docs: https://docs.elk.zone/pwa there are some hints to test push notifications in dev onn real device (android and chromium based browsers only)

TincanOP•8mo ago

Ok theres a lot there to pick through (lots that I don't necessarily understand), but it appears to now be working. I think a combination of following this https://stackoverflow.com/questions/76190074/how-to-add-custom-service-worker-to-nuxt-3-with-vite-pwa and removing the importScripts line (possibly it was double loading and causing some sort of conflict. Thanks so much for helping me work through the problem and I'll pick through the feedback above too

Stack Overflow

How to add custom service worker to Nuxt 3 with vite-pwa?

Gaming

Programming

Service worker loaded by PWA causing constant reload