繁体   English   中英

我不想在页面上运行JS Service Worker

[英]JS Service Worker running on pages I don't want it to run on

我刚开始尝试使用服务人员从Web服务器缓存文件。 我使用,谷歌提出确切的代码这里 我将服务工作者脚本上载到我的站点根文件夹,并在我要服务工作者缓存文件的页面中包含了指向该脚本的链接。

我的印象是,服务工作者仅缓存urlsToCache变量中的文件,并且服务工作者只能在调用(链接到)服务工作者脚本的页面上工作。

我的网站上有几个页面,我不希望服务人员对其进行任何操作。 但是,似乎仍在以某种方式引用它。 有问题的页面根本不包含指向我的服务工作者脚本的链接。 我注意到,每次使用POST方法运行AJAX命令时,我的控制台都会收到以下错误消息:

未捕获(承诺)TypeError:请求方法“ POST”不受支持

在service-worker.js:40

在匿名

第40行是以下代码段: cache.put(event.request, responseToCache);

我的AJAX调用指向的网址也不包含指向我的服务工作者脚本的链接。

所以我的问题是两个伙伴。

1.)是否有人了解我收到的错误消息并知道如何解决?

2.)为什么我的服务工作者脚本在最初根本没有链接到脚本的页面上运行?

这是我正在使用的完整服务工作程序脚本:

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
    'assets/scripts/script1.js',
    'assets/scripts/script2.js',
    'assets/scripts/script3.js'
];

self.addEventListener('install', function(event) {
   // Perform install steps
     event.waitUntil(
         caches.open(CACHE_NAME)
         .then(function(cache) {
              console.log('Opened cache');
              return cache.addAll(urlsToCache);
         })
     );
});


self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
        .then(function(response) {
            if (response) {
                return response;
            }
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
            function(response) {
            // Check if we received a valid response
                if(!response || response.status !== 200 || response.type !== 'basic') {
                     return response;
                }

                var responseToCache = response.clone();

                caches.open(CACHE_NAME)
                .then(function(cache) {
                     cache.put(event.request, responseToCache);
                });

                return response;
           }
       );
       })
   );
});

一旦安装了服务程序,服务程序将独立于您的网站运行,这意味着所有请求都将通过fetch-eventhandler进行处理,您的服务程序也将控制其他页面。

不仅会缓存urlsToCache,而且一旦在fetch-eventhandler中将响应提取出来,服务工作人员也会即时缓存响应(第38-41行)。这也为您的第一个问题提供了答案。 您的代码将缓存所有响应,而与http方法无关,但是错误消息表明无法对http POST响应进行缓存。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM