Question

我在启动网站时遇到以下错误。我在chrome：// serviceworker-internals / log中看到此错误。我附上了一张照片。

Error: {"columnNumber":-1,"lineNumber":-1,"message":"ServiceWorker failed to install: ServiceWorker failed to handle event (event.waitUntil Promise rejected)","sourceURL":""}
Console: {"lineNumber":0,"message":"Uncaught (in promise) QuotaExceededError: Quota exceeded.","message_level":3,"sourceIdentifier":1,"sourceURL":"http://localhost:8100/service-worker.js"}

我知道这是因为我的操作系统安装驱动器的内存空间不足。我试图通过跟踪脚本文件中的方法来处理它，但没有任何效果。

self.addEventListener('error', function(e) {
  console.log(e.filename, e.lineno, e.colno, e.message);
});


self.onerror = function(message) {
  console.log(message);
};

我只想向用户显示一条错误消息，例如“请从您的操作系统安装目录中释放一些空间来运行网站”。应该在哪里写代码？

或者

我将绕过服务工作者。现在它显示了一个空白的白页。

Bellow是我的服务人员注册码。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('service-worker.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope : ', registration.scope);
      registration.update();
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

Answer 1

您可以检测到此安装失败，因为navigator.serviceWorker.register()承诺将拒绝。

现在你正在使用的代码有一个双参数.then()，第二个参数是catch处理程序，它将在安装失败时调用。

明确使用.catch()可能会更清晰，这会使您的注册码看起来像：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('sw.js').catch(function(error) {
      // Show a message prompting the user to free up space, etc.
    });
  });
}

Answer 2

要解决由于OS驱动器已满而导致服务人员无法安装的问题，@ jeff-posnick的回答是正确的。

在类似的情况下出现“ QuotaExceededError：超出配额。”错误，是因为已安装的服务工作程序试图缓存的内容超出了允许的范围（或驱动器当前有空间容纳），解决方案是使用与catch和cache.addAll方法相同的方法来cache.put错误。

以MDN参考'使用服务工作者'（https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers）为例，service-worker.js中的代码如下：

cache.addAll：

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        './sw-test/',
        './sw-test/index.html',
        './sw-test/style.css',
        './sw-test/app.js',
        './sw-test/image-list.js',
        './sw-test/star-wars-logo.jpg',
        './sw-test/gallery/',
        './sw-test/gallery/bountyHunters.jpg',
        './sw-test/gallery/myLittleVader.jpg',
        './sw-test/gallery/snowTroopers.jpg'
      ]).catch(error => {
         console.log('Error caching all: ' + error.name + ': ' + error.message);
            //add any further error handling code or message to users here
      });
    })
  );
});

...

cache.put：

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((resp) => {
      return resp || fetch(event.request).then((response) => {
        return caches.open('v1').then((cache) => {
          cache.put(event.request, response.clone()).catch(error => {
            console.log('Error caching resource: ' + e.request.url + ': ' + error.name + ': ' + error.message);
            //add any further error handling code or message to users here
          });

          return response;
        });  
      });
    })
  );
});

如果内存不足，则进行这些更改可以节省以后再次看到相同的错误。

希望有帮助！

Answer 3

解决方案：Service Worker 的配额超出错误通常是由于与其他 Service Worker 的冲突引起的。这是服务工作者配额而不是内存配额。如果您的网站是基于 Wordpress 构建的，只需安装 Google 开发的 PWA 插件。 PWA 专为与现有或正在开发的渐进式 Web 应用程序配合使用而构建。您还可以访问 PWA 存储库以获取源代码。 https://github.com/GoogleChromeLabs/pwa-wp

如何在Service worker注册过程中处理QuotaExceededError？

3 个答案: