Workbox precache doesn't precache

Question

I'm attempting to implement workbox to precache image and video assets on a website.

I've created a service worker file. It appears to be successfully referenced and used in my application. The service worker:

import { clientsClaim, setCacheNameDetails } from 'workbox-core';
import { precacheAndRoute, addRoute } from 'workbox-precaching';

const context = self; // eslint-disable-line no-restricted-globals

setCacheNameDetails({ precache: 'app' });

// eslint-disable-next-line no-restricted-globals, no-underscore-dangle
precacheAndRoute(self.__WB_MANIFEST);

context.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('dive').then((cache) => {
      console.log(cache);
    }),
  );
});

context.addEventListener('activate', (event) => {
  console.log('sw active');
});

context.addEventListener('fetch', async (event) => {
  console.log(event.request.url);
});

context.addEventListener('message', ({ data }) => {
  const { type, payload } = data;

  if (type === 'cache') {
    payload.forEach((url) => {
      addRoute(url);
    });

    const manifest = payload.map((url) => (
      {
        url,
        revision: null,
      }
    ));

    console.log('attempting to precache and route manifest', JSON.stringify(manifest));
    precacheAndRoute(manifest);
  }
});

context.skipWaiting();
clientsClaim();

The application uses workbox-window to load, reference and message the service worker. The app looks like:

import { Workbox } from 'workbox-window';

workbox = new Workbox('/sw.js');

workbox.register();
workbox.messageSW({
  type: 'cache',
  payload: [
    { url: 'https://media0.giphy.com/media/Ju7l5y9osyymQ/giphy.gif' }
  ],
});

This project is using vue with vue-cli. It has a webpack config which allows plugins to be sent added to webpack. The config looks like:

const { InjectManifest } = require('workbox-webpack-plugin');
const path = require('path');

module.exports = {
  configureWebpack: {
    plugins: [
      new InjectManifest({
        swSrc: path.join(__dirname, 'lib/services/Asset-Cache.serviceworker.js'),
        swDest: 'Asset-Cache.serviceworker.js',
      }),
    ],
  },
};

I can see messages are successfully sent to the service worker and contain the correct payload. BUT, the assets never show up in Chrome dev tools cache storage. I also never see any workbox logging related to the assets sent via messageSW. I've also tested by disabling my internet, the assets don't appear to be loading into the cache. What am I doing wrong here?

I found the workbox docs to be a little unclear and have also tried to delete the message event handler from the service worker. Then, send messages to the service worker like this:

workbox.messageSW({
  type: 'CACHE_URLS',
  payload: { urlsToCache: [ 'https://media0.giphy.com/media/Ju7l5y9osyymQ/giphy.gif'] },
});

This also appears to have no effect on the cache.

Answer 1

The precache portion of precacheAndRoute() works by adding install and activate listeners to the current service worker, taking advantage of the service worker lifecycle. This will effectively be a no-op if the service worker has already finished installing and activating by the time it's called, which may be the case if you trigger it conditionally via a message handler.

We should probably warn folks about this ineffective usage of precacheAndRoute() in our Workbox development builds; I've filed an issue to track that.