需要澄清有关在 Cache API 中使用相对文件路径的信息 - caches.match() 内的可比性

Question

假设通过以下代码，

service-worker.js

已准备好提供离线浏览功能，

self.addEventListener("fetch", event => {
  event.respondWith( caches.match(event.request).then( cachedResponse => {   return cachedResponse || fetch(event.request);   } )  );
});

假设我们已经缓存了一些资源，其中文件相对于根目录列出，

const cacheAssets = await caches.open('necessary-files-v1');
const listOfFiles = [
    "/somefolder/somepage.html",
    "/somefolder/somevisual.jpg",
    "/somefolder/someaudio.mp3"
];
await cacheAssets.addAll(listOfFiles);

现在比较以下两个的离线情况（显然在线时它们都工作正常），

场景1：

somepage.html

包含

<img src="somevisual.jpg">

场景2：

somepage.html

包含

<img src="/somefolder/somevisual.jpg">

考虑到字符串与字符串的比较

("somevisual.jpg" == "/somefolder/somevisual.jpg")

将返回

false

，我们在构建html文件并希望实现离线兼容性时是否应该始终采用场景2？或者是否有某种案例或某种方法可以为我们开发人员提供一些可有可无的灵活性？

Answer 1

我不确定您是否需要进行字符串比较；我在你的代码中没有看到这种情况发生。我相信您所寻求的灵活性应该内置于浏览器 API（

cache.addAll

和

fetch

）和 Request 对象中；字符串 URL 可以转换为

Request

对象进行比较。

例如，

cache.addAll

在您传入的每个字符串

上调用 

Request 构造函数 ，并且您将

Request

传递给

caches.match

（如

event.request

）。因此，实际的匹配算法应该比较类似

Request("/somefolder/somevisual.jpg")

与

Request("somevisual.jpg")

（来自获取事件中的

event.request

），而不是像

("somevisual.jpg" == "/somefolder/somevisual.jpg")

这样的字符串比较。我认为前者通常应该考虑不同的路径，尽管我认为仍然可能存在需要考虑的边缘情况，例如查询参数。

测试时这不起作用吗？

顺便说一句，我发现您没有打开缓存，如这个示例所示，这可能会给您带来麻烦（但我不确定，我已经很多年没有使用这些 API 了）。