1

我的网站托管在 https 上。它有一个 manifest.json 文件、service-worker.js 和 SW 注册码。但我没有看到来自手机的添加到主屏幕弹出窗口。为什么？这是 index.html 文件：

<!DOCTYPE html public "display of affection from creativejs">
<html> 
<head> 
  <meta charset="uft-8" /> <meta name="theme-color" content="#536878" />  <meta name=viewport content="width=device-width, initial-scale=1"> <title>Fireworks!</title>
  <link rel="manifest" href="manifest.json"> </head> 
<body> 
  <h1>Welcome!</h1>
</body>
<script> 
if ('serviceWorker' in navigator) {
  console.log("Will service worker register?");
  
  navigator.serviceWorker.register('service-worker.js').then(function(reg){
    console.log("Yes it did."); 
  }).catch(function(err) { 
    console.log("No it didn't. This happened: ", err) 
  }); 
}
</script>
</html>

现场演示

4

1 回答 1

0

您必须激活服务人员。简单的注册是不行的。

首先看看你的浏览器是否支持服务工作者 - http://caniuse.com/#search=service%20worker

另一个重要的事情是您必须将服务工作者代码保存在单独的文件中。您不能将其内联。

Service Worker 必须仅通过 HTTPS 提供服务。出于测试目的，它也可以在 localhost 上运行。

在您的 HTML 中包含 main.js 文件并从该文件中调用 service worker。打开页面一次以安装服务工作者，然后关闭以便可以应用它并再次打开它以激活它。

main.js 文件

// Call service worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker
  .register('/sw.js', {
    scope: './'
  })
  .then(function() {
    console.log('Service worker registered!');
  })
  .catch(function(event) {
    console.log('Error:', event);
  });
}

sw.js 文件（由于范围，必须在根文件夹中）

self.addEventListener('install', function(event) {
  console.log('Installing Service Worker...', event);
});

self.addEventListener('activate', function(event) {
  console.log('Activating Service Worker...', event);
  return self.clients.claim();
});
于 2017-10-16T18:24:39.977 回答