Служебный работник проваливает проверки в Chrome's Lighthouse - PullRequest
Новая
       12

Служебный работник проваливает проверки в Chrome's Lighthouse

0 голосов
/ 13 сентября 2018

Я хорошо знаю, как создавать веб-страницы, но недавно у меня возникли некоторые проблемы. Я хочу создать сервисного работника для моего сайта. Что странно, так это то, что у меня нет особого использования для каких-либо его функций. Я хочу создать его так, чтобы я мог:

  1. Пройдите все проверки Chrome's Lighthouse
  2. Создание кнопки «Добавить на главный экран» в нескольких браузерах Android (Chrome, Firefox, Edge)

Мой код уже завершает вторую цель. Тем не менее, я не прохожу две ревизии, и я теряюсь в том, что они значат, и как их пройти. Мой код выглядит так:

index.html 

<!DOCTYPE html>
<html>
  <head>
    <!-- Head code -->
  </head>
  <body>
    <!-- Body code -->
    <script src="/lib/main.js"></script>
  </body>
</html>

main.js 

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('./service-worker.js', { scope: './' })
    .then(function(registration) {
      console.log("Service Worker Registered");
    })
    .catch(function(err) {
      console.log("Service Worker Failed to Register", err);
    })
}

сервис-worker.js 

var cacheName = 'v1';
var cacheFiles = [];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Installed');
  e.waitUntil(caches.open(cacheName).then(function(cache) {
    console.log('[ServiceWorker] Caching cacheFiles');
    return cache.addAll(cacheFiles);
  }));
});

self.addEventListener('activate', function(e) {
      console.log('[ServiceWorker] Activated');
      e.waitUntil(caches.keys().then(function(cacheNames) {
          return Promise.all(cacheNames.map(function(thisCacheName) {
            if (thisCacheName !== cacheName) {
              console.log('[ServiceWorker] Removing Cached Files from Cache - ', thisCacheName);
              return caches.delete(thisCacheName);
            }
          }));
        })
      }); self.addEventListener('fetch', function(e) {
      console.log('[ServiceWorker] Fetch', e.request.url);
      e.respondWith(caches.match(e.request).then(function(response) {
        if (response) {
          console.log("[ServiceWorker] Found in Cache", e.request.url, response);
          return response;
        }
        var requestClone = e.request.clone();
        return fetch(requestClone).then(function(response) {
          if (!response) {
            console.log("[ServiceWorker] No response from fetch ")
            return response;
          }
          var responseClone = response.clone();
          caches.open(cacheName).then(function(cache) {
            cache.put(e.request, responseClone);
            console.log('[ServiceWorker] New Data Cached', e.request.url);
            return response;
          });
        }).catch(function(err) {
          console.log('[ServiceWorker] Error Fetching & Caching New Data', err);
        });
      }));
    });

Теперь этот код работает правильно по большей части. Но в Chrome's Lighthouse я вижу это:

Lighthouse Audit Results

Я не знаю, что означают эти неудачные аудиты, и исследование, которое я провел, не помогло.

...