Service WorkerをWEBサイトに最小構成で導入してみたサンプル

このエントリーをはてなブックマークに追加


・WEB push通知
・バックグラウンド処理
・オフライン動作
・PWA(Progressive Web Apps)化

などなど、その初めの一歩としてService Workerを最小構成で導入してみた


全て同じディレクトリに配置
├ index.html
├ main.js
└ sw.js


index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Service Worker Test</title>
<script src="main.js"></script>
</head>
<body>
  <header class="header">
    <h1 class="header__title">Service Worker Test</h1>
  </header>
</body>
</html>

main.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./sw.js').then(function(reg) {

    //Service worker
    console.log(reg);


  }).catch(function(error) {
    //エラーログ
    console.log('Service worker:' + error);
  });
}

sw.js
this.addEventListener('install', function(event) {

//処理

});


これだけではまだService Workerがインストールされるだけですが、ここから処理を追加していきたいと思います

0 件のコメント :