vendor.[revision].js not pushed in self.__SW_MANIFEST

In a vue2 app using @vue/composition-api and vite, the vendor.[revision].js is not present in the self.__WB_MANIFEST variable in service worker.

Here is how the plugin is configured un my vite.config.ts:

    VitePWA({
      mode: 'development',
      srcDir: 'src',
      filename: 'sw.ts',
      base: '/',
      strategies: 'injectManifest',
      registerType: 'autoUpdate',
      includeAssets: ['/favicon.svg'], // <== don't remove slash, for testing purposes
      manifest: {
        name: 'myApp',
        short_name: 'myApp',
        theme_color: '#0070B2',
        icons: [
          {
            src: '/pwa-192x192.png', // <== don't remove slash, for testing purposes
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: '/pwa-512x512.png', // <== don't remove slash, for testing purposes
            sizes: '512x512',
            type: 'image/png',
          }
        ],
      }
    })

registerSW.ts that is imported in main.ts (because virtual:pwa-register/vue can’t be used with vue 2):

import { registerSW } from 'virtual:pwa-register'

function handleSWManualUpdates(swRegistration: ServiceWorkerRegistration | undefined) {
  // noop
}

function handleSWRegisterError(error: any) {
  // noop
}

try {
  const updateSW = registerSW({
    immediate: true,
    onOfflineReady() {
      console.log("onOfflineReady")
    },
    onNeedRefresh() {
      console.log("onNeedRefresh")
    },
    onRegistered(swRegistration) {
      swRegistration && handleSWManualUpdates(swRegistration)
    },
    onRegisterError(e) {
      handleSWRegisterError(e)
    }
  })
} catch {
  console.log("PWA disabled.")
}

the service worker himself:

import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching'
import { clientsClaim } from 'workbox-core'
declare let self: ServiceWorkerGlobalScope

precacheAndRoute(self.__WB_MANIFEST)

self.skipWaiting()
clientsClaim()

cleanupOutdatedCaches()

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING')
    self.skipWaiting()
})

[vcastro45]

@userquin looks good to me Thanks for your prompt response and fix

[vcastro45]

@userquin After some more investigations, I resolved the problem. I had to increase the value of the maximumFileSizeToCacheInBytes variable in config (that is a part of the workbox config editable through the VitePWA config). The default value is 3000000 bytes and I needed more.

I don’t know if it is an issue for Workbox or vite-plugin-pwa but in my opinion it must show an error in the console, but it still silent.

Here is the config to add:

injectManifest: {
  maximumFileSizeToCacheInBytes: 3000000 // Change this value to your needs
}