在Chrome扩展程序中使用Workbox

Question

我正在制作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 😬`);
}

我看到服务人员已注册，但服务人员未处理任何请求。

我在这里做错了什么？

Answer 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。

对不起，如果您没有得到想要的答案。

在Chrome扩展程序中使用Workbox

问题描述投票：0回答：1

1个回答

最新问题

在Chrome扩展程序中使用Workbox

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1