PWAでインストール可能にするための最小構成 #PWA

はじめに

多分これが一番小さいと思います

実際のコード

とりあえずPWAをインストールするための最小構成なので、個々の細かい仕様には触れません

検証環境

OS: Windows
ブラウザ: Chrome

PWAをインストール可能にするために必要なこと

MDNのサイトに書いてあるものの意訳をします

1, 正しい記述のウェブマニフェスト
2. セキュアドメイン(https)
3. デバイス上のアプリを表すアイコン
4. アプリをオフラインで動かすためのサービスワーカー

上記を満たせばインストール可能になります

必要なファイル

必要なファイルは以下の通りです

以下を用意すれば要件の 1, 3, 4 を満たすことができます

index.html
sw.js
manifest.json
icon.png

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- マニフェストファイルを読み込むためのlinkタグ -->
  <link rel="manifest" href="manifest.json">
  <title>最小構成 PWA</title>
</head>
<body>
  <h1>最小構成 PWA</h1>
  <!-- サービスワーカーを登録するためのscriptタグ -->
  <script>
      navigator.serviceWorker.register("./sw.js");
  </script>
</body>
</html>

sw.js

// fetchイベントのリスナーだけあれば「オフラインで動かすためのサービスワーカー」の要件を満たすようです
self.addEventListener("fetch", (e) => {});

manifest.json

{
  "name": "最小構成 PWA",
  "short_name": "minimum installable pwa",
  "description": "インストール可能なPWAの最小構成",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "fullscreen",
  "theme_color": "#B12A34",
  "background_color": "#B12A34"
}

アイコンはサイズが512x512のものを用意して下さい

localhostでのhttps対応

最後に要件の 2 に対応します

awsなどを使う場合は適当にボタンポチポチして下さい

今回はhttpsをlocalhostで使う方法をまとめます

以下のツールを使います

serve
mkcert

証明書の作成

まずはSSL証明書を作成します

mkcertはローカルに認証局をインストールして、コマンドで証明書を発行するためのツールです

READMEを読んで自身の環境にあった方法でインストールしてください

インストール出来たら下記のように認証局のインストールと証明書の作成をします

$ mkcert -install
Created a new local CA 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

$ mkcert localhost

Created a new certificate valid for the following names 📜
 - "localhost"

The certificate is at "./localhost.pem" and the key at "./localhost-key.pem"

httpsでwebサーバーを起動

次にserveを使ってwebサーバーを起動します

まずはserveをインストールします

$ yarn init
$ yarn add serve

#必要なファイルで作ったファイルと先ほど生成した証明書をすべて同じディレクトリに置いたうえで以下を実行してください

yarn serve --ssl-cert ./localhost.pem --ssl-key ./localhost-key.pem

これでhttps://localhost:5000にアクセスすればインストール可能になってるはずです

終わり

なぜfetchイベントのリスナーだけで「オフラインで動かすためのサービスワーカー」の要件を満たすのかとか、アイコンのサイズは512以外なら何が使えるのかとか、調べきれてないところはありますがとりあえずPWAをインストールできました