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"}
]}

以下是我使用gulp sw-preache生成服务工作文件的编码。

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/请求，请确定您是否希望某个给定网址的图片能够更改活动（如果它不会改变，请使用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'
    }
  }
}]

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

1 个答案: