Service Worker FechtEvent.respondWith response is null on iOS 12.1 Safari
up vote
0
down vote
favorite
I can download the website using the service Worker on Android Chrome, macOS Chrome as well as Safari and on Windows Chrome for offline use. When I try to download the website to iOS 12.1 Safari it works first. But when I close Safari, go offline and reopen Safari, I get the following error message:
Safari can't open the Site.
Error: "FetchEvent.respondWith received an error: TypeError: There
seems to be no connection to the Internet."
==== AND in the console ====
FetchEvent.respondWith received an error: Returned response is null
Below you can see the scripts in text form. Unfortunately, I can hardly report anything about the problem, because I don't understand it and hope for some knowledgeable people :)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Offline App</h1>
</body>
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then(function (registration) {
console.log('Service Worker Registered');
});
}
</script>
</html>
sw.js
/*
Copyright 2014 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
importScripts('cache-polyfill.js');
var CACHE_VERSION = 1;
var CURRENT_CACHES = {
prefetch: 'prefetch-cache-v' + CACHE_VERSION
};
self.addEventListener('install', function(event) {
var now = Date.now();
var urlsToPrefetch = [
'/pwa/index.html'
];
console.log('Handling install event. Resources to prefetch:', urlsToPrefetch);
event.waitUntil(
caches.open(CURRENT_CACHES.prefetch).then(function(cache) {
var cachePromises = urlsToPrefetch.map(function(urlToPrefetch) {
var url = new URL(urlToPrefetch, location.href);
url.search += (url.search ? '&' : '?') + 'cache-bust=' + now;
var request = new Request(url, {mode: 'no-cors'});
return fetch(request).then(function(response) {
if (response.status >= 400) {
throw new Error('request for ' + urlToPrefetch +
' failed with status ' + response.statusText);
}
return cache.put(urlToPrefetch, response);
}).catch(function(error) {
console.error('Not caching ' + urlToPrefetch + ' due to ' + error);
});
});
return Promise.all(cachePromises).then(function() {
console.log('Pre-fetching complete.');
});
}).catch(function(error) {
console.error('Pre-fetching failed:', error);
})
);
});
self.addEventListener('activate', function(event) {
var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
return CURRENT_CACHES[key];
});
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (expectedCacheNames.indexOf(cacheName) === -1) {
console.log('Deleting out of date cache:', cacheName);
return caches.delete(cacheName);
}
})
);
})
);
});
self.addEventListener('fetch', function(event) {
if (!navigator.onLine) {
event.respondWith(
caches.match(event.request).then(function (response) {
if (response) {
return response;
}
console.log('No response found in cache. About to fetch from network...');
return fetch(event.request).then(function (response) {
console.log('Response from network is:', response);
return response;
}).catch(function (error) {
console.error('Fetching failed:', error);
throw error;
});
})
);
}
});
ios safari service-worker
asked Nov 22 at 12:36
Dieter Information
386
add a comment |
up vote
0
down vote
favorite
I can download the website using the service Worker on Android Chrome, macOS Chrome as well as Safari and on Windows Chrome for offline use. When I try to download the website to iOS 12.1 Safari it works first. But when I close Safari, go offline and reopen Safari, I get the following error message:
Safari can't open the Site.
Error: "FetchEvent.respondWith received an error: TypeError: There
seems to be no connection to the Internet."
==== AND in the console ====
FetchEvent.respondWith received an error: Returned response is null
Below you can see the scripts in text form. Unfortunately, I can hardly report anything about the problem, because I don't understand it and hope for some knowledgeable people :)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Offline App</h1>
</body>
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then(function (registration) {
console.log('Service Worker Registered');
});
}
</script>
</html>
sw.js
/*
Copyright 2014 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
importScripts('cache-polyfill.js');
var CACHE_VERSION = 1;
var CURRENT_CACHES = {
prefetch: 'prefetch-cache-v' + CACHE_VERSION
};
self.addEventListener('install', function(event) {
var now = Date.now();
var urlsToPrefetch = [
'/pwa/index.html'
];
console.log('Handling install event. Resources to prefetch:', urlsToPrefetch);
event.waitUntil(
caches.open(CURRENT_CACHES.prefetch).then(function(cache) {
var cachePromises = urlsToPrefetch.map(function(urlToPrefetch) {
var url = new URL(urlToPrefetch, location.href);
url.search += (url.search ? '&' : '?') + 'cache-bust=' + now;
var request = new Request(url, {mode: 'no-cors'});
return fetch(request).then(function(response) {
if (response.status >= 400) {
throw new Error('request for ' + urlToPrefetch +
' failed with status ' + response.statusText);
}
return cache.put(urlToPrefetch, response);
}).catch(function(error) {
console.error('Not caching ' + urlToPrefetch + ' due to ' + error);
});
});
return Promise.all(cachePromises).then(function() {
console.log('Pre-fetching complete.');
});
}).catch(function(error) {
console.error('Pre-fetching failed:', error);
})
);
});
self.addEventListener('activate', function(event) {
var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
return CURRENT_CACHES[key];
});
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (expectedCacheNames.indexOf(cacheName) === -1) {
console.log('Deleting out of date cache:', cacheName);
return caches.delete(cacheName);
}
})
);
})
);
});
self.addEventListener('fetch', function(event) {
if (!navigator.onLine) {
event.respondWith(
caches.match(event.request).then(function (response) {
if (response) {
return response;
}
console.log('No response found in cache. About to fetch from network...');
return fetch(event.request).then(function (response) {
console.log('Response from network is:', response);
return response;
}).catch(function (error) {
console.error('Fetching failed:', error);
throw error;
});
})
);
}
});
ios safari service-worker
asked Nov 22 at 12:36
Dieter Information
386
I have tested the script on several iphones (12.0, 12.0.1 (16A404) as well as 12.1(16B92)) And on all of them I could download the web app and open it offline again. I currently suspect that on iphones that have the following settings enabled the PWA has problems finding the cache again: 1. Don't allow cache and 2. Restricted iphone (parental control) After I allowed the cache to work, it still didn't work. I couldn't disable the restricted mode because the owner doesn't know the code anymore.
– Dieter Information
Nov 23 at 12:59
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I can download the website using the service Worker on Android Chrome, macOS Chrome as well as Safari and on Windows Chrome for offline use. When I try to download the website to iOS 12.1 Safari it works first. But when I close Safari, go offline and reopen Safari, I get the following error message:
Safari can't open the Site.
Error: "FetchEvent.respondWith received an error: TypeError: There
seems to be no connection to the Internet."
==== AND in the console ====
FetchEvent.respondWith received an error: Returned response is null
Below you can see the scripts in text form. Unfortunately, I can hardly report anything about the problem, because I don't understand it and hope for some knowledgeable people :)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Offline App</h1>
</body>
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then(function (registration) {
console.log('Service Worker Registered');
});
}
</script>
</html>
sw.js
/*
Copyright 2014 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
importScripts('cache-polyfill.js');
var CACHE_VERSION = 1;
var CURRENT_CACHES = {
prefetch: 'prefetch-cache-v' + CACHE_VERSION
};
self.addEventListener('install', function(event) {
var now = Date.now();
var urlsToPrefetch = [
'/pwa/index.html'
];
console.log('Handling install event. Resources to prefetch:', urlsToPrefetch);
event.waitUntil(
caches.open(CURRENT_CACHES.prefetch).then(function(cache) {
var cachePromises = urlsToPrefetch.map(function(urlToPrefetch) {
var url = new URL(urlToPrefetch, location.href);
url.search += (url.search ? '&' : '?') + 'cache-bust=' + now;
var request = new Request(url, {mode: 'no-cors'});
return fetch(request).then(function(response) {
if (response.status >= 400) {
throw new Error('request for ' + urlToPrefetch +
' failed with status ' + response.statusText);
}
return cache.put(urlToPrefetch, response);
}).catch(function(error) {
console.error('Not caching ' + urlToPrefetch + ' due to ' + error);
});
});
return Promise.all(cachePromises).then(function() {
console.log('Pre-fetching complete.');
});
}).catch(function(error) {
console.error('Pre-fetching failed:', error);
})
);
});
self.addEventListener('activate', function(event) {
var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
return CURRENT_CACHES[key];
});
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (expectedCacheNames.indexOf(cacheName) === -1) {
console.log('Deleting out of date cache:', cacheName);
return caches.delete(cacheName);
}
})
);
})
);
});
self.addEventListener('fetch', function(event) {
if (!navigator.onLine) {
event.respondWith(
caches.match(event.request).then(function (response) {
if (response) {
return response;
}
console.log('No response found in cache. About to fetch from network...');
return fetch(event.request).then(function (response) {
console.log('Response from network is:', response);
return response;
}).catch(function (error) {
console.error('Fetching failed:', error);
throw error;
});
})
);
}
});
ios safari service-worker
asked Nov 22 at 12:36
Dieter Information
386
I can download the website using the service Worker on Android Chrome, macOS Chrome as well as Safari and on Windows Chrome for offline use. When I try to download the website to iOS 12.1 Safari it works first. But when I close Safari, go offline and reopen Safari, I get the following error message:
Safari can't open the Site.
Error: "FetchEvent.respondWith received an error: TypeError: There
seems to be no connection to the Internet."
==== AND in the console ====
FetchEvent.respondWith received an error: Returned response is null
Below you can see the scripts in text form. Unfortunately, I can hardly report anything about the problem, because I don't understand it and hope for some knowledgeable people :)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Offline App</h1>
</body>
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then(function (registration) {
console.log('Service Worker Registered');
});
}
</script>
</html>
sw.js
/*
Copyright 2014 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
importScripts('cache-polyfill.js');
var CACHE_VERSION = 1;
var CURRENT_CACHES = {
prefetch: 'prefetch-cache-v' + CACHE_VERSION
};
self.addEventListener('install', function(event) {
var now = Date.now();
var urlsToPrefetch = [
'/pwa/index.html'
];
console.log('Handling install event. Resources to prefetch:', urlsToPrefetch);
event.waitUntil(
caches.open(CURRENT_CACHES.prefetch).then(function(cache) {
var cachePromises = urlsToPrefetch.map(function(urlToPrefetch) {
var url = new URL(urlToPrefetch, location.href);
url.search += (url.search ? '&' : '?') + 'cache-bust=' + now;
var request = new Request(url, {mode: 'no-cors'});
return fetch(request).then(function(response) {
if (response.status >= 400) {
throw new Error('request for ' + urlToPrefetch +
' failed with status ' + response.statusText);
}
return cache.put(urlToPrefetch, response);
}).catch(function(error) {
console.error('Not caching ' + urlToPrefetch + ' due to ' + error);
});
});
return Promise.all(cachePromises).then(function() {
console.log('Pre-fetching complete.');
});
}).catch(function(error) {
console.error('Pre-fetching failed:', error);
})
);
});
self.addEventListener('activate', function(event) {
var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
return CURRENT_CACHES[key];
});
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (expectedCacheNames.indexOf(cacheName) === -1) {
console.log('Deleting out of date cache:', cacheName);
return caches.delete(cacheName);
}
})
);
})
);
});
self.addEventListener('fetch', function(event) {
if (!navigator.onLine) {
event.respondWith(
caches.match(event.request).then(function (response) {
if (response) {
return response;
}
console.log('No response found in cache. About to fetch from network...');
return fetch(event.request).then(function (response) {
console.log('Response from network is:', response);
return response;
}).catch(function (error) {
console.error('Fetching failed:', error);
throw error;
});
})
);
}
});
ios safari service-worker
ios safari service-worker
asked Nov 22 at 12:36
Dieter Information
386
asked Nov 22 at 12:36
Dieter Information
386
edited 2 days ago
asked Nov 22 at 12:36
Dieter Information
386
asked Nov 22 at 12:36
Dieter Information
386
asked Nov 22 at 12:36
Dieter Information
386
386
I have tested the script on several iphones (12.0, 12.0.1 (16A404) as well as 12.1(16B92)) And on all of them I could download the web app and open it offline again. I currently suspect that on iphones that have the following settings enabled the PWA has problems finding the cache again: 1. Don't allow cache and 2. Restricted iphone (parental control) After I allowed the cache to work, it still didn't work. I couldn't disable the restricted mode because the owner doesn't know the code anymore.
– Dieter Information
Nov 23 at 12:59
add a comment |
I have tested the script on several iphones (12.0, 12.0.1 (16A404) as well as 12.1(16B92)) And on all of them I could download the web app and open it offline again. I currently suspect that on iphones that have the following settings enabled the PWA has problems finding the cache again: 1. Don't allow cache and 2. Restricted iphone (parental control) After I allowed the cache to work, it still didn't work. I couldn't disable the restricted mode because the owner doesn't know the code anymore.
– Dieter Information
Nov 23 at 12:59
I have tested the script on several iphones (12.0, 12.0.1 (16A404) as well as 12.1(16B92)) And on all of them I could download the web app and open it offline again. I currently suspect that on iphones that have the following settings enabled the PWA has problems finding the cache again: 1. Don't allow cache and 2. Restricted iphone (parental control) After I allowed the cache to work, it still didn't work. I couldn't disable the restricted mode because the owner doesn't know the code anymore.
– Dieter Information
Nov 23 at 12:59
I have tested the script on several iphones (12.0, 12.0.1 (16A404) as well as 12.1(16B92)) And on all of them I could download the web app and open it offline again. I currently suspect that on iphones that have the following settings enabled the PWA has problems finding the cache again: 1. Don't allow cache and 2. Restricted iphone (parental control) After I allowed the cache to work, it still didn't work. I couldn't disable the restricted mode because the owner doesn't know the code anymore.
– Dieter Information
Nov 23 at 12:59
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Sorry I don't have the answer yet but I got the exact same issue with my web app and have spent hours on it. So I would like to post all my findings here.
Steps to check if web app can work offline in iOS 12
- visit the website with Safari (iOS 12 or 12.1)
- close the website tab in Safari
- push home button on iPhone to set Safari to background
- push the iPhone power button to turn off screen
- push the iPhone power button again to wake up the phone
- turn off all the network connection from the iPhone control center (both wifi and cellular)
- open Safari, visit website again --> it should work in offline mode.
iOS 12 vs. iOS 11.3
It seems like this issue was introduced from iOS 12. My web app (https://viewsbyme.com) worked offline perfectly on iOS 11.3, in which version mobile Safari first introduced Service Worker, but got responses from iOS 12 and iOS 12.1 when offline:
Safari cannot open the page. The error was: “FetchEvent.respondWith received an error: TypeError: The Internet connection appears to be offline.”.
Not sure if it is related to this bug report (it says "RESOLVED FIXED" but actually not yet if you scroll down to the bottom of the thread):
https://bugs.webkit.org/show_bug.cgi?id=190269
Examples of working and not-working web apps
As examples, these 2 PWAs are able to work offline in iOS 12:
https://simpleoffline.website
https://www.currency-calc.com
And these 2 PWA cannot work offline in iOS 12 (but they work perfectly on Chrome on other platforms):
https://2048-opera-pwa.surge.sh
https://voice-memos.appspot.com
It seems straight forward by comparing the Service Worker scripts between these PWAs and find out what make them work vs. not work. But I still haven't figure out the delta yet.
answered Nov 22 at 20:45
agrul
13
Your two working example for pwa doesn't work on my iphone 7 with iOs 12.1! Same error as in my example.
– Dieter Information
Nov 23 at 11:16
@Dieter They work on my iPhone 6s iOS 12 Safari. I saw your new comment under your post above - where is the cache setting you were referring to?
– agrul
Nov 23 at 19:06
Sorry for the late answer. I also made a mistake it's not a cache but a cookie setting. You go to Settings > Safari > "Block all Cookies" and "Delete history and website data is grayed out". I think the latter is grayed out because the iphone i tested with had a restricted mode enabled. I assume that the two functions in combination make it difficult for the service worker to function.
– Dieter Information
Nov 28 at 9:17
@Dieter no worries. I am testing on my own iPhone so I can change those settings. I do not block cookies but it still doesn't work. I created a separate post stackoverflow.com/questions/53439379/…
– agrul
Nov 28 at 10:25
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431195%2fservice-worker-fechtevent-respondwith-response-is-null-on-ios-12-1-safari%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Sorry I don't have the answer yet but I got the exact same issue with my web app and have spent hours on it. So I would like to post all my findings here.
Steps to check if web app can work offline in iOS 12
- visit the website with Safari (iOS 12 or 12.1)
- close the website tab in Safari
- push home button on iPhone to set Safari to background
- push the iPhone power button to turn off screen
- push the iPhone power button again to wake up the phone
- turn off all the network connection from the iPhone control center (both wifi and cellular)
- open Safari, visit website again --> it should work in offline mode.
iOS 12 vs. iOS 11.3
It seems like this issue was introduced from iOS 12. My web app (https://viewsbyme.com) worked offline perfectly on iOS 11.3, in which version mobile Safari first introduced Service Worker, but got responses from iOS 12 and iOS 12.1 when offline:
Safari cannot open the page. The error was: “FetchEvent.respondWith received an error: TypeError: The Internet connection appears to be offline.”.
Not sure if it is related to this bug report (it says "RESOLVED FIXED" but actually not yet if you scroll down to the bottom of the thread):
https://bugs.webkit.org/show_bug.cgi?id=190269
Examples of working and not-working web apps
As examples, these 2 PWAs are able to work offline in iOS 12:
https://simpleoffline.website
https://www.currency-calc.com
And these 2 PWA cannot work offline in iOS 12 (but they work perfectly on Chrome on other platforms):
https://2048-opera-pwa.surge.sh
https://voice-memos.appspot.com
It seems straight forward by comparing the Service Worker scripts between these PWAs and find out what make them work vs. not work. But I still haven't figure out the delta yet.
answered Nov 22 at 20:45
agrul
13
Your two working example for pwa doesn't work on my iphone 7 with iOs 12.1! Same error as in my example.
– Dieter Information
Nov 23 at 11:16
@Dieter They work on my iPhone 6s iOS 12 Safari. I saw your new comment under your post above - where is the cache setting you were referring to?
– agrul
Nov 23 at 19:06
Sorry for the late answer. I also made a mistake it's not a cache but a cookie setting. You go to Settings > Safari > "Block all Cookies" and "Delete history and website data is grayed out". I think the latter is grayed out because the iphone i tested with had a restricted mode enabled. I assume that the two functions in combination make it difficult for the service worker to function.
– Dieter Information
Nov 28 at 9:17
@Dieter no worries. I am testing on my own iPhone so I can change those settings. I do not block cookies but it still doesn't work. I created a separate post stackoverflow.com/questions/53439379/…
– agrul
Nov 28 at 10:25
add a comment |
up vote
0
down vote
Sorry I don't have the answer yet but I got the exact same issue with my web app and have spent hours on it. So I would like to post all my findings here.
Steps to check if web app can work offline in iOS 12
- visit the website with Safari (iOS 12 or 12.1)
- close the website tab in Safari
- push home button on iPhone to set Safari to background
- push the iPhone power button to turn off screen
- push the iPhone power button again to wake up the phone
- turn off all the network connection from the iPhone control center (both wifi and cellular)
- open Safari, visit website again --> it should work in offline mode.
iOS 12 vs. iOS 11.3
It seems like this issue was introduced from iOS 12. My web app (https://viewsbyme.com) worked offline perfectly on iOS 11.3, in which version mobile Safari first introduced Service Worker, but got responses from iOS 12 and iOS 12.1 when offline:
Safari cannot open the page. The error was: “FetchEvent.respondWith received an error: TypeError: The Internet connection appears to be offline.”.
Not sure if it is related to this bug report (it says "RESOLVED FIXED" but actually not yet if you scroll down to the bottom of the thread):
https://bugs.webkit.org/show_bug.cgi?id=190269
Examples of working and not-working web apps
As examples, these 2 PWAs are able to work offline in iOS 12:
https://simpleoffline.website
https://www.currency-calc.com
And these 2 PWA cannot work offline in iOS 12 (but they work perfectly on Chrome on other platforms):
https://2048-opera-pwa.surge.sh
https://voice-memos.appspot.com
It seems straight forward by comparing the Service Worker scripts between these PWAs and find out what make them work vs. not work. But I still haven't figure out the delta yet.
answered Nov 22 at 20:45
agrul
13
Your two working example for pwa doesn't work on my iphone 7 with iOs 12.1! Same error as in my example.
– Dieter Information
Nov 23 at 11:16
@Dieter They work on my iPhone 6s iOS 12 Safari. I saw your new comment under your post above - where is the cache setting you were referring to?
– agrul
Nov 23 at 19:06
Sorry for the late answer. I also made a mistake it's not a cache but a cookie setting. You go to Settings > Safari > "Block all Cookies" and "Delete history and website data is grayed out". I think the latter is grayed out because the iphone i tested with had a restricted mode enabled. I assume that the two functions in combination make it difficult for the service worker to function.
– Dieter Information
Nov 28 at 9:17
@Dieter no worries. I am testing on my own iPhone so I can change those settings. I do not block cookies but it still doesn't work. I created a separate post stackoverflow.com/questions/53439379/…
– agrul
Nov 28 at 10:25
add a comment |
up vote
0
down vote
up vote
0
down vote
Sorry I don't have the answer yet but I got the exact same issue with my web app and have spent hours on it. So I would like to post all my findings here.
Steps to check if web app can work offline in iOS 12
- visit the website with Safari (iOS 12 or 12.1)
- close the website tab in Safari
- push home button on iPhone to set Safari to background
- push the iPhone power button to turn off screen
- push the iPhone power button again to wake up the phone
- turn off all the network connection from the iPhone control center (both wifi and cellular)
- open Safari, visit website again --> it should work in offline mode.
iOS 12 vs. iOS 11.3
It seems like this issue was introduced from iOS 12. My web app (https://viewsbyme.com) worked offline perfectly on iOS 11.3, in which version mobile Safari first introduced Service Worker, but got responses from iOS 12 and iOS 12.1 when offline:
Safari cannot open the page. The error was: “FetchEvent.respondWith received an error: TypeError: The Internet connection appears to be offline.”.
Not sure if it is related to this bug report (it says "RESOLVED FIXED" but actually not yet if you scroll down to the bottom of the thread):
https://bugs.webkit.org/show_bug.cgi?id=190269
Examples of working and not-working web apps
As examples, these 2 PWAs are able to work offline in iOS 12:
https://simpleoffline.website
https://www.currency-calc.com
And these 2 PWA cannot work offline in iOS 12 (but they work perfectly on Chrome on other platforms):
https://2048-opera-pwa.surge.sh
https://voice-memos.appspot.com
It seems straight forward by comparing the Service Worker scripts between these PWAs and find out what make them work vs. not work. But I still haven't figure out the delta yet.
answered Nov 22 at 20:45
agrul
13
Sorry I don't have the answer yet but I got the exact same issue with my web app and have spent hours on it. So I would like to post all my findings here.
Steps to check if web app can work offline in iOS 12
- visit the website with Safari (iOS 12 or 12.1)
- close the website tab in Safari
- push home button on iPhone to set Safari to background
- push the iPhone power button to turn off screen
- push the iPhone power button again to wake up the phone
- turn off all the network connection from the iPhone control center (both wifi and cellular)
- open Safari, visit website again --> it should work in offline mode.
iOS 12 vs. iOS 11.3
It seems like this issue was introduced from iOS 12. My web app (https://viewsbyme.com) worked offline perfectly on iOS 11.3, in which version mobile Safari first introduced Service Worker, but got responses from iOS 12 and iOS 12.1 when offline:
Safari cannot open the page. The error was: “FetchEvent.respondWith received an error: TypeError: The Internet connection appears to be offline.”.
Not sure if it is related to this bug report (it says "RESOLVED FIXED" but actually not yet if you scroll down to the bottom of the thread):
https://bugs.webkit.org/show_bug.cgi?id=190269
Examples of working and not-working web apps
As examples, these 2 PWAs are able to work offline in iOS 12:
https://simpleoffline.website
https://www.currency-calc.com
And these 2 PWA cannot work offline in iOS 12 (but they work perfectly on Chrome on other platforms):
https://2048-opera-pwa.surge.sh
https://voice-memos.appspot.com
It seems straight forward by comparing the Service Worker scripts between these PWAs and find out what make them work vs. not work. But I still haven't figure out the delta yet.
answered Nov 22 at 20:45
agrul
13
edited Nov 22 at 23:51
answered Nov 22 at 20:45
agrul
13
answered Nov 22 at 20:45
agrul
13
answered Nov 22 at 20:45
agrul
13
13
Your two working example for pwa doesn't work on my iphone 7 with iOs 12.1! Same error as in my example.
– Dieter Information
Nov 23 at 11:16
@Dieter They work on my iPhone 6s iOS 12 Safari. I saw your new comment under your post above - where is the cache setting you were referring to?
– agrul
Nov 23 at 19:06
Sorry for the late answer. I also made a mistake it's not a cache but a cookie setting. You go to Settings > Safari > "Block all Cookies" and "Delete history and website data is grayed out". I think the latter is grayed out because the iphone i tested with had a restricted mode enabled. I assume that the two functions in combination make it difficult for the service worker to function.
– Dieter Information
Nov 28 at 9:17
@Dieter no worries. I am testing on my own iPhone so I can change those settings. I do not block cookies but it still doesn't work. I created a separate post stackoverflow.com/questions/53439379/…
– agrul
Nov 28 at 10:25
add a comment |
Your two working example for pwa doesn't work on my iphone 7 with iOs 12.1! Same error as in my example.
– Dieter Information
Nov 23 at 11:16
@Dieter They work on my iPhone 6s iOS 12 Safari. I saw your new comment under your post above - where is the cache setting you were referring to?
– agrul
Nov 23 at 19:06
Sorry for the late answer. I also made a mistake it's not a cache but a cookie setting. You go to Settings > Safari > "Block all Cookies" and "Delete history and website data is grayed out". I think the latter is grayed out because the iphone i tested with had a restricted mode enabled. I assume that the two functions in combination make it difficult for the service worker to function.
– Dieter Information
Nov 28 at 9:17
@Dieter no worries. I am testing on my own iPhone so I can change those settings. I do not block cookies but it still doesn't work. I created a separate post stackoverflow.com/questions/53439379/…
– agrul
Nov 28 at 10:25
Your two working example for pwa doesn't work on my iphone 7 with iOs 12.1! Same error as in my example.
– Dieter Information
Nov 23 at 11:16
Your two working example for pwa doesn't work on my iphone 7 with iOs 12.1! Same error as in my example.
– Dieter Information
Nov 23 at 11:16
@Dieter They work on my iPhone 6s iOS 12 Safari. I saw your new comment under your post above - where is the cache setting you were referring to?
– agrul
Nov 23 at 19:06
@Dieter They work on my iPhone 6s iOS 12 Safari. I saw your new comment under your post above - where is the cache setting you were referring to?
– agrul
Nov 23 at 19:06
Sorry for the late answer. I also made a mistake it's not a cache but a cookie setting. You go to Settings > Safari > "Block all Cookies" and "Delete history and website data is grayed out". I think the latter is grayed out because the iphone i tested with had a restricted mode enabled. I assume that the two functions in combination make it difficult for the service worker to function.
– Dieter Information
Nov 28 at 9:17
Sorry for the late answer. I also made a mistake it's not a cache but a cookie setting. You go to Settings > Safari > "Block all Cookies" and "Delete history and website data is grayed out". I think the latter is grayed out because the iphone i tested with had a restricted mode enabled. I assume that the two functions in combination make it difficult for the service worker to function.
– Dieter Information
Nov 28 at 9:17
@Dieter no worries. I am testing on my own iPhone so I can change those settings. I do not block cookies but it still doesn't work. I created a separate post stackoverflow.com/questions/53439379/…
– agrul
Nov 28 at 10:25
@Dieter no worries. I am testing on my own iPhone so I can change those settings. I do not block cookies but it still doesn't work. I created a separate post stackoverflow.com/questions/53439379/…
– agrul
Nov 28 at 10:25
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431195%2fservice-worker-fechtevent-respondwith-response-is-null-on-ios-12-1-safari%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I have tested the script on several iphones (12.0, 12.0.1 (16A404) as well as 12.1(16B92)) And on all of them I could download the web app and open it offline again. I currently suspect that on iphones that have the following settings enabled the PWA has problems finding the cache again: 1. Don't allow cache and 2. Restricted iphone (parental control) After I allowed the cache to work, it still didn't work. I couldn't disable the restricted mode because the owner doesn't know the code anymore.
– Dieter Information
Nov 23 at 12:59