I have a Vue 3 app I have converted into a PWA using cli-pwa-plugin and its loaded from within a WordPress theme. I am running into issues when using publicPath and start_url.
This is my simplified configuration.
{
publicPath: '/wp-content/themes/theme-name/dist',
pwa: {
manifestOptions: {
name: 'App Title',
//start_url: 'https://app.domain.com',
display: 'standalone',
theme_color: '#000000',
// ... omitted for simplicity
},
workboxPluginMode: 'GenerateSW',
workboxOptions: {
// ... omitted for simplicity
}
}
}
When I install the app using this configuration (with the start_url commented out). The app loads a 404 page instead of the homepage. The 404 page is not expected and loads from within my apps routing and error handling. Navigating to the homepage and other parts of the app do work. All caching works and the app works properly offline. The only issue is the 404 page instead of the homepage when the app is first opened.
When I uncomment the start_url and then install the app. The app properly loads the homepage but does not cache any of the registered routes nor does the app work offline.
How do I properly configure the publicPath and start_url to load my homepage and have caching working for offline use?
I ended up finding a solution to my issue. I used the following configuration for my sub directory "dist" and set id and start_url to the root of my site. I then had to move the service-worker.js file and my manifest.json file out of the dist directory and to the root of the site.
{
publicPath: '/wp-content/themes/theme-name/dist',
pwa: {
manifestOptions: {
name: 'App Title',
id: '/',
start_url: '/',
scope: '/wp-content/themes/thoe-app/dist/',
display: 'standalone',
theme_color: '#000000',
// ... omitted for simplicity
},
workboxPluginMode: 'GenerateSW',
workboxOptions: {
// ... omitted for simplicity
}
}
}