Vue-router example is incomplete

[hyvyys]

Steps to reproduce:

1. Build the vue-router example from https://github.com/antfu/vite-plugin-pwa/tree/master/examples/vue-router

yarn
yarn build

2. Serve it and install the PWA
3. Open the PWA, navigate to About, then refresh – results in 404

[userquin]

@hyvyys you need to build and serve it using start script. Just run yarn start from examples/vue-router directory, proceed with installing ssl certificate when prompted and open https://localhost on browser.

Using yarn instead pnpm still works for me (you need install vite-pwa-plugin 0.7.3 when yarn prompted asking for version):

yarn
....
....
yarn start
yarn run v1.22.10
$ npm run run-build && npm run serve

> example-vue-router@0.0.0 run-build
> cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true vite build

vite v2.2.4 building for production...
[plugin:replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
✓ 27 modules transformed.
dist/index.html                  0.47kb
dist/manifest.webmanifest        0.15kb
dist/assets/about.bc13285a.js    0.38kb / brotli: 0.25kb
dist/assets/about.bc13285a.js.map 0.63kb
dist/assets/home.3b17a6d6.js     0.82kb / brotli: 0.44kb
dist/assets/home.3b17a6d6.js.map 1.18kb
dist/assets/index.40de6d3d.css   0.45kb / brotli: 0.21kb
dist/assets/[name].1c168a04.js   0.47kb / brotli: 0.30kb
dist/assets/[name].1c168a04.js.map 0.87kb
dist/assets/index.aa8c06bd.js    3.30kb / brotli: 1.36kb
dist/assets/index.aa8c06bd.js.map 10.83kb
dist/assets/vendor.bc8543a2.js   74.54kb / brotli: 26.00kb
dist/assets/vendor.bc8543a2.js.map 811.08kb

> example-vue-router@0.0.0 serve
> serve dist

Serving static path: dist
http to https redirection active.
Server running on port 443.

[hyvyys]

I apologize. I does work, even when using yarn build (after uploading to a server).

Note to future self: do not test such things on localhost when everybody and their mother tells you it doesn't work that way ;)
Sorry for wasting your time, and thanks for the swift reply anyway.

Edit: I now checked the yarn start route and I find it lacking. The PWA still doesn't install as a PWA (the top browser bar is visible) and it doesn't work offline.

[userquin]

@hyvyys The vue-router example is for testing the service worker not the PWA. It works without server connection (Im'm testing without the server started once installed), but for working offline you need to add manifest entry on vite.config.ts file, see for example vitesse template (almost icons and title).

[dheimoz]

Hello @hyvyys, the whole PWA concept is difficult to grasp, at least for me. If you have an hour to spare I suggest you reviewing the information and the video at:
https://firt.dev/pwa-cheat-sheet-2020/

As @userquin has stated, one thing is the Service Worker and another different thing is the manifest.

I see the SW as a "mini" webserver that intersects your http petitions and depending on the configuration, the response can be served from the local cache or the internet.

I picture the manifest as instructions to install the PWA as a native application.

Cheers