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」で確認してみました
デベロッパーツールの「Application」タブの「Service Workers」

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

なんか出たー
画面：このサイトをシェルフに追加するといつでも使えるようになります

追加してみた
画面：ショートカットを作成しますか？

Google Chromeのアプリページにも追加された
画面：Google Chromeのアプリページ
Google Chromeのアプリページはアドレスバーに「chrome://apps」と入力すると表示できます

戻る