Service Worker内的访存API仅对主页失败.重新加载时，它会提供缓存的脱机页面 [英] Fetch API inside Service Worker fails only for the home page. When reloading it serves the cached offline page

问题描述

我已经为此奋斗了几个月，无法弄清楚.我使用服务工作者已经有一段时间了，但是没有问题，但是最近我将加载网站的主页，然后进行一次简单的刷新，然后将脱机页面提供给我(如果我从缓存中删除了脱机页面，它会刷新为连接错误屏幕).这仅在主页上发生，并且必须与Fetch API有关(请参见下文).提取错误只是无法提取"，不包含任何其他错误信息.

I've been fighting with this for a few months now and cannot figure it out. I've been using a service worker for a while now without issue but recently I would load my website's homepage and then do a simple refresh and I would be served the offline page (and if I remove the offline page from the cache it refreshes to connection error screen). This only happens on the home page and must have something to do with the Fetch API (see below). The fetch error is simply "Failed to fetch" and does not contain any additional error information.

我的清单设置为/的适当范围，并且sw.js文件位于根目录中.就像我提到的那样，它在没有对Chrome 66(及之前版本)进行任何更改的情况下运行良好，但是在更新到67和68的稳定版本之后却出现了问题.在所有其他支持Service Worker的浏览器(包括Chrome Canary)中，没问题.

My manifest is set with the proper scope of / and the sw.js file is in the root directory. Like I mentioned, this was running fine without making any changes in Chrome 66 (and before), but then had problems after updating to the stable release of 67 and also 68. In all other browsers that support service worker (including Chrome Canary) it is not a problem.

涉及的代码太多，我不知道如何简洁地将其归结为这样的帖子，但这是我的测试用例(已在隐身模式和常规模式下运行).该代码位于/nebula/子目录(此网站的根目录)中的服务工作者文件sw.js中.我一直将笔记保存在Github中，因此可以在此处获得更详细的解释以及其他屏幕截图: https://github.com/chrisblakley/Nebula/issues/1709 (

There is so much code involved I don't know how to succinctly boil it down to a post like this, but here is my test case (which I have run in both incognito mode and regular). This code lives in the service worker file sw.js which is in the /nebula/ subdirectory (which is the root level for this website). I've been keeping my notes in Github so a more detailed explanation along with additional screenshots is available here: https://github.com/chrisblakley/Nebula/issues/1709 (Particularly this post here)

console.log('(A) about to fetch via sw');
fetch('https://gearside.com/nebula/get-started/checklists/').then(function(response) {
    console.log('(A) we got it!', response);
}).then(function(returnedValue) {
    console.log('(A) returning the value!', returnedValue);
}).catch(function(err) {
    console.log('(A) fetch error:', err);
});

console.log('(B) about to fetch via sw');
fetch('https://gearside.com/nebula/').then(function(response) {
    console.log('(B) we got it!', response);
}).then(function(returnedValue) {
    console.log('(B) returning the value!', returnedValue);
}).catch(function(err) {
    console.log('(B) fetch error:', err);
});

(A)"控制台日志获取子页面并且始终成功，但是获取主页的(B)"日志始终失败.

The "(A)" console logs fetch a subpage and are always successful, but the "(B)" logs which fetch the homepage always fail.

这是我的网络标签，显示其他软件抓取工作正常:

Here is my network tab to show other SW fetches working fine:

作为参考，我的manifest.json(为简单起见，我剪掉了一些图标):

For reference, my manifest.json (I've trimmed out a handful of icons to be brief):

{
    "name": "Nebula: Advanced Starter WordPress Theme for Developers",
    "short_name": "Nebula",
    "description": "Advanced Starter WordPress Theme for Developers",
    "theme_color": "#0098d7",
    "background_color": "#f6f6f6",
    "gcm_sender_id": "",
    "scope": "/",
    "start_url": "https://gearside.com/nebula/?utm_source=homescreen",
    "display": "standalone",
    "orientation": "portrait",
    "icons": [{
        "src": "https://gearside.com/nebula/wp-content/themes/Nebula-master/assets/img/meta/android-chrome-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }]
}

安装软件后，它会缓存多个文件(涉及一些自动化操作，但从未遇到过问题):

When the SW is installed, it caches several files (there is some automation involved, but have never had a problem with that):

var CACHE_NAME = 'nebula-nebula-child-27905'; //Wednesday, August 8, 2018 11:59:21 PM
var OFFLINE_URL = 'https://gearside.com/nebula/offline/';
var OFFLINE_IMG = 'https://gearside.com/nebula/wp-content/themes/Nebula-master/assets/img/offline.svg';
var META_ICON = 'https://gearside.com/nebula/wp-content/themes/Nebula-master/assets/img/meta/android-chrome-512x512.png';
var MANIFEST = 'https://gearside.com/nebula/wp-content/themes/Nebula-master/inc/manifest.json';
var HOME_URL = 'https://gearside.com/nebula/';
var START_URL = 'https://gearside.com/nebula/?utm_source=homescreen';

并在我网站的JavaScript文件中，根据需要将其他页面发送到缓存.

And in my site's JavaScript file, it sends additional pages to the cache as needed.

在使用服务工作者或Fetch API之前，是否还有其他人遇到过此问题?如果需要，我很乐意分享其他信息.我的一线希望是，由于它可以在Canary中运行，因此可以用Chrome 69或70神奇地修复它……但是我更希望找出万一发生的情况.

Has anyone else run into this before with their service worker or the Fetch API? I'm happy to share additional information if needed. My small glimmer of hope is that this will magically fix itself with Chrome 69 or 70 since it is working in Canary... but I'd prefer to figure out what could be happening in case that doesn't happen.

推荐答案

在Chrome 68中尝试了访客配置文件后，两个抓取均有效.在对扩展进行故障排除之后，事实证明这是由uBlock Origin引起的-尽管该域已被列入白名单.当该扩展名被完全禁用时，两个提取都将再次起作用.

After trying a guest profile in Chrome 68 both fetches worked. After troubleshooting with extensions it turns out that this was being caused by uBlock Origin- despite that the domain is whitelisted. When that extension is disabled completely both fetches work again.

这篇关于Service Worker内的访存API仅对主页失败.重新加载时，它会提供缓存的脱机页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！