Добавить на домашний экран не работает

Question

Добавить на домашний экран не работает

Мой сайт размещен через https. Он имеет файл manifest.json, код service-worker.js и регистр программного обеспечения. Но я не вижу всплывающее окно добавления на домашний экран с мобильных телефонов. Зачем? Вот файл 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>

Живая демо

2

javascript html5 service-worker service-worker-events

Источник

user8158166 05 окт '17 в 16:18

1 ответ

Другие вопросы по тегам javascript html5 service-worker service-worker-events

user4405477 16 окт '17 в 18:24 2017-10-16 18:24 · Answer 1 · 2017-10-16 18:24

Вы должны активировать сервисный работник. Простая регистрация не подойдет.

Сначала посмотрите, поддерживает ли ваш браузер обслуживающий персонал - http://caniuse.com/

Еще одна важная вещь заключается в том, что вы должны хранить код рабочего сервиса в отдельном файле. Вы не можете сделать это встроенным.

Сервисный работник должен обслуживаться только по HTTPS. В целях тестирования он будет работать и на localhost.

Включите файл main.js в ваш HTML и позвоните работнику сервиса из этого файла. Откройте страницу один раз, чтобы установить работника сервиса, затем закройте его, чтобы его можно было применить, и откройте его снова, чтобы активировать.

файл 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();
});