Javascript ServiceWorker阻止任何外部资源

Javascript ServiceWorker阻止任何外部资源,javascript,service-worker,offline,offline-caching,Javascript,Service Worker,Offline,Offline Caching,我已经在我的一些webapp上实现了离线功能和其他一些与serviceworks相关的功能。现在,在我添加了一些外部嵌入式脚本之前,一切都很正常。我在我的webapp上添加了大约3个外部脚本。其中一些用于获取广告并在我的应用程序上显示,还有一些用于收集分析 但是,令我惊讶的是,当ServiceWorkers被启用并在控制台中抛出下面的错误时,每个外部脚本都失败了 我不知道为什么会这样?我必须在ServiceWorker中以某种方式缓存这些脚本吗?任何帮助都将不胜感激 这是我在应用程序中添加的S

我已经在我的一些webapp上实现了离线功能和其他一些与serviceworks相关的功能。现在,在我添加了一些外部嵌入式脚本之前,一切都很正常。我在我的webapp上添加了大约3个外部脚本。其中一些用于获取广告并在我的应用程序上显示,还有一些用于收集分析

但是,令我惊讶的是,当ServiceWorkers被启用并在控制台中抛出下面的错误时,每个外部脚本都失败了

我不知道为什么会这样?我必须在ServiceWorker中以某种方式缓存这些脚本吗?任何帮助都将不胜感激

这是我在应用程序中添加的ServiceWorker代码

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(事件)