vite-pwa / vite-plugin-pwa

Zero-config PWA for Vite
https://vite-pwa-org.netlify.app/
MIT License
2.84k stars 192 forks source link

I cant find in documentation how I can test my service worker #677

Open serhii-bilyk-intellias opened 2 months ago

serhii-bilyk-intellias commented 2 months ago

This is my VitePWA config:

   VitePWA({
        strategies: 'injectManifest',
        srcDir: 'src',
        filename: 'my-sw.ts',
        injectRegister: 'auto',
        registerType: "autoUpdate",
        workbox: {
          globPatterns: ['**/*.{js,css,html,ico,png,svg}']
        },
        devOptions: {
          enabled: true,
        },

        // TODO: add specific content to align with app requirements.
        manifest: {
         //
        },
      })

This is my custom service-worker:

import { precacheAndRoute } from "workbox-precaching";
import { clientsClaim } from "workbox-core";

declare let self: ServiceWorkerGlobalScope

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

precacheAndRoute(self.__WB_MANIFEST);
self.skipWaiting();
clientsClaim();

My goal is to make application work when offline. However, I don;t know how I can test it. When I run npm run dev and turn off network - I see nothing. I mean nothing is chached.

Could you please point me in vite docs which minimum code I need to use to be able to debug service workers. How I can to trigger some events from service workers from my app ?

stackoverflow question

userquin commented 1 month ago

@serhii-bilyk-intellias you cannot test offline mode in dev, it is disabled: you need to build the app and use vite preview or npx server dist.

self.__WB_MANIFEST will have only the vite base route (/ by default: you can change it using the devOptions.navigateFallback option): check https://vite-pwa-org.netlify.app/guide/development.html#injectmanifest-strategy

The code can be found in dev vite plugin: https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/plugins/dev.ts#L121-L134