nuxt-community / pwa-module

Zero config PWA solution for Nuxt.js
https://pwa.nuxtjs.org
MIT License
1.25k stars 174 forks source link

Workbox new version available even after reloading #484

Open Musashi-Sakamoto opened 3 years ago

Musashi-Sakamoto commented 3 years ago

Hi I put this code in created funciton in layouts/default.vue to implement Refresh to Update Notification

Even after reloading the page, event.isUpdate returns true

const workbox = await window.$workbox;
  if (workbox) {
    workbox.addEventListener('installed', (event) => {
        if (event.isUpdate) {
          console.log('New site available. User can reload the page')
        }
    });
  }

I expected event.isUpdate to return false after reloading unless new versions of the site is available. Is this an expected behavior or is there something wrong with my config?

Here is my nuxt.config.js .

require('dotenv').config()

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  server: {
    port: 5555,
    host: '0.0.0.0'
  },

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: '売り子ール',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '@/assets/main.css',
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '~/plugins/confirm.js',
    '~plugins/day.js',
    '~/plugins/panZoom.js',
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    '@nuxtjs/dotenv',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/firebase',
    '@nuxtjs/onesignal',
    '@nuxtjs/pwa',
    'nuxt-webfontloader',
    '@nuxtjs/axios',
    '@nuxtjs/sentry',
    '@nuxtjs/i18n',
  ],
  i18n: {
    strategy: 'no_prefix',
    // 切り替える言語を定義
    locales: [
      { code: 'ja', iso: 'ja', file: 'ja.json' },
      { code: 'en', iso: 'en', file: 'en.json' },
    ],
    // デフォルトの言語を↑で定義したcodeで記載
    defaultLocale: 'ja',
    vueI18nLoader: true,
    lazy: true,
    // 言語ファイル(.json)のディレクトリを記載
    langDir: '~/locales/',
  },
  sentry: {
    dsn: process.env.SENTRY_DSN, // Enter your project's DSN here
    // Additional Module Options go here
    // https://sentry.nuxtjs.org/sentry/options
  },
  axios: {
    baseURL: process.env.FIREBASE_API_HOST
  },
  webfontloader: {
    google: {
      families: ['Noto+Sans+JP:300,400,500,700']
    }
  },

  firebase: {
    config: {
      apiKey: `${process.env.FIREBASE_API_KEY}`,
      authDomain: `${process.env.FIREBASE_PROJECT_ID}.firebaseapp.com`,
      databaseURL: `https://${process.env.FIREBASE_PROJECT_ID}.firebaseio.com`,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: `${process.env.FIREBASE_PROJECT_ID}.appspot.com`,
      messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.FIREBASE_APP_ID,
    },
    services: {
      auth: true,
      firestore: true,
      storage: true,
    },
  },

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      name: process.env.APP_NAME,
      short_name: process.env.APP_NAME,
      lang: 'ja',
      display: 'fullscreen',
      orientation: 'landscape',
    },
    workbox: {
      swURL: 'OneSignalSDKWorker.js',
    }
  },
  // Options
  oneSignal: {
    init: {
      appId: process.env.ONE_SIGNAL_APP_ID,
      allowLocalhostAsSecureOrigin: true,
      welcomeNotification: {
        disable: true
      },
      autoResubscribe: true
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    extend(config, ctx) {},
    postcss: {
      preset: {
        features: {
          'nesting-rules': true
        }
      }
    }
  },

}
Musashi-Sakamoto commented 3 years ago

I found out that this issue only happens when you are using onesignal module too