javascript - JS Service Worker 在我不希望它运行的页面上运行

Question

我刚开始尝试使用服务工作线程从我的网络服务器缓存文件。我正在使用谷歌建议的确切代码 HERE .我将 Service Worker 脚本上传到我的站点根文件夹，并在我希望 Service Worker 缓存文件的页面中包含指向它的链接。

我的印象是 service worker 只缓存 urlsToCache 变量中的文件，并且 service worker 只会在调用(链接到)service worker 脚本的页面上工作。

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

Uncaught (in promise) TypeError: Request method 'POST' is unsupported

at service-worker.js:40

at anonymous

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

我的 AJAX 调用指向的 url 也不包含指向我的 service worker 脚本的链接。

所以我的问题是两个部分。

1.) 有没有人理解我收到的错误消息并知道如何修复它？

2.) 为什么我的 service worker 脚本在一开始就没有链接到脚本的页面上运行？

这是我正在使用的完整服务 worker 脚本:

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;
           }
       );
       })
   );
});

Answer 1

一旦安装了 service worker，它就会独立于您的网站运行，这意味着所有请求都将通过 fetch-eventhandler，您的 service worker 还控制其他页面。

不仅 urlsToCache 被缓存，service worker 还会在 fetch-eventhandler 中获取响应后立即缓存响应(第 38-41 行) 这也引出了您第一个问题的答案。您的代码独立于 http 方法缓存所有响应，但正如错误消息所说，无法缓存 http POST 响应。