3

I am trying to add PWA functionality to an existing website that is hosted on Azure and uses Cloudflare CDN.

I have run the lighthouse testing tool on the site and it passes everything in the PWA section (e.g. service worker installed, served over https, manifest installed etc.) except:

"Service worker does not successfully serve the manifest's start_url."

My manifest.json has '/' as the start URL and "/" as the scope.

The '/' is actually default.aspx which I have cached as well.

My service worker caches '/', e.g. 

var cacheShellFiles = [
  '/',
  '/manifest.json',
  '/index.html',
  '/scripts/app.js',
  '/styles/inline.css'
   ...
]

// install - cache the app shell
self.addEventListener('install', function (event) {
console.log('From SW install: ', event);

// calling skipWatiing() means the sw will skip the waiting state and immediately 
// activate even if other tabs open that use the previous sw
self.skipWaiting();

event.waitUntil(
    caches.open(CACHE_NAME_SHELL)
        .then(function (cache) {
            console.log('Cache opened');
            return cache.addAll(cacheShellFiles);
        })
);
});

When I view the Cache Storage files in dev tools however, the Content-Length of the / and the .css and .js files is 0:

Image of Chrome Developer tools showing cache storage with Content-Length=0 Is the Content-Length = 0 the reason that it is saying it can't serve the manifest's start URL ?

4

1 回答 1

1

这是您的服务人员范围的问题（与 中的scope选项不同manifest.json）。

您start_url设置为/，但很可能您的服务工作者文件是从更深的路径提供的，例如/some-path/service-worker.js. 在这种情况下，您的服务工作者的范围是/some-path/，因此它将无法处理对其外部路径的请求，例如根路径/。

要解决此问题，您需要确保 Service Worker 的范围涵盖您的start_url. 我可以想到两种方法来做到这一点：

  1. 在您的情况下，直接从根路径提供服务工作者文件，例如/service-worker.js.

  2. 使用Service-Worker-Allowed响应标头，它会覆盖服务工作者的范围，因此服务工作者文件从哪个路径提供服务无关紧要。

选择更适合您的设置的一种。

于 2018-03-01T17:11:08.480 回答