Pfthb

I am doing image minification and conversion to webp using gulp through the following code:

gulp.task('minify-images', function()jpg);

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 :

• why I am getting the error for only jpg images is it because these images are fetching from the API?


• how to handle all image formats caching in service worker after gulp minification and conversions?

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) png);

/**
* @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.