2016-11-18 2 views
5

Mon application utilise actuellement webpack, js angulaire, et un travailleur de service. Utilisation du plugin sw-precache pour créer mon service worker.Lighthouse/Service Worker, comment retourner http 200 en mode hors connexion

La mise en cache du service worker se passe bien et je peux voir mes ressources statiques extraites de serviceworker.js à partir des outils de développement chrome.

Maintenant, quand je lance le rapport phare, je reçois l'erreur suivante encore:

URL responds with a 200 when offline 

enter image description here

https://github.com/GoogleChrome/lighthouse

Dans les outils Dev quand j'allumer en ligne, je peux réellement voir mon chargement de la page. Certaines erreurs dans la console pour certains scripts tiers échouent. Est-ce la raison pour ne pas obtenir une réponse url 200 parce que j'ai quelques erreurs de la console de 3ème partie à savoir exemple d'erreur:

GET https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700 net::ERR_INTERNET_DISCONNECTED 

Qu'est-ce que cette vérification recherche, et comment puis-je y parvenir? Editer: J'ai ajouté une image de mon onglet réseau lorsque je me suis connecté hors ligne, comme je l'ai dit, la page se charge très bien. Je remarque que mon sw.js est chargé à partir du cache disque que je ne remarque pas sur d'autres sites, donc ça pourrait être quelque chose.

enter image description here

Aussi voici le contenu sw.js

'use strict'; 

var precacheConfig = [["/css/app.styles.77e2a0c3e7ac001193566741984a07f0.css","77e2a0c3e7ac001193566741984a07f0"],["/css/vendor.styles.582e79ead0684a8fb648ce9e543ad810.css","582e79ead0684a8fb648ce9e543ad810"],["/favicon.ico","70ef569d9a12f6873e86ed57d575cf13"],["/fonts/MaterialIcons-Regular.eot","e79bfd88537def476913f3ed52f4f4b3"],["/fonts/MaterialIcons-Regular.svg","a1adea65594c502f9d9428f13ae210e1"],["/fonts/MaterialIcons-Regular.ttf","a37b0c01c0baf1888ca812cc0508f6e2"],["/fonts/MaterialIcons-Regular.woff","012cf6a10129e2275d79d6adac7f3b02"],["/fonts/MaterialIcons-Regular.woff2","570eb83859dc23dd0eec423a49e147fe"],["/icons/launcher-icon-2x.png","91896b953c39df7c40b4772100971220"],["/icons/launcher-icon-3x.png","0aee2add7f56559aeae9555e495c3881"],["/icons/launcher-icon-4x.png","b164109dd7640b14aaf076d55a0a637b"],["/images/aa_logo_only.png","b5b46a8c2ead9846df1f1d3035634310"],["/images/developer.png","e8df747b292fe6f5eb2403c7180c31da"],["/images/facebook.png","8ab42157d0974099a72e151c23073022"],["/images/home-bg.jpeg","0a0f7da8574b037463af2f1205801e56"],["/images/logo.png","e8712312e08ca427d79a9bf34aedd6fc"],["/images/map.png","af3443ef4ab2890cae371c7a3de437ed"],["/images/pattern.png","114d593511446b9a4c6e340f7fef5c84"],["/images/twitter.png","99da44949cd33e16d2d551d42559eaf2"],["/index.html","1e9b5c4b3abba7e13d8d28c98cfb3bb5"],["/js/app.d9ada27616bf469d794d.js","8e2fc74de7d5c122ab8f0aca7e31b075"],["/js/vendor.d9ada27616bf469d794d.js","3bbba4569b6f3b88881b0533260905fe"],["/manifest.json","4bea29155995b63a9f2855637c0fe74c"]]; 
var cacheName = 'sw-precache-v2-45-' + (self.registration ? self.registration.scope : ''); 


var ignoreUrlParametersMatching = [/^utm_/]; 



var addDirectoryIndex = function (originalUrl, index) { 
    var url = new URL(originalUrl); 
    if (url.pathname.slice(-1) === '/') { 
     url.pathname += index; 
    } 
    return url.toString(); 
    }; 

var createCacheKey = function (originalUrl, paramName, paramValue, 
          dontCacheBustUrlsMatching) { 
    // Create a new URL object to avoid modifying originalUrl. 
    var url = new URL(originalUrl); 

    // If dontCacheBustUrlsMatching is not set, or if we don't have a match, 
    // then add in the extra cache-busting URL parameter. 
    if (!dontCacheBustUrlsMatching || 
     !(url.toString().match(dontCacheBustUrlsMatching))) { 
     url.search += (url.search ? '&' : '') + 
     encodeURIComponent(paramName) + '=' + encodeURIComponent(paramValue); 
    } 

    return url.toString(); 
    }; 

var isPathWhitelisted = function (whitelist, absoluteUrlString) { 
    // If the whitelist is empty, then consider all URLs to be whitelisted. 
    if (whitelist.length === 0) { 
     return true; 
    } 

    // Otherwise compare each path regex to the path of the URL passed in. 
    var path = (new URL(absoluteUrlString)).pathname; 
    return whitelist.some(function(whitelistedPathRegex) { 
     return path.match(whitelistedPathRegex); 
    }); 
    }; 

