Documentation: PWA integrations for Vite and the ecosystem

The workbox-window.prod.es5.[HASH].js file is being generated by vite inside assets directory, There are no files generated matching above glob in dist directory.

There is no need for special cache directive, caching is already covered by location ^~ /assets/ block.

This PR includes:

• automatic reload != automatic page reload
• disabling injection point (inject manifest)
• iief rollup build format: unexpected service worker exports (inject manifest)

Just a small docs update to hopefully save someone a lot of pain.

Whilst following the docs for injecting a custom service worker I kept running into the Cannot use import statement outside a module error. After spending a long time on it, I eventually found that it's 100% answered in the docs already, so I'm just making that more clear.

I think this could be a pretty common use case, a user is developing a custom service worker, they're reading the custom service worker docs and they're copying the code samples with imports in them, so hopefully this is useful.

Cheers

Without the include mime.types; directive within the server block types overrides system ones and in effect all files except .webmanifest are served with Content-Type: application/octet-stream.

See this SO answer for more details

I try to get the backround sync running for a PWA with this config:

workbox: {
        runtimeCaching: [
          {
            handler: "NetworkOnly",
            urlPattern: new RegExp("^https://localhost/api/basic_packages$"),
            method: "POST",
            options: {
              backgroundSync: {
                name: "postQueue",
                options: {
                  maxRetentionTime: 24 * 60,
                },
              },
            },
          },

I clear all local storages and caches and load the application in browser. I install the application. I select the checkbox "offline" for serviceworker in devtools of chrome. The post requests do not end up in the queue. But if i reload the PWA while offline, it suddenly works. The matching requests end up in the queue like expceted.

If i use a string instead of the regexp, it works from the beginning without the reload.

What could be the problem?

hydrate no longer exists and SvelteKit's service worker now works in dev mode. SvelteKit's dev-mode support only works in Chrome though - I'm not sure if there's any restriction like that in the PWA plugin? If not, we could add back that sentence with the additional clarification

I've configured my vite to use another dist folder:

build: {
    target: 'esnext',
    outDir: '../dist',
    emptyOutDir: true,
  },

I notice that when building vite with VitePWA dev mode enabled, it creates anopther folder called 'dev-dist' that contains the registerSW.js, sw.js and workbox-*.js files.

Is there a way to configure where these files are put? I just want them to go into the vite configured dist folder.

Hi

Below instruction fails while wanting to install Vite PWA for SvelteKit on https://vite-pwa-org.netlify.app/frameworks/sveltekit.html

PROMTP> pnpm add -D @vite-pwa/sveltekit
 ERR_PNPM_FETCH_404  GET https://registry.npmjs.org/@vite-pwa%2Fsveltekit: Not Found - 404

This error happened while installing a direct dependency of C:\Data\src\crap\kitrcionictest

@vite-pwa/sveltekit is not in the npm registry, or you have no permission to fetch it.

No authorization header was set for the request.
Progress: resolved 17, reused 17, downloaded 0, added 0

Install via npm also does not work npm i -D @vite-pwa/sveltekit. Same error.