1

我对在我的应用程序中使用 sw-precache 和 gulp 非常陌生。我创建了由 angularjs 完成的 Web 应用程序，并从我们的后端 nodejs 应用程序中获取信息。在那个应用程序中，我添加了sw-precache功能来制作离线第一个应用程序。

来自后端的 api 之一，公司图像将嵌入如下：

https://www.myserver.com/api/getcompany

{"company": [
    {"id": 1, "img": "https://myserver.com/images/img.jpg"},
    {"id": 2, "img": "https://myserver.com/images/img.jpg"}
]}

这是我sw-preache与 gulp 一起使用以生成服务工作者文件的编码。

gulp.task('generate-service-worker', function(callback) {
  var path = require('path');
  var swPrecache = require('sw-precache');
  var rootDir = 'dist';

  swPrecache.write(path.join(rootDir, 'sw.js'), {
    staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif}'],
    stripPrefix: rootDir,
    runtimeCaching: [{
      urlPattern: /^https:\/\/myserver.com\.com\/api/,
      handler: 'networkFirst'
    }, {
      urlPattern: /\/api\//,
      handler: 'fastest',
      options: {
          cache: {
            maxEntries: 10,
            name: 'api-cache-01'
          }
      }
    }]
  }, callback);
});

请让我知道上面的编码是缓存 API 的正确方法，请让我知道如何在 gulp 文件中缓存来自 URL 的图像？

4

1 回答 1

1

您的两个urlPatterns—<code>/^https:\/\/myserver.com\.com\/api/ 和/\/api\//看起来它们最终会处理相同类型的请求（尽管数组中第一个列出的请求将占用优先）。

听起来您有两种不同类型的请求要应用运行时缓存逻辑，所以让我们分别处理它们。

首先，对于您的/api/请求，请确定您是否可以接受过时的响应（在这种情况下，使用fastest）或者您是否总是需要新的响应。

其次，对于您的/image/请求，请确定您是否希望给定 URL 上的图像会发生事件更改（如果不会更改，请使用cacheFirst）。

你最终会得到一个看起来像这样的配置：

runtimeCaching: [{
  urlPattern: new RegExp('/api/'),
  handler: 'fastest' // Alternatively, 'networkFirst'.
}, {
  urlPattern: new RegExp('/images/'),
  handler: 'cacheFirst', // Alternatively, 'fastest'.
  options: {
    cache: {
      maxEntries: 50, // Or whatever upper limit you want.
      name: 'images'
    }
  }
}]
于 2017-05-24T20:28:34.660 回答