はじめに
多分これが一番小さいと思います
とりあえず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で使う方法をまとめます
以下のツールを使います
証明書の作成
まずは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をインストールできました