How to exclude specific route in PWA with vue cli config?

Question

I have two different projects (or repo) on the server. one of them is wroten with vue.js (SPA) and another is created by static site generator (mkdoc).

then I add PWA to my SPA project (from here) and a strange thing happened. in my project, I navigate to example.com/help but it shown a 404 page while /help route is for my mddoc project!

in other words:

SPA Project domain: example.com
mkdoc Project domain: example.com/help

so I searched on the web and thought about this problem and I realized why this problem happens!

I think that's because of the service worker in PWA! the service worker cached all the files and assets of the project.

now I think to solve this problem I should prevent cache the /help route! but I couldn't understand how to config PWA in vue.config.js vue cli.

really I don't know that can we exclude one route and prevent to cache with the service worker or not!?

how can I fix this problem!?

vue.config.js

module.exports = {
  publicPath: '/',

  css: {
    loaderOptions: {
      sass: {
        prependData: `
            @import "@/assets/styles/_boot.scss";
          `
      }
    }
  },

  pwa: {
    name: "app",
    themeColor: "#004581",
    msTileColor: "white",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "white",

    iconPaths: {
      favicon32: 'img/icons/favicon-32x32.png',
      favicon16: 'img/icons/favicon-16x16.png',
      appleTouchIcon: 'img/icons/apple-touch-icon-180x180.png',
      maskIcon: 'img/icons/safari-pinned-tab.svg',
      msTileImage: 'img/icons/mstile-144x144.png',
    },

    // configure the workbox plugin
    workboxPluginMode: "GenerateSW",
    workboxOptions: {
      importWorkboxFrom: "local",
      navigateFallback: "/",

      ignoreUrlParametersMatching: [/help*/],

      // Do not precache images
      exclude: [/\.(?:png|jpg|jpeg|svg)$/],

      // Define runtime caching rules
      runtimeCaching: [
        {
          // Match any request that ends with .png, .jpg, .jpeg or .svg.
          urlPattern: /\.(?:png|jpg|jpeg|svg)$/,

          // Apply a cache-first strategy.
          handler: "CacheFirst",

          options: {
            // Use a custom cache name.
            cacheName: "images",

            // Only cache 10 images.
            expiration: {
              maxEntries: 10
            }
          }
        }
      ]
    }
  }
};

registerServiceWorker.js

/* eslint-disable no-console */

import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.
' +
          'For more details, visit https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa'
      );
    },
    registered() {
      console.log('Service worker has been registered.');
    },
    cached() {
      console.log('Content has been cached for offline use.');
    },
    updatefound() {
      console.log('New content is downloading.');
    },
    updated() {
      console.log('New content is available; please refresh.');
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    }
  });
}

How to exclude specific route in PWA with vue cli config?

0 Answers