Question

我的网站通过https托管。它有一个manifest.json文件，service-worker.js和SW注册码。但我没有看到添加到Homescreen popup来自手机。为什么？这是index.html文件：

＆＃13;

<!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>

＆＃13;

Live demo

Answer 1

您必须激活服务工作者。简单的注册不会。

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

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

必须仅通过HTTPS提供服务工作者。出于测试目的，它也适用于localhost。

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

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

添加到主屏幕无法正常工作

1 个答案: