context

• you're adding PWA functionality to a site you're developing to deploy as an app.
• you are adding an admin screen.
• but the admin screen shouldn't be part of the user app, so you need to exclude all related components from the PWA settings

vue.config.js

there is a prerequisite when configuring screens in vue.

1. pull out the admin screen component with vue router
2. related components must be bound with dynamic imports

bundling the project (npm run build) produces deliverables in bundling units called chunks. components must be dynamically imported to be excluded from the cache list by PWA

Setting up the router

when you create a project with vue-cli, if you don't touch it, the router configuration code exists in the path below

router file path
[project root]
 +- src
     +- router
         +- index.js (+)
     +- views
         +- admin
             +- AdminPage.vue (+)
          

• AdminPage.vue - admin screen entry point
• router/index.js - vue rotuer mapping file

file with dynamic imports to connect the admin screen components like below

router/index.js
const routes = [
  ...,
 { path: "/console
    path: "/console",
    name: "AdminConsole",
    component: () =>
      import(
        /* webpackChunkName: "admin" */ "../views/admin/AdminPage.vue"
      ),
  },
]

• component: () => import(...) - Code to load components dynamically. related components are created as separate chunks (just js files).
• webpackChunkName: "admin" - gives the chunk the name admin. i'll exclude the admin chunk from the pwa configuration (I can name the chunk in context)

See how it works

before we make any additional settings to the PWA, let's see how it works.

when you pull in a dynamic import from the vue router and bundle it like above, you'll get chunks that look roughly like this.

TXT
  dist/js/chunk-vendors.b3d47488.js 721.23 KiB 207.76 KiB
  dist/js/app.a3fbc79f.js 146.68 KiB 41.76 KiB
  dist/precache-manifest.68689f814dfde7545ea9de0b8 2.62 KiB 0.95 KiB
  7f0f71c.js
  dist/service-worker.js 2.06 KiB 0.86 KiB
  dist/js/admin.0eb6c880.js (+) 1.64 KiB 0.73 KiB
  dist/css/app.1202b911.css 104.36 KiB 16.16 KiB
  dist/css/admin.4b1d0267.css (+) 0.10 KiB 0.11 KiB

dist/js/admin.0eb6c880.jsanddist/css/admin.4b1d0267.cssare the final output ofAdminPage.vue` and all child components contained within it.

then there's a file called dist/precache-manifest...', which the workbox' responsible for the pwa reads and pre-caches the chunks in this file.

precache-manifest
self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "529639008f69ed196cd8",
    "url": "/css/app.1202b911.css"
  },
  ...,
  {
    "revision": "529639008f69ed196cd8",
    "url": "/js/app.a3fbc79f.js"
  },
  ...,
  {
    "revision": "deeaf84505db9ff67b285e3d7eb2e9e6",
    "url": "/js/admin.0eb6c880.js"
  },
  {
    "revision": "deeaf84505db9ff67b285e3d7eb2e9e6",
    "url": "/css/admin.4b1d0267.css"
  },
]);

• there are admin related chunks at the bottom. we need to exclude these

vue.config.js settings

despite the lengthy description, the actual configuration to exclude the admin chunk is simple.

if you open the vue.config.js file, you should see a configuration file that looks something like this

vue.config.js
module.exports = {
  configureWebpack: (config) => { ... },
  pwa: {
    ...,
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      swSrc: "src/service-worker.js",
      excludeChunks: ["admin"], //(+) Add here..
    },
  }
}

• excludeChunks: ["admin"] - Prevents the admin module from being cached by the PWA

add the excludeChunks option to provide an array of names of chunks to exclude

Result

if you rebundle (npm run build) and look at the list of files to be cached, you'll see that the admin-related chunks are gone.

precache-manifest
self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "529639008f69ed196cd8",
    "url": "/css/app.1202b911.css"
  },
  ...,
  {
    "revision": "529639008f69ed196cd8",
    "url": "/js/app.a3fbc79f.js"
  },
  ...,
  // not included
]);

• the number attached to the file varies from time to time