Я выполняю минимизацию изображений и конвертирую их в webp, используя gulp, используя следующий код:
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] Запуск 'minify-images' ...
[09:10:51] gulp-imagemin: уменьшенное изображение 18 (сохранено 12,84 кБ - 6,6%)
[09:10:51] Закончено 'minify-images' через 108 мс
хромированные коллекторы
URL запроса: http://localhost:8000/img/6
Метод запроса: ПОЛУЧИТЕ код состояния: 404 не найден (из ServiceWorker)
Удаленный адрес: 127.0.0.1:8000
Политика реферера: no -rerrer-when-downgrade
Соединение: keep-alive
Длина содержимого: 0
Дата: пт, 16 ноября 2018 13:43:03 GMT
server: ecstatic-3.2.2 Отображаются временные заголовки
Рефери: http://localhost:8000/
Агент пользователя: 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