我可以在 Android Chrome、macOS Chrome 以及 Safari 和 Windows Chrome 上使用 service Worker 下载网站以供离线使用。当我尝试将网站下载到 iOS 12.1 Safari 时，它首先起作用。但是当我关闭 Safari、离线并重新打开 Safari 时，我收到以下错误消息：
Safari 无法打开该网站。
错误：“FetchEvent.respondWith 收到错误：TypeError：有 似乎没有连接到互联网。”
==== 并且在控制台中 ====
FetchEvent.respondWith 收到错误：返回的响应为空
下面您可以看到文本形式的脚本。不幸的是，我几乎无法报告有关该问题的任何内容，因为我不明白它并希望一些有知识的人:)
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;
});
})
);
}
});
我遇到了类似的问题，以下步骤为我解决了：
清除网络缓存后，它对我来说工作正常......