Comments (3)
Honestly it's rather tricky to debug the service worker. Your browser won't initialize it in development environment, since 'serviceWorker' in navigator
evaluates to false when serving over HTTP. You need at least a self-signed certificate (and then serve via HTTPS within Vite, which in return is complicated) or enable service workers for HTTP connections in your browser settings.
But even if done so, the service worker relies on the generated scripts. Vite doesn't bundle your application. It serves the waterfall of ES modules, only transpiling Vue templates (and TypeScript, etc.) on the fly. So there's no way to make the service worker work which requires the bundled application.
Also, part of the offline capability of the service worker relies on rendered Kirby pages. In local environment, Vite just proxies requests. The template used for the HTML entry point (frontend/index.html
) differs from the one used in production (site/snippets/vue-index.php
).
For example, when offline the service worker falls back to serve the cached index HTML content, which would refer to /src/main.js
in development environment. The complete waterfall would have to be cached, which it isn't.
Solution: If you are using macOS with Laravel Valet, you can:
- build your application:
npm run build
- self-sign your local testing domain:
valet secure kirby-vue3-starterkit
- then run your Kirby instance
This is the only way to debug to service worker at the moment. You can disable Terser on the minified service worker (edit scripts/buildSw.js
) to find potential problems.
I've thoroughly tested the service worker over time and improved every bit, so it should work quite well. Of course, I'm open to suggestions! For which feature do you want to debug the service worker, if I may ask?
Thanks for your issue!
from kirby-vue3-starterkit.
Thanks for the elaborate explanation. At the time of writing I was looking for an error and suspected its origin in the service worker. Turned out it came from somewhere else. Though I might still need to run the service worker offline because I want to add full offlice capabilities with prefetching of all assets (all image sources, source-sets, videos sources and all the json) and that might need some local debugging.
from kirby-vue3-starterkit.
I see. The service worker I created is quite flexible – you can add more cache buckets:
const CACHE_KEYS = {
// …
RUNTIME: 'runtime'
}
And then cache everything in there:
// …
} else if (isImage) {
stashInCache(CACHE_KEYS.IMAGES, request, copy)
} else {
stashInCache(CACHE_KEYS.RUNTIME, request, copy)
}
Of course this just serves as an example. You can filter beforehand to sort assets into different cache buckets, rather than add everything into one bucket.
Testing the service worker offline works fine, just not from within the development server, but after compilation. Therefore I'm closing this. Would be happy to hear, how you extend this starterkit!
from kirby-vue3-starterkit.
Related Issues (20)
- Working with layouts and blocks HOT 9
- Deployed vite scripts refers to localhost HOT 4
- (?) Best Practice: Using Tags for filtered Collections HOT 1
- Kirby caches path to assets? HOT 1
- router-view transition won't fade in on router.replace HOT 1
- PHP / Kirby Routing HOT 4
- Sitemap.xml HOT 1
- Build Issue: Page not found HOT 1
- Deployment: What and how? HOT 17
- Vue.js devtools HOT 2
- Replacing default image block snippet HOT 4
- Meta-tags kirby-extended HOT 1
- Storing and accessing development/production variables in env HOT 1
- Alias HOT 1
- Queries not working HOT 1
- .env files not loading HOT 6
- Draft preview not working HOT 3
- create pages from frontend HOT 1
- Outsource internal `kirby-vue-kit` into own repository HOT 1
- Custom language variables best practice HOT 1
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 kirby-vue3-starterkit.