Workbox 5语法错误-未捕获的TypeError：workbox.expiration.CacheableResponsePlugin不是构造函数

Question

我正在尝试为一个小型静态站点设置一个简单的Service Worker。

预缓存几页。仅将* .html文件缓存5分钟缓存所有其他文件30天通过离线页面处理404和离线状态。

我收到服务人员控制台错误sw.js：59未被捕获的TypeError：workbox.expiration.CacheableResponsePlugin不是构造函数]

这是[C0行]

关于解决此问题的任何建议，将不胜感激。

new workbox.expiration.CacheableResponsePlugin({

Answer 1

我正在从

/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 *
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.
 * 
 */

importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js')


if (workbox) {
  console.log('Yay! Workbox is loaded');

  /**
   * The workboxSW.precacheAndRoute() method efficiently caches and responds to
   * requests for URLs in the manifest.
   *
   */

  /*      https://developers.google.com/web/tools/workbox/modules/workbox-sw  -namespace */
  /* https://developers.google.com/web/tools/workbox/guides/precache-files */
  workbox.precaching.precacheAndRoute(
    [
      { url: "404.html", revision: "dc3feaa1058d8c1efcea96fefc3153ed" },
      { url: "offline.html", revision: "e0683df2f740244dd3788ae2347e2bb4" }
    ]
  );



  workbox.routing.registerRoute(
    /\.(?:png|gif|jpg|svg|css|js|json)$/,
    new workbox.strategies.CacheFirst({
      cacheName: 'nonhtml-cache',
      plugins: [


        new workbox.expiration.ExpirationPlugin({
          maxEntries: 50,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
        })
      ]
    })
  )



  workbox.routing.registerRoute(
    /\.(?:html)$/,
    new workbox.strategies.NetworkFirst({
      cacheName: 'html-cache',
      plugins: [
        new workbox.expiration.CacheableResponsePlugin({
          statuses: [0, 200],
        }),

        new workbox.expiration.ExpirationPlugin({
          maxEntries: 50,
          maxAgeSeconds: 5 * 60,
        })
      ]
    })
  )


  //changes replace /404 with 404, replace php$ with php
  workbox.routing.registerRoute(/\.html/, args => {
    return articleHandler.handle(args).then(response => {
      if (!response) {
        return caches.match('offline.html');
      } else if (response.status === 404) {
        return caches.match('404.html');
      }
      return response;
    });
  });

} else {
  console.log('Boo! Workbox did not load');
}

v4迁移到v5，并且遇到相同的问题。

在您的代码中，

workbox

应该是

new workbox.expiration.CacheableResponsePlugin