Javascript ServiceWorker阻止任何外部资源
我已经在我的一些webapp上实现了离线功能和其他一些与serviceworks相关的功能。现在,在我添加了一些外部嵌入式脚本之前,一切都很正常。我在我的webapp上添加了大约3个外部脚本。其中一些用于获取广告并在我的应用程序上显示,还有一些用于收集分析 但是,令我惊讶的是,当ServiceWorkers被启用并在控制台中抛出下面的错误时,每个外部脚本都失败了 我不知道为什么会这样?我必须在ServiceWorker中以某种方式缓存这些脚本吗?任何帮助都将不胜感激 这是我在应用程序中添加的ServiceWorker代码Javascript ServiceWorker阻止任何外部资源,javascript,service-worker,offline,offline-caching,Javascript,Service Worker,Offline,Offline Caching,我已经在我的一些webapp上实现了离线功能和其他一些与serviceworks相关的功能。现在,在我添加了一些外部嵌入式脚本之前,一切都很正常。我在我的webapp上添加了大约3个外部脚本。其中一些用于获取广告并在我的应用程序上显示,还有一些用于收集分析 但是,令我惊讶的是,当ServiceWorkers被启用并在控制台中抛出下面的错误时,每个外部脚本都失败了 我不知道为什么会这样?我必须在ServiceWorker中以某种方式缓存这些脚本吗?任何帮助都将不胜感激 这是我在应用程序中添加的S
importScripts('js/cache-polyfill.js');
var CACHE_VERSION = 'app-v18';
var CACHE_FILES = [
'/',
'index.html',
'js/app.js',
'js/jquery.min.js',
'js/bootstrap.min.js',
'css/bootstrap.min.css',
'css/style.css',
'favicon.ico',
'manifest.json',
'img/icon-48.png',
'img/icon-96.png',
'img/icon-144.png',
'img/icon-196.png'
];
self.addEventListener('install', function (event) {
event.waitUntil(
caches.open(CACHE_VERSION)
.then(function (cache) {
console.log('Opened cache');
return cache.addAll(CACHE_FILES);
})
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request).then(function(res){
if(res){
return res;
}
requestBackend(event);
})
)
});
function requestBackend(event){
var url = event.request.clone();
return fetch(url).then(function(res){
//if not a valid response send the error
if(!res || res.status !== 200 || res.type !== 'basic'){
return res;
}
var response = res.clone();
caches.open(CACHE_VERSION).then(function(cache){
cache.put(event.request, response);
});
return res;
})
}
self.addEventListener('activate', function (event) {
event.waitUntil(
caches.keys().then(function(keys){
return Promise.all(keys.map(function(key, i){
if(key !== CACHE_VERSION){
return caches.delete(keys[i]);
}
}))
})
)
});
下面是我为解决这个问题所做的 我尝试在
fetch
事件侦听器中检查应用程序是否联机或未使用API,如果它联机,则从服务器和ServiceWorker
提供响应。这样,当应用程序在线时,请求不会被阻止,从而解决了这个特殊问题
下面是我如何实现它的
self.addEventListener('fetch', function (event) {
let online = navigator.onLine;
if(!online){
event.respondWith(
caches.match(event.request).then(function(res){
if(res){
return res;
}
requestBackend(event);
})
)
}
});
您还可以在此处检查整个ServiceWorker脚本:我认为您忘记返回
requestBackend(事件)代码>