Hugoで構築したサイトをPWAに対応するために(その2)

Hugoで構築したサイトをPWA(Progressive Web Apps)に対応するために取り組んだことのメモ

Service Workerを簡単に書いてみる

Google先生に聞いてみると簡単なサンプルに行き当たった

$ cat /themes/theme/static/sw.js
console.log("Message from service worker");

self.addEventListener('fetch', function(event) {

});

ページに組み込む

$ cat /themes/theme/layouts/partials/scripts.html
<script>
  if('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
  }
</script>

Google Chromeで確認してみた

Google Chromeのデベロッパーツールの「Application」タブの「Service Workers」で確認してみました

Google Chromeのデベロッパーツールの「Application」タブの「Manifest」の「Add to homescreen」をクリックしてみた

なんか出たー

追加してみた

Google Chromeのアプリページにも追加された

Google Chromeのアプリページはアドレスバーに「chrome://apps」と入力すると表示できます