CODEWITHSUNDEEP
angularservice-workerprogressive-web-appsworkbox
Artem S.
Artem S.

Reputation: 669

Workbox-build doesn't add to service worker **some** of precache urls (but does add others)

I have an Angular 8 project which after building with angular-cli outputs to several bundle files:

chunk {0} 0.86bbf5c9edb63f626a71.js () 45.4 kB  [rendered]
chunk {1} runtime.b7f5cba16f3e526a1461.js (runtime) 2.44 kB [entry] [rendered]
chunk {2} 2.2ecd18f83cbcdc2f41b1.js () 30.8 kB  [rendered]
chunk {3} 3.3c6f6cac43c897221001.js () 66.7 kB  [rendered]
chunk {4} common.47e8c0f35a6b18d38d74.js (common) 3.78 kB  [rendered]
chunk {5} 5.a2ada2def205b6dd2266.js () 2.1 MB  [rendered]
chunk {6} main.7eef8fe96731a01550cd.js (main) 416 kB [initial] [rendered]
chunk {7} polyfills.ad9a67987ca4da80a52a.js (polyfills) 36.4 kB [initial] [rendered]
chunk {8} styles.8727807d7b65fa51a4c7.css (styles) 598 kB [initial] [rendered]
chunk {9} vendor.17d6b0cb2434f0d8397d.js (vendor) 2.87 MB [initial] [rendered]
chunk {10} 10.f7fd6c136990dd6fca53.js () 571 kB  [rendered]
chunk {11} 11.6d02f073f8b0d383d045.js () 19.9 kB  [rendered]
chunk {12} 12.84e1a02b9b9f7f159775.js () 9.92 kB  [rendered]
chunk {13} 13.d7ede168008c6b29a08c.js () 8.71 kB  [rendered]
chunk {14} 14.e8d9110fbb4072ef19df.js () 3.67 kB  [rendered]
chunk {15} 15.f6088492832d55965c5f.js () 29.9 kB  [rendered]

I use Workbox 4 to cache bundles at client side using service worker (AppShell).

I use workbox-build package to let service worker know which file names (and eventually urls) it has to precache.

Workbox-build complements given service worker file with actual filenames when I call npm run build (alias for ng build --prod && node workbox-build-inject.js, where workbox-build-inject.js contains instructions to complement default service worker file).

My workbox-build-inject.js:

    const { injectManifest } = require('workbox-build')

    let workboxConfig = {
        globDirectory: 'dist',
        globPatterns: [
            '*.js',
            '*.css',
            'favicon.ico',
            'index.html',
        ],
        swSrc: 'src/service-worker.js',
        swDest: 'dist/service-worker.js'
    }

    injectManifest(workboxConfig)
    .then(({
        count,
        size
    }) => {
        console.log(`Generated ${workboxConfig.swDest}, which will precache ${count} files, totaling ${size} bytes.`)
    })

After building project complemented service-worker.js appears in my dist/ folder.

// We inject manifest here using "workbox-build" in workbox-build-inject.js
workbox.precaching.precacheAndRoute([
  {
    "url": "0.86bbf5c9edb63f626a71.js",
    "revision": "c57834e89d94af468bc665e4040137ba"
  },
  {
    "url": "10.f7fd6c136990dd6fca53.js",
    "revision": "f26476084572d2c5252d97ffdde9e24a"
  },
  ...

This file contains all bundles, but vendor.17d6b0cb2434f0d8397d.js and 5.a2ada2def205b6dd2266.js despite of they match the rule "*.js" from the workbox-build-inject.js.

So what can be wrong with my build process or workbox config?

Upvotes: 0

Views: 2092

Answers (1)

Artem S.
Artem S.

Reputation: 669

It turns out that the reason for that two files not being included to service-worker.js is size of files (both over 2Mb).

According to workbox-build docs there's maximumFileSizeToCacheInBytes parameter:

maximumFileSizeToCacheInBytes: Optional Number, defaulting to 2097152

This value can be used to determine the maximum size of files that will be precached. This prevents you from inadvertantly precaching very large files that might have accidentally matched one of your patterns.

Example:

// Increase the limit to 4mb:
maximumFileSizeToCacheInBytes: 4 * 1024 * 1024

so here's fixed workbox-build-inject.js:

    const { injectManifest } = require('workbox-build')

    let workboxConfig = {
        globDirectory: 'dist',
        globPatterns: [
            '*.js',
            '*.css',
            'favicon.ico',
            'index.html',
        ],
        swSrc: 'src/service-worker.js',
        swDest: 'dist/service-worker.js',
        // Custom size limit
        maximumFileSizeToCacheInBytes: 4 * 1024 * 1024
    }

    injectManifest(workboxConfig)
    .then(({
        count,
        size
    }) => {
        console.log(`Generated ${workboxConfig.swDest}, which will precache ${count} files, totaling ${size} bytes.`)
    })

Upvotes: 4

Related Questions