gulp - サービスワーカーでwebp画像をキャッシュする方法は?

Question

次のコードで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'))
});

コンソールに次のエラーが表示されます。

コンソールエラーが Service Worker を指しているため、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");
});

jpg 画像の拡張子を webp に変更しようとしましたが、それもうまくいきませんでした。私はいくつかのクエリを持っています:

jpg 画像のみのエラーが発生するのは、これらの画像が API から取得されているためですか?
gulpの縮小と変換後にService Workerですべての画像形式のキャッシュを処理する方法は?

これを整理するのを手伝ってください。私はここでとても混乱しています。良いリソースを教えていただければ、とても助かります!!

編集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ミリ秒後に「縮小画像」を終了

クロムヘッダー

リクエスト URL: http://localhost:8000/img/6

リクエスト方法: GET ステータスコード: 404 Not Found (ServiceWorker から)

リモートアドレス: 127.0.0.1:8000

リファラーポリシー: no-referrer-when-downgrade

接続: キープアライブ

コンテンツの長さ: 0

日付: 2018 年 11 月 16 日 (金) 13:43:03 GMT

サーバー: ecstatic-3.2.2 暫定ヘッダーが表示されます

リファラー: http://localhost:8000/

ユーザーエージェント: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N)

AppleWebKit/537.36 (Gecko のような KHTML) Chrome/70.0.3538.102 モバイル Safari/537.36

gulp - サービスワーカーでwebp画像をキャッシュする方法は?

1 に答える 1

Related

Reference