Question

我正在开发一个渐进的网络应用程序。我有一个页面，我试图添加离线效果。以下是我的服务工作者代码：

toolbox.precache(['/mobileweb/',
                  '/mobileweb/index.html',
                  '/mobileweb/header.html',
                  '/mobileweb/index.html',
                  '/mobileweb/location-search.html',
                  '/mobileweb/voucher-details.html'


]);
toolbox.router.any('/mobileweb/js/(.*)', toolbox.cacheFirst);
toolbox.router.any('/mobileweb/images/(.*)', toolbox.cacheFirst);
toolbox.router.any('/mobileweb/css/(.*)', toolbox.cacheFirst);
toolbox.router.any('/mobileweb/fonts/(.*)', toolbox.cacheFirst);
//toolbox.router.get('/(.*)', toolbox.fastest, {origin: 'https://example.in/mp_webapp/webwallt'});
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://example.in/mobileweb/css'});
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://example.in/mobileweb/images'});
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://example.in/mobileweb/js'});
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://s3-ap-southeast-1.amazonaws.com'});
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://d15xs3htl97jic.cloudfront.net'});
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://bit.ly'});
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://maps.googleapis.com'});
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://example.in/mp_webapp/webwallet/ajax'});
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://maps.google.com'});
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://csi.gstatic.com/'});
toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://maps.gstatic.com/'});
this.addEventListener('fetch', function(event) {
 // console.log(event.request.url);
  event.respondWith(
    caches.match(event.request).then(function(response) {
        console.log(event.request.url);
      return response || fetch(event.request);
    })
  );
});

现在从上面的代码中，我可以缓存所有内容。当我重新加载页面两次或三次时，我可以看到每个请求都来自服务工作者通过控制台中的网络选项卡。现在，如果我在关闭我的wifi后尝试重新加载页面，那么我没有看到空白屏幕。我看到我的页面上有预先缓存的东西。但我无法看到整页，因为当网络关闭时填充页面的ajax会消失。任何人都可以告诉我如何缓存我的ajax响应，以便我得到一个无缝的经验。用于缓存我所有ajax响应的代码：

toolbox.router.get('/(.*)', toolbox.cacheFirst, {origin: 'https://example.in/mp_webapp/webwallet/ajax'});

Answer 1

最后需要添加一个额外的步骤，以便在您离开时运行。

self.toolbox.router.default = self.toolbox.networkFirst;
self.toolbox.options.networkTimeoutSeconds = 86400;

self.addEventListener('install', function(event) {
    return event.waitUntil(self.skipWaiting());
});
self.addEventListener('activate', function(event) {
    return event.waitUntil(self.clients.claim());
});

使用服务工作者进行Ajax缓存

1 个答案: