location.reload(true) 对于 PWA 无法正常工作

Question

我有一个 Web 应用程序，最近将其转换为 PWA，所以我对 service worker 和 pwa 一般不熟悉。希望有人已经解决了我所面临的问题，但我在 Whosebug 或 Google 上搜索了最近几天后仍未找到任何内容。

我的网络应用程序使用 AJAX 到 post 内容，成功后执行 location.reload(true) 以显示最新内容（或提供对新页面内容的访问）相同的滚动点。

然而，一旦我创建了 PWA，location.reload(true) 似乎正在加载缓存内容。有什么方法可以让它与服务器上的新内容一起使用吗？

我检查过这仅适用于 iOS PWA/iOS Safari 和 Android PWA/ Android Chrome。 location.reload 仍在为 iOS 的 Firefox/Chrome 移动网络和 Android 的 Firefox 工作（iOS Safari 和 Android Chrome在 PWA 转换之前表现正确）。

这是我的服务人员：

var cacheName = 'dev-pwa';
var filesToCache = [
  '/',
  'index.php',
  'style.css',
  'js/main.js'
];

/* Start the service worker and cache all of the app's content */
self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

/* Serve cached content when offline */
self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
  
  e.waitUntil(update(e.request));
  
});


function update(request) {
  return caches.open(cacheName).then(function (cache) {
    return fetch(request).then(function (response) {
      return cache.put(request, response);
    });
  });
}

Answer 1

您对 service worker 策略的实施存在一些缺陷。但别担心，这很容易解决。 :)

实际上，您正在做的是使用 cache falling back to the network strategy (with a slightly flawed* implementation), but rather what you want to use is either network falling back to the cache or cache then network（推荐）策略来提供内容。后者将立即从缓存中提供内容，然后在通过 n/w 调用获得最新响应后立即更新内容。这些链接已经包含示例代码片段，因此请避免在此处明确添加它们。

*您的 e.waitUntil(update(e.request)) 似乎正在更新缓存，但它只会反映在后续的提取尝试中，因为在第一遍中，您仍在提供最初缓存的内容并且并行更新缓存（请注意，这不是立即读取的内容，因为您已经通过 e.respondWith(caches.match(e.request).then(function(response) {return response || fetch(e.request); 读取了缓存内容，然后调用了“更新”方法来刷新缓存），这很好破坏目的并使您的缓存获取比预期的更慢，因为它现在必须等待网络调用完成并更新缓存，而缓存甚至没有用于当前的读取请求。

编辑：还可以考虑阅读上的 SO 线程。因此，除了如上所述更正策略外，您可能还必须使用一些变通方法来缓存 POST 内容。

location.reload(true) 对于 PWA 无法正常工作

location.reload(true) is not working correctly for PWA

javascript

progressive-web-apps