Question

我正在使用Workbox为Django站点预缓存文件。但是我正在努力设置URL路由，以便工作箱可以预缓存完全呈现的HTML页面。

我直接放入serviceworker.js的所有内容都会在访问该页面后（以后使其脱机使用）正确缓存该页面，如下所示：

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

BASE_URL = location.protocol + "//" + location.host

workbox.routing.registerRoute(
new RegExp(BASE_URL+'/pricing/'),
  workbox.strategies.staleWhileRevalidate({
      cacheName: 'pricing-cache', // Use a custom cache name.
  })
);

workbox.precaching.precacheAndRoute([])

问题： 以下代码将我想要预缓存的文件正确地注入服务工作者。但是 如何修改下面的代码以预缓存通过Django的视图呈现的RENDERED HTML PAGE（以及页面的依赖关系，例如.js和.css）？

// This file resides in [root directory]/GulpApp/Gulpfile.js:

    gulp.task('service-worker', () => {
      return workboxBuild.injectManifest({
        maximumFileSizeToCacheInBytes: 4 * 1024 * 1024,
        swSrc: '../browsepagesAPP/templates/browsepages/workbox-sw.js',
        swDest: '../browsepagesAPP/templates/browsepages/serviceworker.js',
        globDirectory: '../browsepagesAPP/',
        globPatterns: [
          '**\/*.{js,css}',
        ],
        globIgnores: ['app-assets\/**']
      }).then(({count, size, warnings}) => {
        // Optionally, log any warnings and details.
        warnings.forEach(console.warn);
        console.log(`${count} files will be precached, totaling ${size} bytes.`);
      });
    });

我确定我对globDirectory的设置错误。而且由于我使用Django的URL路由来渲染视图，所以我怀疑需要对该视图进行axios调用吗？这是我不知道解决方案的地方...

在此先感谢您的帮助！

如何使用Workbox预先缓存渲染的Django视图（URL路由）

0 个答案: