vite-pwa / vite-plugin-pwa

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

Problems encountered in using vite plugin PWA in vue3 #349

Open ZhaoHongzcyh opened 2 years ago

ZhaoHongzcyh commented 2 years ago

Use vite plugin PWA in vue3. Every time you update the business code, vite will hot update and refresh the browser. At this time, a series of exceptions will be thrown in the browser (exceptions are as follows)

Basic configuration // pwa workbox config image

// VitePWA image

// main.js
image

The exceptions thrown are similar to the following exceptions

image

ReferenceError: Cannot access 'router' before initialization

This problem has bothered me for a long time. I want to know how to solve this problem. Thank you

userquin commented 2 years ago

Remove the dev options. This option was included to test your custom sw and the webmanifest. Since we cannot use hmr on sw in any browser, each time the sw is regenerated will trigger a full reload. You should test the sw with a local build once the app is finished. Next release will address the errors, since we're caching the assets, and we should only cache the entry point in the sw precache manifest, check #335

userquin commented 2 years ago

@ZhaoHongzcyh try with latest version 0.12.4, review the navigation fallback option in devOptions, read the dev entry in the docs, has been updated.