为什么caches.match(event.request)无法识别带有get方法的fetch()请求？

Question

我正在构建一个具有离线支持的 PWA。我使用先缓存后网络的策略来缓存动态页面，并且一切都运行良好（即，缓存的页面是从缓存中提供的，并且在离线时也可以工作）。

现在我正在尝试对

fetch()

方法实施相同的策略。

当我使用

get

方法时，响应的行为与常规页面请求相同，并保存到动态缓存中，并且在后续请求中从缓存提供服务。离线时也可以使用。

但是当我使用

post

方法时，响应将保存在缓存中（我在开发工具缓存存储中看到它），但在后续请求中不会从那里提供响应。当我离线时，请求未得到解决，我们到达

catch

段并收到错误消息：

Oops. fetch failed.  SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

这是我的获取请求：

 fetch(url, {
                method: 'post', // <--- when I change this to get all works well
                headers: {
                    "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
                    },
                credentials: 'include'
            })
            .then(get_json) // get_json is defined below
            .then(function (data) {
                $("#expanded_" + u_id).html(data.view);
            })
            .catch(function (error) {
                console.log('Oops. fetch failed. ', error);
            });

x

function get_json(response) {
   return response.json();
}

如果重要的话，我应该说我仍在本地主机上。

我的结论是，当通过

caches.match(event.request)

方法发送获取请求时，我的 Service Worker 中的

post

无法识别该请求，只能通过

get

发送。

那么 - 是否有针对

post

获取的特定配置？我需要改变服务人员处理请求的方式吗？任何指点将不胜感激！

Answer 1

POST 不会触发 FETCH 事件。 供你参考。相关帖子如下： Service Worker 可以缓存 POST 请求吗？