Service Worker w offline.html 备份页面 [英] Service Worker w offline.html Backup Page

问题描述

我无法显示 offline.html 页面.我不断收到 https://my-domain.com"的 FetchEvent 导致网络错误响应:重定向响应用于重定向模式不是跟随"的请求.

I can't get the offline.html page to display. I keep getting the The FetchEvent for "https://my-domain.com" resulted in a network error response: a redirected response was used for a request whose redirect mode is not "follow".

这是我的 service-worker.js 的片段，当网络不可用时，它应该返回 offline.html.

Here's the snippet of my service-worker.js which should return the offline.html when the network is unavailable.

self.addEventListener('fetch', function(event) {
     if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
        if(event.request.url.includes("my-domain.com")){
            console.log(event.request);
            event.respondWith(
                caches.match(event.request).then(function(resp) {
                    return resp || fetch(event.request).then(function(response) {
                        let responseClone = response.clone();
                        caches.open(CACHE_NAME).then(function(cache) {
                            cache.put(event.request, responseClone);
                        });
                        return response;
                    });
                }).catch(function() {
                    return caches.match("/offline.html");
                })
            );            
        }
    }
});

下面是我的网络请求的console.log(离线时页面刷新)

Below is the console.log of my network request (page refresh when offline)

Request {method: "GET", url: "https://my-domain.com", headers: Headers, destination: "unknown", referrer: "", …}
bodyUsed:false
cache:"no-cache"
credentials:"include"
destination:"unknown"
headers:Headers {}
integrity:""
keepalive:false
method:"GET"
mode:"navigate"
redirect:"manual"
referrer:""
referrerPolicy:"no-referrer-when-downgrade"
signal:AbortSignal {aborted: false, onabort: null}
url:"https://my-domain.com"
__proto__:Request

推荐答案

我得到了这个工作/找到了修复.它与浏览器中的重定向响应安全问题有关.来自 Chromium Bugs 博客，Response.redirected 和新的安全性限制.

I got this working / found the fix. It was related to a redirected response security issue in the browser. From the Chromium Bugs Blog, Response.redirected and a new security restriction.

解决方案:为避免此失败，您有两种选择.

Solution: To avoid this failure, you have 2 options.

1. 您可以更改安装事件处理程序以存储从 res.body 生成的响应:

1. You can either change the install event handler to store the response generated from res.body:

self.oninstall = evt => {
  evt.waitUntil(
      caches.open('cache_name')
        .then(cache => {
            return fetch('/')
              .then(response => cache.put('/', new Response(response.body));
          }));
};

或者通过将重定向模式设置为手动"来更改两个处理程序以存储非重定向响应:

Or change both handlers to store the non-redirected response by setting redirect mode to ‘manual’:

self.oninstall = function (evt) {
  evt.waitUntil(caches.open('cache_name').then(function (cache) {
    return Promise.all(['/', '/index.html'].map(function (url) {
      return fetch(new Request(url, { redirect: 'manual' })).then(function (res) {
        return cache.put(url, res);
      });
    }));
  }));
};
self.onfetch = function (evt) {
  var url = new URL(evt.request.url);
  if (url.pathname != '/' && url.pathname != '/index.html') return;
  evt.respondWith(caches.match(evt.request, { cacheName: 'cache_name' }));
};

这篇关于Service Worker w offline.html 备份页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！