Comments (4)
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
from vite-plugin-pwa.
@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
> [email protected] 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
> [email protected] serve
> serve dist
Serving static path: dist
http to https redirection active.
Server running on port 443.
from vite-plugin-pwa.
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.
from vite-plugin-pwa.
@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).
from vite-plugin-pwa.
Related Issues (20)
- How to handle SSR? HOT 2
- How to use different network strategy
- Wrong envPrefix in Astro Integration HOT 7
- vite-plugin-pwa removes mock service worker HOT 7
- no SW.js when registerSW() function is in pwa.js file with particular import manner HOT 3
- Cannot bundle Node.js built-in "fs" imported from ... Consider disabling ssr.noExternal or remove the built-in dependency HOT 10
- pwa assets disabled when using inline custom preset
- favicon preset not being applied when using custom inline preset
- service-worker cannot detect new version to update cache when using Link, NavLink in React HOT 4
- [bug] add-to-cache-list-conflicting when setting both the globPattern and icons manifest HOT 3
- ServiceWorker script at https://app.***.com/sw.js for scope https://app.***.com/ encountered an error during installation.
- submit logo to simple-icon HOT 2
- Problems with auto generated service-worker on old safari webview
- Issue on Vercel after each new deployement HOT 8
- SW not working with cross origin headers (sharedArrayBuffers) HOT 1
- Cache media received from the server HOT 1
- preact + ts and types issue
- manifest icons do not follow "base" path HOT 5
- Push Notification
- add-to-cache-list-conflicting-entries HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vite-plugin-pwa.