使用 service worker 缓存非 static url

Question

我对工作箱（我的服务人员）中的正则表达式有一点问题。 我需要缓存我的 api 的响应，这个响应是一个图像。 为此，我需要像这样请求 url： https://myapi/image/12

所以我不能在我的服务人员中包含一个特定的路径，我想我需要处理正则表达式。 我试过这个：

                   urlPattern: new RegExp('\/image/'),
                handler: 'NetworkFirst',
                options: {
                    networkTimeoutSeconds: 15,
                    cacheName: 'Saved bill img',
                    expiration: {
                      maxEntries: 25,
                      maxAgeSeconds: 60 * 60,
                    },
                }

但它不起作用，有什么帮助吗？

Answer 1

我应该问的问题是如何在正则表达式中定义查询的开头。 所以他们对此有很多答案。 所以这就是我所做的：

new RegExp('^https:\/\/myapi\/image/')

Answer 2

我不知道您使用的是哪个版本的 Workbox，但示例代码与我知道的版本不匹配。

Common Recipes页面显示了当前版本 (5.1.3) 的语法：

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(/\/some\/path\/some-file\.txt$/,
  new StaleWhileRevalidate()
);

您正在使用的正则表达式有一个未转义的最终斜杠。 您总是可以先尝试Regex 101上的正则表达式。

进一步举例说明，正则表达式^https:\/\/example\.com\/image\/将匹配 URL 以https://example.com/image/开头的所有请求。 您可以在 JavaScript 中使用任何这些变体：

• new RegExp('^https:\/\/example\.com\/image\/')
• /^https:\/\/example\.com\/image\//