文章/答案/技术大牛

发布

社区首页 >问答首页 >在Chrome扩展中使用Workbox

问在Chrome扩展中使用Workbox
EN

Stack Overflow用户

提问于 2019-09-27 07:11:34

回答 1查看 104关注 0票数 0

我正在做一个Chrome新选项卡扩展，我想使用workbox来缓存新选项卡的请求，这样用户体验就会更好更快。但是，我根本无法让workbox与我的新标签扩展请求进行交互。

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 `);
}

我看到服务工作者注册了，但是服务工作者没有处理任何请求。

我在这里做错了什么？

javascript

workbox

回答 1

Stack Overflow用户

发布于 2019-09-29 18:35:09

缓存本身似乎并不完整。

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

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。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58125821

复制

相似问题

问在Chrome扩展中使用Workbox
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Chrome扩展中使用WorkboxEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Chrome扩展中使用Workbox
EN