PWA(プログレッシブWebアプリ)

そういえば、GoogleのGmailとかはWeb版をWindowsにインストールすることができよね。

それって、PWAに対応しているということなのかな？

VSCodeがPWAに対応しているんだけど、ネイティブ版があるところにPWAでインストールすることもないか…

PWAの手段

1. WebサイトをHTTPS化
2. マニフェストファイルを作成
3. Service Workerを設定

マニフェストファイル

つぎのようなJSONファイルを作成する。

{
  "name": "My PWA",
  "short_name": "My PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "icon.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ]
}

HTMLにつぎのリンクを貼る。

<link rel="manifest" href="/manifest.json">

Service Worker

Service Workerに登録するにはつぎのようにすればいいらしい。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      // Service Workerの登録に成功
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // Service Workerの登録に失敗
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}