javascript - 使用 gulp 在 sw-precache 中缓存来自后端服务器的 API 和图像

Question

我刚开始在我的应用程序中使用 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-preach 和 gulp 来生成 service-worker 文件的代码。

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 的图像？

Answer 1

您的两个 urlPatterns - /^https:\/\/myserver.com\.com\/api/ 和 /\/api\//，看起来它们最终会处理相同类型的请求(尽管数组中第一个列出的请求将优先)。

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

首先，对于您的 /api/ 请求，确定您是否可以接受陈旧的响应(在这种情况下，使用最快的)，或者您是否始终需要新的响应。

其次，对于您的 /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'
    }
  }
}]