服务人员让我的网络变慢了！ ，如何使用workbox为Django工作添加离线功能

Question

几天以来，我一直在尝试使用 workbox 为我的 Django Web 应用程序提供离线功能，但没有成功。

我已关注get started guide，并成功注册服务工作者并从缓存中保存/提供静态和媒体资源。

为存档描述完成的代码：

urls.py

...
url(r'^service-worker.js', cache_control(max_age=60*60*24)(TemplateView.as_view(
    template_name="sw.js",
    content_type='application/javascript',
)), name='sw.js'),
...

base.html 模板

...
<!-- bottom of body -->
<script>

  // Check that service workers are registered
        if ('serviceWorker' in navigator) {
          // Use the window load event to keep the page load performant
          window.addEventListener('load', () => {
            navigator.serviceWorker.register('{% url 'sw.js' %}');
          });
        }

</script>
...

sw.js（服务工作者）

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded ????`);
} else {
  console.log(`Boo! Workbox didn't load ????`);
}

workbox.setConfig({
  debug: false
});

// workbox.core.setLogLevel(workbox.core.LOG_LEVELS.debug);


workbox.routing.registerRoute(
  /\.(?:js|css)$/,
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'static-resources',
  }),
);

workbox.routing.registerRoute(
  /\.(?:png|gif|jpg|jpeg|svg)$/,
  workbox.strategies.cacheFirst({
    cacheName: 'images',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
      }),
    ],
  }),
);

workbox.routing.registerRoute(
  new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
  workbox.strategies.cacheFirst({
    cacheName: 'googleapis',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 30,
      }),
    ],
  }),
);

在这之后，我决定检查性能，看看服务人员是否帮助我的应用比以前更快地提供缓存文件。

我在这里留下 2 个屏幕截图供您检查（加载时间在右下角以红色显示）：

516m 没有服务工作者，有默认的 django 缓存

1.09 秒，服务工作者为缓存文件提供服务

在这之后，我不得不说我很震惊，我期待有所改善，结果却适得其反（我在前面的步骤中做错了什么？）

之后我做了更多的测试，在大多数其他情况下，加载时间是相似的，但我仍然没有看到有利于服务人员的很大差异，特别是在第一次访问时

但对于另一部分，我在想，好吧 500 毫秒~如果我获得离线功能是一个公平的代价，但甚至不是......

当没有网络时，我将以下行添加到服务人员以提供页面：

workbox.precaching.precacheAndRoute(
  [
    '/',
    '/offline',
  ],
  {
    directoryIndex: null,
  }
);

workbox.routing.registerRoute(
  /* my urls doesn't end in html, so i didn't found another way to 
  store only the html document except using the main route of my app as reg ex

example: http://localhost:8000/participation/id/title -> html for article
         http://localhost:8000/participation/ -> html for list of articles */

      new RegExp('participation/'), 
      workbox.strategies.networkFirst({
        cacheName: 'html-resources',
      })
    );

所以现在如果我在某些参与页面中处于离线状态，我仍然可以看到它们，但这导致我遇到了实际问题。

Okey ，所以如果用户现在尝试在没有网络的情况下访问它以前从未访问过的页面，我想将他发送到我的离线页面，我只是告诉他他处于离线状态，他可以转到他已经访问过的 X 个页面访问

我没有找到任何方法来解决这个问题，我试试这个：

workbox.routing.registerRoute(
  ({ event }) => event.request.mode === 'navigate', //if the requests is to go to a new url
  ({ url }) => fetch(url.href,{credentials: 'same-origin'}).catch(() => caches.match('/offline')) //in case of not match send my to the offline page
);

但它根本不起作用，我怎么能这样做？

Answer 1

我通过将它添加到服务人员解决了这个问题

// Fallback to offline page if nothing is found in cache
var networkFirstHandler = workbox.strategies.networkFirst({
  cacheName: 'default',
  plugins: [
    new workbox.expiration.Plugin({
      maxEntries: 10
    }),
    new workbox.cacheableResponse.Plugin({
      statuses: [200]
    })
  ]
});

const matcher = ({event}) => event.request.mode === 'navigate';
const handler = (args) => networkFirstHandler.handle(args).then((response) => (!response) ? caches.match('/offline') : response);

workbox.routing.registerRoute(matcher, handler);
// End fallback offline