使用 gulp 将 API 和后端服务器中的图像缓存在软件预缓存中

Question

在我的应用程序中使用带有gulp的sw-precache是很陌生的。我已经创建了由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中的图像？

Answer 1

你的两个urlPatterns——/^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'
    }
  }
}]