I am doing image minification and conversion to webp using gulp through the following code:
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'))
});
I am getting following error in console:
Do I need to make any changes to my service worker since the console error is pointing towards service worker??
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");
});
I tried changing the extension to webp for jpg images but that also not worked. I have a few queries :
Please Help in sorting this out I am so confused here if you can point me to some good resources as well it will be great help !!
Edit 1:
Updated serviceworker.js code `
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"); */
` No issues with gulp task successfully run and doing task
[09:10:50] Using gulpfile gulpfile.js
[09:10:50] Starting 'minify-images'...
[09:10:51] gulp-imagemin: Minified 18 image (saved 12.84 kB - 6.6%)
[09:10:51] Finished 'minify-images' after 108 ms
chrome headers
Request URL: http://localhost:8000/img/6
Request Method: GET Status Code: 404 Not Found (from ServiceWorker)
Remote Address: 127.0.0.1:8000
Referrer Policy:no-referrer-when-downgrade
Connection: keep-alive
Content-Length: 0
Date: Fri, 16 Nov 2018 13:43:03 GMT
server: ecstatic-3.2.2 Provisional headers are shown
Referer: http://localhost:8000/
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Mobile Safari/537.36
Your compressed webp files are stored in dist/img
but should get saved in img
directory.
Because they are requested from img
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.