使用ServiceWorker缓存iframe请求 [英] Cache iframe request with ServiceWorker

问题描述

我正在尝试使用我的ServiceWorker缓存iframe的请求（使用sw-toolbox.js）。

I'm trying to cache the request of an iframe with my ServiceWorker (using sw-toolbox.js).

但无论我尝试什么文件都是从未通过ServiceWorker提供服务，因为Chrome网络标签告诉我。

But no matter what I try the files are never served from the ServiceWorker as Chrome Network Tab tells me.

这是我的service-worker.js：

Here is my service-worker.js:

'use strict';
importScripts('./build/sw-toolbox.js');

self.toolbox.options.cache = {
    name: 'ionic-cache'
};

var static_urls = [
    'https://quiqqer.local/test?app=1',
    'https://quiqqer.local/calendar?app=1'
];

self.toolbox.precache(static_urls);

self.toolbox.router.any('/(.*)', self.toolbox.cacheFirst, {origin: 'https://quiqqer.local'});

self.addEventListener('install', function (event)
{
    self.skipWaiting();
});

self.toolbox.router.default = self.toolbox.cacheFirst;

self.toolbox.precache（）函数正确地向我的static_urls发出请求，正如我所见在网络选项卡中。

The self.toolbox.precache() function makes the requests to my static_urls properly, as I can see in the Network Tab.

但所有来自iframe的请求（转到 https：//quiqqer.local/ ）似乎没有通过ServiceWorker进行路由。

But all the requests coming from the iframe (going to https://quiqqer.local/) seem to not being routed through the ServiceWorker.

我做错了什么？或者是否可以缓存iframe请求？

What am I doing wrong? Or isn't it possible to cache the iframe requests?

使用Linux在Chromium上运行。

Running on Chromium using Linux.

谢谢提前

推荐答案

可能有一个官方的HTML规范提供了更为规范的答案，但我只是从 MDN文档：

There's probably an official HTML specification that provides a more canonical answer, but I'll just excerpt this from the MDN documentation:

HTML元素表示嵌套的浏览上下文，
有效地将另一个HTML页面嵌入到当前页面中。 ...
每个浏览上下文都有自己的会话历史记录和活动文档。
包含嵌入内容的浏览上下文称为
父浏览上下文。

The HTML element represents a nested browsing context, effectively embedding another HTML page into the current page. ... Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context.

您可以想一想< iframe> 中发生了什么，包括加载< iframe> 的 src 本身的请求，因为它等同于< iframe> 已加载到单独的标签中。除非控制父浏览上下文的服务工作者（即您的顶级页面）也恰好包含< iframe> 的 src 在其范围内，该服务工作人员无法控制最初加载< iframe> 或从< iframe> 。

You can think of what's going on in an <iframe>, including the request to load the <iframe>'s src itself, as being equivalent to what would happen if that <iframe> were loaded in a separate tab. Unless the service worker controlling the parent browsing context (i.e. your top-level page) also happens to include the <iframe>'s src under its scope, that service worker won't have any control over initially loading the <iframe> or the requests made from the <iframe>.

这篇关于使用ServiceWorker缓存iframe请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！