var stripIgnoredUrlParameters = function (originalUrl, 
    ignoreUrlParametersMatching) { 
    var url = new URL(originalUrl); 

    url.search = url.search.slice(1) // Exclude initial '?' 
     .split('&') // Split into an array of 'key=value' strings 
     .map(function(kv) { 
     return kv.split('='); // Split each 'key=value' string into a [key, value] array 
     }) 
     .filter(function(kv) { 
     return ignoreUrlParametersMatching.every(function(ignoredRegex) { 
      return !ignoredRegex.test(kv[0]); // Return true iff the key doesn't match any of the regexes. 
     }); 
     }) 
     .map(function(kv) { 
     return kv.join('='); // Join each [key, value] array into a 'key=value' string 
     }) 
     .join('&'); // Join the array of 'key=value' strings into a string with '&' in between each 

    return url.toString(); 
    }; 


var hashParamName = '_sw-precache'; 
var urlsToCacheKeys = new Map(
    precacheConfig.map(function(item) { 
    var relativeUrl = item[0]; 
    var hash = item[1]; 
    var absoluteUrl = new URL(relativeUrl, self.location); 
    var cacheKey = createCacheKey(absoluteUrl, hashParamName, hash, false); 
    return [absoluteUrl.toString(), cacheKey]; 
    }) 
); 

function setOfCachedUrls(cache) { 
    return cache.keys().then(function(requests) { 
    return requests.map(function(request) { 
     return request.url; 
    }); 
    }).then(function(urls) { 
    return new Set(urls); 
    }); 
} 

self.addEventListener('install', function(event) { 
    event.waitUntil(
    caches.open(cacheName).then(function(cache) { 
     return setOfCachedUrls(cache).then(function(cachedUrls) { 
     return Promise.all(
      Array.from(urlsToCacheKeys.values()).map(function(cacheKey) { 
      // If we don't have a key matching url in the cache already, add it. 
      if (!cachedUrls.has(cacheKey)) { 
       return cache.add(new Request(cacheKey, {credentials: 'same-origin'})); 
      } 
      }) 
     ); 
     }); 
    }).then(function() { 

     // Force the SW to transition from installing -> active state 
     return self.skipWaiting(); 

    }) 
); 
}); 

self.addEventListener('activate', function(event) { 
    var setOfExpectedUrls = new Set(urlsToCacheKeys.values()); 

    event.waitUntil(
    caches.open(cacheName).then(function(cache) { 
     return cache.keys().then(function(existingRequests) { 
     return Promise.all(
      existingRequests.map(function(existingRequest) { 
      if (!setOfExpectedUrls.has(existingRequest.url)) { 
       return cache.delete(existingRequest); 
      } 
      }) 
     ); 
     }); 
    }).then(function() { 

     return self.clients.claim(); 

    }) 
); 
}); 


self.addEventListener('fetch', function(event) { 
    if (event.request.method === 'GET') { 
    // Should we call event.respondWith() inside this fetch event handler? 
    // This needs to be determined synchronously, which will give other fetch 
    // handlers a chance to handle the request if need be. 
    var shouldRespond; 

    // First, remove all the ignored parameter and see if we have that URL 
    // in our cache. If so, great! shouldRespond will be true. 
    var url = stripIgnoredUrlParameters(event.request.url, ignoreUrlParametersMatching); 
    shouldRespond = urlsToCacheKeys.has(url); 

    // If shouldRespond is false, check again, this time with 'index.html' 
    // (or whatever the directoryIndex option is set to) at the end. 
    var directoryIndex = 'index.html'; 
    if (!shouldRespond && directoryIndex) { 
     url = addDirectoryIndex(url, directoryIndex); 
     shouldRespond = urlsToCacheKeys.has(url); 
    } 

    // If shouldRespond is still false, check to see if this is a navigation 
    // request, and if so, whether the URL matches navigateFallbackWhitelist. 
    var navigateFallback = ''; 
    if (!shouldRespond && 
     navigateFallback && 
     (event.request.mode === 'navigate') && 
     isPathWhitelisted([], event.request.url)) { 
     url = new URL(navigateFallback, self.location).toString(); 
     shouldRespond = urlsToCacheKeys.has(url); 
    } 

    // If shouldRespond was set to true at any point, then call 
    // event.respondWith(), using the appropriate cache key. 
    if (shouldRespond) { 
     event.respondWith(
     caches.open(cacheName).then(function(cache) { 
      return cache.match(urlsToCacheKeys.get(url)).then(function(response) { 
      if (response) { 
       return response; 
      } 
      throw Error('The cached response that was expected is missing.'); 
      }); 
     }).catch(function(e) { 
      // Fall back to just fetch()ing the request if some unexpected error 
      // prevented the cached response from being valid. 
      console.warn('Couldn\'t serve response for "%s" from cache: %O', event.request.url, e); 
      return fetch(event.request); 
     }) 
    ); 
    } 
    } 
}); 
+0

Quelle version de Lighthouse utilisez-vous? https://github.com/GoogleChrome/lighthouse/issues/425 a quelques informations sur le test effectué par les versions antérieures de Lighthouse, qui ne permettait pas de détecter avec précision les navigations hors ligne. Si vous utilisez une version à jour de Lighthouse et que votre page se charge réellement sans connexion réseau, l'ouverture d'un bogue sur le projet Lighthouse avec les étapes de reproduction serait idéale. –

+0

Ce n'est pas à cause des ressources de tiers. Ce que le phare indique est qu'il n'a pas trouvé de réponse appropriée à votre requête principale. Avez-vous essayé de configurer le mode hors-ligne et de mettre à jour le rechargement? – Hosar

Répondre

0

Certaines données comme

https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700

ne prend pas en charge le mode hors connexion télécharger ces fichiers manuellement et les ajouter avec chemin d'accès local encore.