For my laravel/vuejs application, I am utilizing workbox and babel dynamic imports. Additionally, I am making use of the laravel-mix and laravel-mix-workbox plugin to compile and generate service worker via generateSW().
The assets load correctly on the root URL https://myapp.test/ based on conditions set in vue-router. For example: https://myapp.test/assets/js/chunk1.js. When navigating to child pages like https://myapp.test/post/post1, the relevant chunks for that page also load successfully. Everything seems to be working fine so far!
However, when I directly visit a post page (https://myapp.test/post/post1), the dynamic asset URLs get appended to the latest slash, resulting in https://myapp.test/post/assets/js/chunk1.js and causing them to fail to load. It's as if the root URL is being set as the first page we visited.
I attempted to add output.path and output.publicPath in the webpack config, but they did not resolve the issue.
Some related packages I am using:
"devDependencies" {
"workbox-webpack-plugin": "^6.0.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"laravel-mix": "^5.0.9",
"laravel-mix-workbox": "^0.1.4",
}
Here is my generateSW configuration:
mix.generateSW({
mode: 'development',
runtimeCaching: [
{
urlPattern: /\.(?:jpg|jpeg|svg|png|json)$/,
handler: 'CacheFirst',
},
{
urlPattern: /api($|\/?.*)/,
handler: 'NetworkFirst'
}
],
exclude: [
/(backend.css|backend.js)/
],
include: [
/\.(?:ttf|js|css|glb)$/,
/(\/font.png)/
],
skipWaiting: true,
});
Thank you for taking the time to read this.