Question

我正在使用ionic和angular.js创建一个应用程序，我在注册一个服务工作者时遇到了困难，我打算用它来添加新的应用安装横幅功能。我按照指示在app.js文件中添加以下代码，但是我注意到发生了注册的任何信号，也没有任何错误。

这是我正在添加到app.js的代码：

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

Answer 1

确保您在localhost加载页面，或者必须使用https

您还需要通过HTTPS提供代码 - 出于安全原因，服务工作者仅限于跨HTTPS运行。因此，GitHub是一个托管实验的好地方，因为它支持HTTPS。

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers

检查您的浏览器是否支持此功能。

if ('serviceWorker' in navigator) {
  [...]
} else {
  console.log("this browser does NOT support service worker");
}

这可能会有所帮助：http://caniuse.com/#feat=serviceworkers

如果您想查看服务人员的当前状态，您可以执行以下操作：

navigator.serviceWorker.register('/serviceworker.js', {scope: '/'})
  .then(function (registration) {
    var serviceWorker;
    if (registration.installing) {
      serviceWorker = registration.installing;
    } else if (registration.waiting) {
      serviceWorker = registration.waiting;
    } else if (registration.active) {
      serviceWorker = registration.active;
    }

    if (serviceWorker) {
      console.log("ServiceWorker phase:", serviceWorker.state);

      serviceWorker.addEventListener('statechange', function (e) {
        console.log("ServiceWorker phase:", e.target.state);
      });
    }
  }).catch(function (err) {
    console.log('ServiceWorker registration failed: ', err);
  });

Answer 2

如果您没有看到任何记录，那么最可能的原因是您在不支持服务工作者的浏览器中运行。换句话说，if ('serviceWorker' in navigator)检查失败。您可以通过在与else关联的if子句中添加日志记录语句来确认这一点。

您正在测试哪种浏览器？服务工作者将来会使用更多浏览器，但截至目前，他们仅在桌面和Android平台上的当前Chrome版本中默认启用。

在angular.js应用程序中注册服务工作者

2 个答案: