Question

我刚开始尝试使用服务工作者来缓存来自我的Web服务器的文件。我使用谷歌建议的确切代码HERE。我将服务工作者脚本上传到我的站点根文件夹，并在我希望服务工作者缓存文件的页面中包含了一个链接。

我的印象是服务工作者只缓存urlsToCache变量中的文件，而服务工作者只能在调用服务工作者脚本（链接到）的页面上工作。

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

未捕获（承诺）TypeError：请求方法＆＃39; POST＆＃39;不受支持

at service-worker.js：40

匿名

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

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

所以我的问题是两个人。

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

Answer 1

安装服务工作者后，它独立于您的网站运行，意味着所有请求都将通过fetch-eventhandler，您的服务工作者也会控制其他页面。

不仅urlsToCache被缓存，服务工作者一旦在fetch-eventhandler中获取响应就会立即缓存响应（第38-41行）这也是第一个问题的答案。您的代码缓存所有响应独立于http方法，但正如错误消息所示，http POST响应无法缓存。

在我不希望它在

1 个答案: