如何在服务工作者中缓存webp图像?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在服务工作者中缓存webp图像?相关的知识,希望对你有一定的参考价值。
我通过以下代码使用gulp进行图像缩小和转换为webp:
gulp.task('minify-images', function(){
return gulp.src('img/*.+(png|jpg|gif)')
.pipe(imagemin([
imagemin.jpegtran({progressive: true}),
imagemin.gifsicle({interlaced: true}),
imagemin.optipng({optimizationLevel: 5})
]))
.pipe(webp())
.pipe(gulp.dest('dist/img'))
});
我是否需要对服务工作者进行任何更改,因为控制台错误指向服务工作者?
self.addEventListener('install', function(event) {
console.log("Service Worker installed");
event.waitUntil(
caches.open(staticCacheName).then(function(cache) {
return cache.addAll([
'./',
'./index.html',
'./rt.html',
'./offline.html',
'./manifest.json',
// Remove rts.json from cache as data is coming from server.
'./css/styles.css',
'./img/1.jpg',
'./img/2.jpg',
'./img/3.jpg',
'./img/4.jpg',
'./img/5.jpg',
'./img/6.jpg',
'./img/7.jpg',
'./img/8.jpg',
'./img/9.jpg',
'./img/10.jpg',
'./img/marker-icon-2x-red.png',
'./img/marker-shadow.png',
'./img/offlinegiphy.gif',
'./img/icons/iconman.png',
'./img/icons/iconman-48x48.png',
'./img/icons/iconman-64x64.png',
'./img/icons/iconman-128x128.png',
'./img/icons/iconman-256x256.png',
'./img/icons/iconman-512x512.png',
'./js/dbhelper.js',
'./js/main.js',
'./js/rt_info.js',
'./register_sw.js',
'./serviceworker.js',
'https://unpkg.com/leaflet@1.3.1/dist/leaflet.css',
'https://unpkg.com/leaflet@1.3.1/dist/leaflet.js',
]);
})
);
console.log("cache successful");
});
我尝试将扩展名更改为webp以获取jpg图像,但这也无效。我有几个问题:
- 为什么我只得到jpg图像的错误是因为这些图像是从API获取的?
- gulp缩小和转换后如何处理服务工作者中的所有图像格式缓存?
请帮忙整理出来我在这里很困惑,如果你能指出一些好的资源,那将是很大的帮助!
编辑1:
更新了serviceworker.js代码`
const staticCacheName = 'rt-rws-v4';
var imgCache = 'rt-img';
var filesToCache=[
'./',
'./index.html',
'./rt.html',
'./offline.html',
'./manifest.json',
// Remove rt.json from cache as data is coming from server.
'./css/styles.css',
'./js/dbhelper.js',
'./js/main.js',
'./js/rt_info.js',
'./js/idb.js',
'https://unpkg.com/leaflet@1.3.1/dist/leaflet.css',
'https://unpkg.com/leaflet@1.3.1/dist/leaflet.js',
];
/**
* This block is invoked when install event is fired
*/
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(staticCacheName).then(function(cache) {
return cache.addAll(filesToCache);
})
);
});
// deletes old cache
self.addEventListener('activate', function(event) {
// console.log("Service Worker activated");
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.filter(function(cacheName) {
return cacheName.startsWith('rt-rws-') &&
cacheName != staticCacheName;
}).map(function(cacheName) {
return caches.delete(cacheName);
})
);
console.log("Old cache removed");
})
);
});
self.addEventListener('fetch', function(event) {
var requestUrl = new URL(event.request.url);
// Check if the image type
if (/.(jpg|png|gif|webp).*$/.test(requestUrl.pathname)) {
event.respondWith(cacheImages(event.request));
return;
}
event.respondWith(
/* fetch(returnUrl, {
mode: 'no-cors'
}) */
caches.open(staticCacheName).then(function(cache) {
return cache.match(event.request).then(function (response) {
if (response) {
// console.log("data fetched from cache");
return response;
}
else {
return fetch(event.request).then(function(networkResponse) {
// console.log("data fetched from network", event.request.url);
//cache.put(event.request, networkResponse.clone());
return networkResponse;
}).catch(function(error) {
console.log("Unable to fetch data from network", event.request.url, error);
});
}
});
}).catch(function(error) {
// console.log("Something went wrong with Service Worker fetch intercept", error);
return caches.match('offline.html', error);
})
);
});
/**
* @description Adds images to the imgCache
* @param {string} request
* @returns {Response}
*/
function cacheImages(request) {
var storageUrl = new URL(request.url).pathname;
return caches.open(imgCache).then(function(cache) {
return cache.match(storageUrl).then(function(response) {
if (response) return response;
return fetch(request).then(function(networkResponse) {
cache.put(storageUrl, networkResponse.clone());
return networkResponse;
});
});
});
}
/* // Inspect the accept header for WebP support
var supportsWebp = false;
if (event.request.headers.has('accept')){
supportsWebp = event.request.headers
.get('accept')
.includes('webp');
}
// If we support WebP
if (supportsWebp)
{
// Clone the request
var req = event.request.clone();
// Build the return URL
var returnUrl = req.url.substr(0, req.url.lastIndexOf(".")) + ".webp";
//console.log("Service Worker starting fetch"); */
`没有gulp任务成功运行和执行任务的问题
[09:10:50]使用gulpfile gulpfile.js
[09:10:50]开始'缩小图像'......
[09:10:51] gulp-imagemin:缩小18张图片(已保存12.84 kB - 6.6%)
[09:10:51] 108 ms后完成'缩小图像'
镀铬头
请求网址:http://localhost:8000/img/6
请求方法:GET状态代码:404 Not Found(来自ServiceWorker)
远程地址:127.0.0.1:8000
推荐人政策:no-referrer-when-downgrade
连接:保持活力
内容长度:0
Gave:2018年11月16日星期五13:03:03 GMT
server:ecstatic-3.2.2显示临时标题
用户代理:Mozilla / 5.0(Linux; android 6.0; Nexus 5 Build / MRA58N)
AppleWebKit / 537.36(KHTML,与Gecko一样)Chrome / 70.0.3538.102 Mobile Safari / 537.36
您的压缩webp文件存储在dist/img
中,但应保存在img
目录中。
因为他们是从img
请求。
以上是关于如何在服务工作者中缓存webp图像?的主要内容,如果未能解决你的问题,请参考以下文章
Magento 2 - 如何在 Fotorama JS 中替换 webP 图像