Javascript 如何在服务工作者获取中检测到请求是针对清单的start\u url的?

Javascript 如何在服务工作者获取中检测到请求是针对清单的start\u url的?,javascript,service-worker,progressive-web-apps,fetch-api,Javascript,Service Worker,Progressive Web Apps,Fetch Api,我有一个PWA,它有一个带a的 我有一个服务工作者,其获取事件只缓存某些请求。 为了清楚起见,这是在服务工作者中通过覆盖缓存类型脚本中对代理的响应来完成的: self.addEventListener('fetch', (event: FetchEvent) => { // This MUST be synchronous until respondWith is called const cache = isCachable(event.request); if

我有一个PWA,它有一个带a的

我有一个服务工作者,其获取事件只缓存某些请求。 为了清楚起见,这是在服务工作者中通过覆盖缓存类型脚本中对代理的响应来完成的:

self.addEventListener('fetch', (event: FetchEvent) => {
    // This MUST be synchronous until respondWith is called

    const cache = isCachable(event.request);
    if (!isCachable)
        return; // Don't proxy, let the network request continue

    // Kick off a promise to check the cache, and clone/cache the response otherwise
    const proxy: Promise<Response> = cacheResponse(event);

    event.respondWith(proxy);
}
我想缓存start_url,这意味着上面的isCachable需要能够判断start_url的值是被请求的相对路由

我可以在软件中加载manifest.json,但感觉非常笨拙。我可以硬编码软件中的值,但是如果配置更改,我需要更新两个位置

在fetch handler event.request.url中是绝对的,但start_url是相对于manifest.json的-因此,例如,我可能有:

manifest.json:{start_url:appshell…} 网站被部署到www.example.com/folder/,但可能被部署到sub.example.com或www.example.com/a/b或其他位置 在线用户访问站点,或者访问所有内容,或者直接安装脚本缓存。 之后,同一用户离线访问。 上面的获取将使用event.request.url==“www.example.com/folder/appshell”激发 我需要isCachable函数来告诉我应该同步缓存资源。它需要确定www.example.com/folder/appshell是否为appshell解析相对链接,以及appshell是否设置为start\u url读取清单。 显然,所有这些都可以硬编码。但是,每个PWA都需要从缓存中响应start_url,所以这不是新问题。在我重新发明方向盘之前,有没有更好的方法或者我遗漏了什么

所以

鉴于服务工作者需要清单,有没有一种好方法可以在工作者中获取清单的配置? 是否有方法解析相对链接以与清单进行比较?
我已经知道怎么做了,但这很糟糕,我相信还有更好的办法

特别是我在清单内联中硬编码,我可以获取它,但这也很糟糕

const manifest = { start_url: 'appshell' };
然后我使用self.location获取服务人员的路径。这包括文件名,因此我将其从末尾删除:

// if file is 'sw.js' that's 5 chars off the end
const applicationRoot = new URL(self.location.href.slice(0, -5) + manifest.start_url); 
然后我可以检查以下内容:

self.addEventListener('fetch', (event: FetchEvent) => {
    // This MUST be synchronous until respondWith is called

    const url = new URL(event.request.url);
    if (url.pathname === applicationRoot.pathname) {
        // Request is for the start_url, always return something so the PWA starts offline
        event.respondWith(...):
    }

    // ... see question for rest
});

这是笨重的,但至少它可以始终为缓存的start_url服务,而不缓存其他所有内容,因此这是目前公认的答案。我希望看到一种更好的方法,最好不要硬编码/获取manifest.json,这样那里的配置更改就不需要新的服务人员。

你说的是Web应用程序清单,对吗?不是关于扩展的问题?您的问题只是关于解决相对路径的问题吗?如果是这样,您想相对于软件还是从发出请求的文档中解析它?@kaido只有一个manifest.json适用于服务人员。是的,这是一个渐进的web应用程序,而不是浏览器扩展。起始url是相对于清单的。传递给服务工作者中的获取处理程序的event.request.url是绝对的,服务工作者中的缓存是相对于服务工作者的。我不需要找出其他地方的相对链接,这个问题只是关于起始URL的具体情况,它需要由服务人员缓存。那么为什么要继续使用用于web扩展的标记呢?而且您编辑的文档链接已过期,自那时起,一个新的扩展名。webmanifest已正式启用。@Kaido,因为这是一个关于manifest.json的问题,而且服务工作者上下文比扩展名one guess更容易理解,哪个是搜索中最热门的?,两者都是同一事物的变体。