在 Chrome 扩展程序中使用 Workbox答案

【问题标题】：Using Workbox in a Chrome extension在 Chrome 扩展程序中使用 Workbox
【发布时间】：2019-09-29 18:35:08
【问题描述】：

我正在制作一个 Chrome 新标签扩展程序，我想使用工作箱来缓存新标签发出的请求，以便用户体验良好且活泼。但是，我无法让工作箱与我的新标签扩展发出的请求进行交互。

index.html

<html lang="en" dir="ltr">
<head>
  <meta charSet="utf-8" />
  <title>New Tab</title>
  <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6844296/7797412/css/fonts.css" />
  <style>
    body {
      background-color: '#f5f4f3'
    }
  </style>
</head>
<body>
  <div id='container'></div>
  <script type="text/javascript" src="tab.js"></script>
</body>

</html>

tab.js

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('service-worker.js');
  });
}

service-worker.js

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

if (workbox) {
  workbox.routing.registerRoute(
    /\.js$/,
    new workbox.strategies.StaleWhileRevalidate()
  );
  workbox.routing.registerRoute(
    /\.css$/,
    new workbox.strategies.StaleWhileRevalidate()
  );
} else {
  console.log(`Boo! Workbox didn't load ????`);
}

我看到 Service Worker 已注册，但 Service Worker 没有提供任何请求。

我在这里做错了什么？

【问题讨论】：

标签： javascript workbox

【解决方案1】：

缓存本身似乎并不完整。

担心下面的内容，为什么不写一次绝对路径呢？

workbox.routing.registerRoute(
    'https://some-other-origin.com/logo.png',
    new workbox.strategies.StaleWhileRevalidate({
        cacheName: 'sampleName'
    })
);

Route Requests

唯一需要注意的是，这只会匹配来自您的来源的请求。如果有一个单独的站点具有 URL https://some-other-origin.com/logo.png，则此路由将不匹配，因为在大多数情况下，这不是预期的。相反，您需要定义要匹配的整个 URL。

如果你没有得到你想要的答案，我很抱歉。

【讨论】：