如何使用 sw-precache runtimeCaching 缓存 googleapis.com
How to cache googleapis.com using sw-precache runtimeCaching
我在我的网站上使用了 material 图标和 roboto 字体,我一直在尝试使用 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&lang=en">
这是我的 GULP 为 Instagram 图像生成缓存的任务:
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);
});
我在我的网站上使用了 material 图标和 roboto 字体,我一直在尝试使用 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&lang=en">
这是我的 GULP 为 Instagram 图像生成缓存的任务:
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);
});