Configuring Vue 3 PWA with cli-pwa-plugin in WordPress Theme - Issues Encountered

Other Questions Wordpress
1

I have developed a Vue 3 application and made it a Progressive Web App using the cli-pwa-plugin, which is embedded in a WordPress theme. Currently, I’m encountering some challenges with the settings for publicPath and start_url.

Here is my simplified configuration:

{
    publicPath: '/wp-content/themes/theme-name/dist',
    pwa: {
        manifestOptions: {
            name: 'My App',
            //start_url: 'https://myapp.example.com',
            display: 'standalone',
            theme_color: '#000000',
            // additional options omitted
        },
        workboxPluginMode: 'GenerateSW',
        workboxOptions: {
            // extra settings omitted
        }
    }
}

I face a couple of scenarios based on my configurations. When I leave out the start_url, the installation yields a 404 error page instead of the homepage, which arises from the routing in my app. Navigation to other sections operates as expected, and offline functionality works, but the initial loading fails.

On the other hand, when I uncomment the start_url, the application starts correctly to the main page, but unfortunately, the routes do not cache, and the offline capabilities cease to function.

How can I configure both publicPath and start_url effectively to ensure my PWA reliably loads the homepage and maintains offline caching?

2

sounds like ur service worker scope is messed up. try setting the start_url to just ‘/’ instead of the full domain and make sure your sw registration matches the publicPath. also check if workbox is actually precaching your routes - might need to add them manually to the precache list

3

This looks like a classic WordPress-Vue integration headache. I dealt with something very similar last year and the root cause was the manifest scope conflicting with WordPress’s URL structure. What worked for me was keeping the start_url relative but matching the actual accessible path. Since your publicPath is /wp-content/themes/theme-name/dist, your start_url should probably be /wp-content/themes/theme-name/dist/ (note the trailing slash). The bigger issue is likely in your workbox configuration though. WordPress tends to interfere with service worker caching because of its own caching mechanisms. Try adding skipWaiting: true and clientsClaim: true to your workboxOptions, and make sure you’re not accidentally excluding your route files from precaching. Also double-check that your Vue router base matches your publicPath - this caught me out for weeks when I had a similar setup running.

4

Had a similar issue when integrating Vue PWA into a custom WordPress setup. The problem usually stems from the service worker scope conflicting with WordPress routing. Try setting your start_url to match your publicPath structure like start_url: '/wp-content/themes/theme-name/dist/' and ensure your Vue router is configured for hash mode instead of history mode to avoid conflicts with WordPress permalinks. Also check your workbox configuration - you might need to explicitly define navigation fallback in workboxOptions with navigateFallback: '/wp-content/themes/theme-name/dist/index.html' to handle the routing properly. This should resolve both the 404 on install and maintain your offline caching functionality.