Service Worker 让我的网络变慢了！ , 如何使用 workbox 为 Django work 添加离线功能

Question

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

我已经按照 get started guide 进行了操作，我成功地注册了 service worker 并 save/serve 从缓存静态和媒体资源。

完成代码以存档描述：

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 没有 service worker，有默认的 django 缓存

1.09 秒，Service Worker 提供缓存文件

在这之后我不得不说我很震惊，我期待一个改进，但我得到了相反的结果（我在前面的步骤中做错了什么？）

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

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

我将以下几行添加到 service worker 以在没有网络时提供页面：

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',
      })
    );

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

好的，所以如果用户现在尝试在没有网络的情况下访问以前从未访问过的页面，我想将他发送到我的离线页面，我只是告诉他他处于离线状态，他可以访问 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

我通过将这个添加到 service worker 解决了这个问题

// 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

Service Worker 让我的网络变慢了！ , 如何使用 workbox 为 Django work 添加离线功能

service worker does my web slower! , how to add offline capabilities to Django work using workbox

python

django

offline

service-worker

workbox