Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
serhii-bilyk-intellias opened this issue Mar 4, 2024 · 1 comment

Comments

@serhii-bilyk-intellias
Copy link

serhii-bilyk-intellias commented Mar 4, 2024

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
Copy link
Member

userquin commented Apr 2, 2024

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants