添加到主屏幕不起作用答案

【问题标题】：Add To Homescreen not working添加到主屏幕不起作用
【发布时间】：2017-10-05 16:18:42
【问题描述】：

我的网站是通过 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>

Live demo

【问题讨论】：

你看过控制台输出了吗？因为当我访问your site 时，我得到了TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.。
你试图获取 service-worker.js 并失败了。
那个文件存在吗？
确实如此。你去过那个地址吗？因为它确实返回 404。
看看Google Chrome samples

标签： javascript html service-worker service-worker-events

【解决方案1】：

您必须激活 Service Worker。简单的注册是不行的。

先看看你的浏览器是否支持 Service Worker - http://caniuse.com/#search=service%20worker

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

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

在您的 HTML 中包含 main.js 文件并从该文件调用 service worker。打开页面一次安装 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();
});

【讨论】：

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