使用 Service Worker 缓存非静态 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\//

使用 Service Worker 缓存非静态 url

Cache non static url with service worker

javascript

regex

service-worker

workbox