如何使用 sw-precache runtimeCaching 缓存 googleapis.com答案

【问题标题】：How to cache googleapis.com using sw-precache runtimeCaching如何使用 sw-precache runtimeCaching 缓存 googleapis.com
【发布时间】：2017-07-05 13:52:47
【问题描述】：

我在我的网站上使用材料图标和机器人字体，我一直在尝试使用 sw-precache runtimeCaching API 对其进行缓存，但它不起作用，我不确定我是否做得对。我需要我的服务人员从缓存中获取这些文件。这是我的代码。我将它集成到我的 gulp 任务中：

gulp.task('create-sw', ['watchCss', 'watchJS'], callback => {
    preCache.write(path.join('.', 'sw.js'), {
        runtimeCaching: [{
            urlPattern: /^https:\/\/fonts\.googleapis\.com$/,
            handler: 'cacheFirst',
            options: {
                cache: {
                    maxEntries: 10,
                    name: 'google-apis'
            }
        },
    }],
        staticFileGlobs: [
            './script.js',
            './manifest.json',
            './app/**/*.{html,json}',
            './dist/**/*.{js,css,eot,ttf,woff,woff2}',
            './**/*.{png,jpeg,jpg,svg,gif}',
            './index.html',
        ],
        stripPrefix: '.',
        maximumFileSizeToCacheInBytes: 15000000,
    }, callback)
});

我正在尝试缓存这些链接：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">

【问题讨论】：

尝试从 urlPattern 正则表达式中删除结尾的 $ 字符。

标签： javascript caching service-worker sw-precache sw-toolbox

【解决方案1】：

这是我为 Instagram 图片生成缓存的 GULP 任务：

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

swPrecache.write(`${rootDir}/service-worker.js`, {
    staticFileGlobs: [rootDir + '/**/*.{php,js,html,css,png,jpg,gif,svg,eot,ttf,woff,json}', './'],
    stripPrefix: rootDir,
    directoryIndex: false,
    maximumFileSizeToCacheInBytes: 10097152,
    runtimeCaching: [{
        urlPattern: /^https:\/\/scontent\.cdninstagram\.com/,
        handler: 'networkFirst',
        options: {
            cache: {
                maxEntries: 50,
                name: 'instagram-images-cache'
            }
        }
    }]
}, callback);

});

【讨论】：