● manifest.json の作成

web app manifest generator から manifest.json を生成します。 https://app-manifest.firebaseapp.com/

以下のような jsonファイルが生成されます

{
  "name": "MY APP",
  "short_name": "myapp",
  "theme_color": "#fff",
  "background_color": "#fff",
  "display": "browser",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    }
 ]
}

index.html に記述します

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

● A2HS（ Add to home screen ）の追加

「ホーム画面へ追加」の仕組みを入れるためには以下の3つの要件があります

・1. ServiceWorkerが有効化されていること
・2. manifestファイルが読み込まれていてそこに設定が記載されていること
・3. https:// で配信されていること

引用: [PWA/A2HS]Webアプリをインストールしてホーム画面へ追加できるようにする - Qiita

● Service Workerで何ができるのか

引用元 : https://webtan.impress.co.jp/e/2019/09/02/33637

1. ネットワークリクエストの処理 ブラウザで発生するネットワークへのリクエストをService Workerが受け取り、どう処理するかを決定して実行する。

2. 事前データ読み込み Service Workerのインストール中にファイルをプリロード（事前読み込み）することも可能だ。

3.プッシュ通知 ネイティブアプリと同じように、プッシュ通知を受け取って表示できる。ユーザーが1回サイトを訪問してプッシュ通知を許可することは必要だが、それ以降は、ブラウザが開いてなくてもウェブサイトからプッシュ通知のメッセージを送り、Service Workerがそれを受け取ってコンピュータ上で表示できる。

4.バックグラウンド同期 本来ならばすぐにサーバーにデータを送信するような場合でも、オフライン状態であれば、ネットワーク接続状態が戻るまでデータ通信を保留し、あとから処理できる。