I’m using laravel-mix-workbox to bundle and create a service worker. The service worker is running as expected, but there is apparently no precache files because it doesn’t work offline (no content when offline after a reload).
Stack: Laravel 8, Vue 2, Workbox 6, Laravel-mix 6
// webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-workbox');
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps(false)
.generateSW()
here’s what I tried:
// app.js
if ('serviceWorker' in navigator) {
const wb = new Workbox('/service-worker.js')
wb.addEventListener('install', (event) => {
event.waitUntil(caches.open('v1').then(cache => {
return cache.addAll([
'/',
'/index.html',
'/favicon.ico',
'/img/app_bar_text.jpg',
// (etc...)
])
}))
})
wb.addEventListener('fetch', event => {
event.respondWith(caches.match(event.request).then(response => {
if (response)
return response;
return fetch(event.request)
}))
})
window.addEventListener('load', async () => {
await wb.register('service-worker.js')
})
}
But, the generated service worker does not include any files I specify and no content when offline.
Do I have to explicitly list every offline file? Should this list of cached files (urls) go in app.js or webpack.mix.js? If webpack.mix.js, then how?