Question

我正在开发PWA，并且我尝试使用工作箱来管理服务工作者和资产缓存。

在我的PWA中，如果设备在线，我必须显示所有较新的图像，如果没有，则必须显示缓存中的图像。

当我尝试实现它时，我看到图像上的staleWhileRevalidate方法在每个图像的页面中只调用一次，如果我尝试多次刷新也是如此。我需要关闭网页，当我重新打开它时，图像会正确更新。它以这种方式工作是正常的吗？

当我尝试使用localhost时，每次重新加载页面时都会调用staleWhileRevalidate，但是当我在远程服务器上加载网站时，应用程序不再以这种方式工作。

service-worker.js：

importScripts('workbox-sw.prod.v2.0.0.js');
const workboxSW = new WorkboxSW();
var CACHE_NAME = 'my-cache';
var filesToCache = [
  'imgs/images.png',
   'index.html'
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(CACHE_NAME).then(function(cache) {
      console.log('[ServiceWorker] Caching App Shell');
      return cache.addAll(filesToCache);
    })
  );
});



workboxSW.router.registerRoute(
 /.*\/imgs\/(.*\/)?.*\.(png|jpg|jpeg|gif)/,
 ({event}) => {
 console.log("staleWhileRevalidate called);
   return workboxSW.strategies.staleWhileRevalidate({cacheName: CACHE_NAME}).handle({event}).catch((error) => {
     console.log("Error staleWhileRevalidate");
     return error;
   });
 }
);

index.html：

<!DOCTYPE html>
<html>
<head >
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title class="title">PWA</title>


 </head>

<body>

<div class="container">
            <img src="imgs/image.png">
</div>

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('service-worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
</script>
</body>
</html>

安装（不在localhost中）

首次重新加载（不在localhost中）

第二次重新加载（以及更多次）

Workbox，staleWhileRevalidate仅在图像上调用一次

0 个答案: