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.
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.
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);
});
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:
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';
And in my site's JavaScript file, it sends additional pages to the cache as needed.
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.