The content is not updated for new releases

[jb-thery]

hi,

First thanks for this amazing module !

I have a problem with my PWA https://shirime.one . When I release a new version the content is not updated when the PWA is installed on a device. :(

My config :

pwa: {
    icon: {
      fileName: 'app-icon.png',
    },

    workbox: {
      clientsClaim: false,
    },

    meta: {
      name: 'Shirime',
      description: false,
      lang: false,
      theme_color: '#000000',
      ogHost: 'https://shirime.one',
      twitterCard: 'summary',
      twitterSite: '@jbty_dev',
      twitterCreator: '@jbty_dev',
    },
  },

[pi0]

Hi @jbty. Checking sw.js there seems to be correct revision for /?standalone=true route (you can ensure that this value updates in next deploy). When clientsClaim is false, new service worker (with updated revision) will not be used until installed would you please try without disable it?

[jb-thery]

@pi0 Tanks for your answer ! I try with clientsClaim and I give you a feedback.

[jb-thery]

@pi0 It's work for content update but when I set clientsClam to true I got an error in browser:

The FetchEvent for "https://shirime.one/fr" resulted in a network error response: the promise was rejected.
Uncaught (in promise) no-response: no-response :: [{"url":"https://shirime.one/fr"}]
    at Object.handle (https://cdn.jsdelivr.net/npm/workbox-cdn@5.1.4/workbox/workbox-strategies.prod.js:1:1883)

For reproduce this error, clean cache browser and visit the app :(

[jb-thery]

Here is my nuxt config (I deploy the project with clientClaims):

import plugin from 'tailwindcss/plugin'

export default {
  target: 'static',

  head: {
    titleTemplate: '%s - ' + 'Shirime',

    script: [
      {
        src: 'https://www.googletagmanager.com/gtag/js?id=xxxxxxxx',
        async: true,
      },
    ],
  },

  loading: {
    color: '#FF0000',
  },

  css: ['@/assets/css/global.css'],

  plugins: [
    { src: '~/plugins/gtag.js', mode: 'client' },
    { src: '~/plugins/gameMode.js', mode: 'client' },
    { src: '~/plugins/welcome.js', mode: 'client' },
  ],

  components: false,

  buildModules: [
    '@nuxtjs/eslint-module',
    '@nuxtjs/stylelint-module',
    '@nuxtjs/tailwindcss',
  ],

  tailwindcss: {
    config: {
      theme: {
        extend: {
          fontFamily: {
            heading: ['Nouveau', 'sans-serif'],
            body: ['Light', 'sans-serif'],
            incantation: ['Night', 'sans-serif'],
          },
          colors: {
            red: '#FF0000',
            redAccent: '#ff1414',
            red40: 'rgba(255,0,0,0.4)',
            black: '#000000',
            black92: 'rgba(0,0,0,0.92)',
            white: '#ffffff',
            white40: 'rgba(255,255,255,0.4)',
          },
          fontSize: {
            xs: '.82rem',
            sm: '.95rem',
            tiny: '.875rem',
            base: '1rem',
            lg: '1.125rem',
            xl: '1.25rem',
            '2xl': '1.5rem',
            '3xl': '2.2rem',
            '4xl': '2.9rem',
            '5xl': '3.3rem',
            '6xl': '3.8rem',
            '7xl': '6rem',
            '8xl': '11rem',
          },
        },
      },
      plugins: [
        plugin(function ({ addUtilities }) {
          const newUtilities = {
            '.no-text-shadow': {
              textShadow: 'none',
            },
            '.red-text-shadow': {
              textShadow: '0px 0px 10px rgba(255,0,0,0.2)',
            },
            '.red-text-shadow-big': {
              textShadow: '0px 0px 15px rgba(255,0,0,0.6)',
            },
            '.white-text-shadow': {
              textShadow: '0px 0px 10px rgba(255,255,255,0.4)',
            },
            '.red-box-b-shadow': {
              boxShadow: '0 18px 10px -10px  rgba(255,0,0,0.2)',
            },
            '.white-box-b-shadow': {
              boxShadow: '0 18px 10px -10px  rgba(255,255,255,0.2)',
            },

            '.backdrop-blur': {
              backdropFilter: 'blur(2px)',
            },
          }

          addUtilities(newUtilities)
        }),
      ],
    },
  },

  modules: [
    '@nuxtjs/pwa',
    'vue-social-sharing/nuxt',
    '@nuxtjs/sitemap',
    'nuxt-lazy-load',
    'nuxt-i18n',
    '@nuxtjs/google-adsense',
    'cookie-universal-nuxt',
  ],

  'google-adsense': {
    id: 'xxxx',
    pageLevelAds: true,
  },

  sitemap: {
    hostname: 'https://shirime.one',
    gzip: true,
    i18n: true,
  },

  pwa: {
    icon: {
      fileName: 'app-icon.png',
    },

    meta: {
      name: 'Shirime',
      description: false,
      lang: false,
      theme_color: '#000000',
      ogHost: 'https://shirime.one',
      twitterCard: 'summary',
      twitterSite: '@jbty_dev',
      twitterCreator: '@jbty_dev',
    },
  },

  i18n: {
    detectBrowserLanguage: {
      fallbackLocale: 'en',
      useCookie: true,
      onlyOnRoot: true,
      alwaysRedirect: true,
    },
    locales: [
      {
        code: 'us',
        iso: 'en-US',
        file: 'en-US.js',
      },
      {
        code: 'en',
        iso: 'en-GB',
        file: 'en-GB.js',
      },
      {
        code: 'es',
        iso: 'es-ES',
        file: 'es-ES.js',
      },
      {
        code: 'fr',
        iso: 'fr-FR',
        file: 'fr-FR.js',
      },
    ],
    lazy: true,
    langDir: 'lang/',
    defaultLocale: 'en',
    seo: true,
    vueI18n: {
      fallbackLocale: 'en',
    },
  },

  build: {
    optimizeJS: process.env.NODE_ENV === 'production',
    extractCSS: process.env.NODE_ENV === 'production',
    optimizeCSS: process.env.NODE_ENV === 'production',
  },
}

[pi0]

Hi @jbty. I see you reverted it due to comments in #176. Please see official comment from workbox maintainer https://github.com/nuxt-community/pwa-module/issues/176#issuecomment-665722983. Root cause of uncaught error is not clients claim but disabling the option, hides the error.

I would be happy to help debugging issue if you can somehow share project with me or keep option enabled on deployment...

[jb-thery]

@pi0 it would be magic if you could help me, because I am really lost with this problem :( If I deactivate clientsClaim I no longer have an error, but when my game is loaded for the first time, if the user clicks on install "navigator.serviceWorker.controller" is not available, the problem disappears if we refresh the page . I give you access to my repo, if you have time to look at it, I thank you from the bottom of my heart.

[pi0]

Sure @jbty no worries maybe we could also came up with a solution for #176 :) Feel free also DM me in nuxt discord.

[pi0]

• Console error with uncaught error resolved with v3.3.3: https://github.com/nuxt-community/pwa-module/releases/tag/v3.3.3
• IOS error resolved by using mobileAppIOS option
• Caching issue resolved by not disabling clientsClaim (removing clientsClaim: false from config)

[jb-thery]

Wooohouu ! thanks I try this now

[jb-thery]

@pi0 It's work, no errors logged, you are awesome !