服务工作者“Hello World”例子

Question

我正在学习服务工作者，因为我有一个用例来创建一个获取侦听器，它将传回任意二进制响应。

我不知道从哪里开始。我在网上看到的示例讨论了发出服务器请求、在 Service Worker 中缓存并将其传回。我真正想做的只是传回我自己的响应，而不是向服务器查询并缓存它！

我正在寻找的，首先是，一旦服务工作者处于活动状态，用户在浏览器中输入（或使用 fetch api 获取以下网址）

http://myapp/helloworld

将显示浏览器中的“Helloworld”。 Service Worker 将类似于以下内容。但我不知道如何让它发挥作用。

self.addEventListener('fetch', event => {
   // compare end of url with /helloworld
   // if match, respond with 'helloword', otherwise fetch the response from the server 
});

Answer 1

这只是我将如何解决这个问题的一个非常简短、广泛的概述。

首先，我会遵循这样的指南：

https:// /css-tricks.com/add-a-service-worker-to-your-site/

// Listen for request events
self.addEventListener('fetch', function (event) {

  // Get the request
  let request = event.request;
  ...
}

然后，您将使用这段代码作为您想要执行的操作的指南：

event.respondWith(
  fetch(request).then(function (response) {
    return response;
  }).catch(function (error) {
    return caches.match(request).then(function (response) {
      return response;
    });
  })
);

进行一些修改。

首先，您需要检查它是否是正常的非 /helloworld 类型的请求，如果是，请执行以下操作：

if (normalRequest) {
  event.respondWith(
  fetch(request).then(function (response) {
    return response;
  });
} else {
  ... TODO
}

在 TODO 部分中，您将执行您的 helloworld 代码- 我不清楚你想用它做什么，所以我无法详细说明。但这是我将使用的整体结构。