注册在angular.js应用服务工作者 [英] Register service worker in angular.js application

问题描述

我使用的离子和angular.js创建一个应用程序，我在其中注册我打算使用添加新的应用程序安装的横幅功能的服务人员的困难。我加入我的app.js文件低于code的指示，但我注意到获得登记，也没有发生任何错误的信号。

这是code我加入到我的app.js：

 如果（在导航'serviceWorker'）{
  navigator.serviceWorker.register（'服务worker.js'），然后（功能（注册）{
    //注册成功
    的console.log（'ServiceWorker注册成功的范围：，registration.scope）;
  }）赶上（功能（错误）{
    //注册失败 ：（
    的console.log（'ServiceWorker注册失败：'，ERR）;
  }）;
}
 

解决方案

请确保在本地主机你要么加载页面或者你必须使用 HTTPS

  

您还需要通过HTTPS服务于您的code - 服务人员仅限于跨HTTPS运行出于安全原因。因此GitHub的是举办实验的好地方，因为它支持HTTPS。

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

请确认您的浏览器支持此功能。

 如果（在导航'serviceWorker'）{
  [...]
}其他{
  的console.log（该浏览器不支持服务人员）;
}
 

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

如果你想看到你的serviceworker目前的状态，你可以做这样的事情：

  navigator.serviceWorker.register（'/ serviceworker.js'，{范围：'/'}）
  。然后（功能（注册）{
    VAR serviceWorker;
    如果（registration.installing）{
      serviceWorker = registration.installing;
    }否则如果（registration.waiting）{
      serviceWorker = registration.waiting;
    }否则如果（registration.active）{
      serviceWorker = registration.active;
    }    如果（serviceWorker）{
      的console.log（ServiceWorker阶段：，serviceWorker.state）;      serviceWorker.addEventListener（'statechange'，函数（E）{
        的console.log（ServiceWorker阶段：，e.target.state）;
      }）;
    }
  }）赶上（功能（错误）{
    的console.log（'ServiceWorker注册失败：'，ERR）;
  }）;
 

I'm creating an app using ionic and angular.js and I'm having difficulties registering a service worker which I'm intending to use to add the new app install banner feature. I'm adding the below code on my app.js file as instructed, but I'm note getting any signals of the registration happening nor any error.

This is the code I'm adding to my 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);
  });
}

解决方案

Make sure you either load the page at localhost or you have to use https

You’ll also need to serve your code via HTTPS — Service Workers are restricted to running across HTTPS for security reasons. GitHub is therefore a good place to host experiments, as it supports HTTPS.

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

Check if your Browser supports this feature.

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

This might help: http://caniuse.com/#feat=serviceworkers

If you want to see the current state of your serviceworker you could do something like this:

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);
  });

这篇关于注册在angular.js应用服务工作者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！