PWA问题 - 点击'添加到主屏幕后没有任何反应'

时间:2018-05-01 21:03:54

标签: javascript html json

我刚开始进入网络应用程序并遇到了这个问题。 我将web worker示例转换为pwa,我设法将应用程序保存到我的桌面上,但后来同样的事情没有工作 在点击'添加到主屏幕'我得到的只是“服务工作者注册'那里没有任何事情发生。 认为该问题在.js文件中,但无法解决。

以下是我的文件:

main.html中

<html>
<head>

   <link rel="manifest" href="/manifest.json">
 </head>
   <button onclick="sayHI()">Say HI</button>
   <button onclick="unknownCmd()">Send unknown command</button>
   <button onclick="stop()">Stop worker</button>
   <output id="result"></output>

   <script>
     function sayHI() {
      worker.postMessage({'cmd': 'start', 'msg': 'Hi'});
     }

 function stop() {
   // worker.terminate() from this script would also stop the worker.
   worker.postMessage({'cmd': 'stop', 'msg': 'Bye'});
     }

     function unknownCmd() {
       worker.postMessage({'cmd': 'foobard', 'msg': '???'});
     }

     var worker = new Worker('work_jedan.js');

     worker.addEventListener('message', function(e) {
       document.getElementById('result').textContent = e.data;
     }, false);
   </script>
<body>
        <script src="app.js" async></script>
</body>
</html>

app.js

(function() {
  'use strict';

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('./work_jedan.js')
             .then(function() { console.log('Service Worker Registered');

            });

  }

})();
self.addEventListener('fetch', function() {});

work_jedan.js

self.addEventListener('message', function(e) {
   var data = e.data;
  switch (data.cmd) {
    case 'start':
      self.postMessage('WORKER STARTED: ' + data.msg);
      break;
    case 'stop':
      self.postMessage('WORKER STOPPED: ' + data.msg +
                   '. (buttons will no longer work)');
      self.close(); // Terminates the worker.
      break;
    default:
      self.postMessage('Unknown command: ' + data.msg);
  };
}, false);

mainfest.json

    {
  "name": "Primjer",
  "short_name": "pr",
  "icons": [{
    "src": "img12.png",
      "sizes": "144x144",
      "type": "image/png"
    }],
  "start_url": "/main.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

0 个答案:

没有答案