必要なもの

Webアプリをインストール可能にするためには以下のものが必要です。

マニフェストファイル
サービスワーカー
index.html ファイル
https でのホスティング(http では不可能)

今回はWindows版のChromeでしか試していないので AndroidやiOSなどでは未検証です。

マニフェストファイル

アプリをPWAで動かすために必要なメタ情報が書かれているファイルです。

webmanifest というファイルを使うそうですが、現状はmanifest.json という名前が多く使われているらしい

それぞれのフィールドが意味するものの詳細はここに書かれているので、プロダクション運用する場合は確認しておいてください。

今回はとりあえず動かしたいのでここのジェネレーターを使います。(FireFoxだと動かなかったのでChromeを使いました。)
これ以外にもmanifest.json generator などで検索すればいろいろ出てきます。

項目	入力値
Name	my-qiita-pwa
Short Name	Qiita用PWA
Display	Standalone
Description	Qiita用アプリ
Application Scope	/
Start URL	/index.html
Theme Color	#f69435
Background Color	#ffffff
Icons	(任意の画像)

入力後に「GENERATE MANIFEST」ボタンをクリックするとmanifest.zip ファイルがダウンロードされます。

中にはリサイズされたアイコンとマニフェストファイルが入っているので展開してください。

サービスワーカー

メインのスレッドとは別のスレッドで動いており、httpのリクエストに割り込んでキャッシュを返したりすることができるようになります。またDOMには直接アクセスできません。

くわしい説明はこちらやこちらをお読みください😅

とりあえず空のキャッシュエントリを作るファイルを用意しておきます。

sw.js

const cacheName = "my-qiita-pwa-v1";

self.addEventListener("install", (e) => {
  console.log("サービスワーカーがインストールされました！");

  const cachePaths = [];

  e.waitUntil(
    caches.open(cacheName).then((cache) => {
      return cache.addAll(cachePaths);
    })
  );
});

self.addEventListener("fetch", (e) => {
  //httpリクエストの時に呼ばれる
  //ここでキャッシュがあれば返す実装をすることができる。
});

サービスワーカーはウィンドウとは別のところで実行されていて this みたいなものが self でアクセスできるようになっています。説明はこのあたり

e.waitUntil には Promiseを渡すことができます。この中のPromiseが完了するまでインストールは待機しています。

caches でキャッシュにアクセスすることができます。
細かい説明は省略します。ここでは cachePaths のリクエストに対するレスポンスの内容をキャッシュしています。
が、今回は何もしていません。

index.html

エントリポイントとなるファイルです。

マニフェストファイルの読み込みとサービスワーカーの登録を行います。

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>PWA</title>
    <!-- マニフェストファイルの読み込み -->
    <link rel="manifest" href="./manifest.webmanifest" />
    <script>
      window.addEventListener("load", () => {
        //service workerの登録
        if ("serviceWorker" in navigator) {
          navigator.serviceWorker.register("./sw.js");
        }
      });
    </script>
  </head>
  <body>
    PWAだよ！
  </body>
</html>

`https` でのホスティング

現在のルートフォルダの中身は以下のようになっています。

icon-192x192.png
icon-256x256.png
icon-384x384.png
icon-512x512.png
index.html
manifest.webmanifest
sw.js

本来はhttpsでホスティングする必要がありますが、localhost に限り http が許容されています。
今回は Node の serve を使ってホスティングします。
別にlocalhost でホスティングできるものがあれば apache やIIS などを使ってもらっても大丈夫だと思います。(未検証)

ルートディレクトリで以下のコマンドを実行します。(Node.js はインストールしておいてください)

npx serve

サーバーが起動した後は http://localhost:3000 にアクセスしてください。(クリップボードにURLがコピーされているはずです。)

インストールする

問題なく実装できていればアドレスバーに下のキャプチャのようなアイコンが表示されるはずです。

このアイコンをクリックします。

するとインストールするかを問われるのでインストールしてください。

インストールすると別ウィンドウでアプリが立ち上がります。
デスクトップにもショートカットが作成されているはずです。

アプリを削除するには Chrome の場合はアドレスバーに chrome://apps と入力すれば
アプリの一覧に今回追加したものが表示されているのでそこから削除してください。

おわりに

以上の手順でとりあえず動くものは作れるはずです。
ただキャッシュをしていないのでオフラインでは動きません。

かなり詳細は端折っていますが、まずはとっかかりにでもなればと思います。