PWA で作った台本ビューアを Svelte で作り直すことにしたので、やったことをメモしていきます。

<第2回> PWA にする

今回の概要

前回作ったアプリを PWA として配布可能にします。
vite-plugin-pwa を使うので、主にそれについて説明します。

今回使うソースコードは GitHub のこちらのコミットにあります。

vite-plugin-pwa について

Svelte のアプリを PWA にする方法として、vite-plugin-pwa を使うことにしました。

Vite のようなバンドラで出力したファイルはファイル名にハッシュ値がついていたりして、毎回 Service Worker を書き直すのは大変です。
vite-plugin-pwa を使うと、ビルド時に Service Worker やウェブマニフェストの生成もしてくれるので非常に便利です。

Service Worker やウェブマニフェストについては PWA の解説を探して (こことか) みてください。

vite-plugin-pwa の特徴

自動で Service Worker を生成する
自動でウェブマニフェストを生成する
Service Worker の更新 (アプリの新バージョンの配布) の方法を決められる
開発環境で Service Worker の動作を確認できる

プラグインのインストール

前回作ったプロジェクトに、以下のコマンドでインストールしました。

> yarn add vite-plugin-pwa -D

インストールされたバージョンは 0.13.1 でした。

つぎに、プラグインを有効化するために vite.config.ts を編集します。

vite.config.ts

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { VitePWA } from 'vite-plugin-pwa'  // これを追加

export default defineConfig({
  base: '/pscv/',
  plugins: [
    svelte(),
    VitePWA(),  // これを追加
  ],
})

これでビルド時に vite-plugin-pwa が動くようになりますが、プラグインのオプションについても少し説明します。

プラグイン・オプション

すべてのオプションについては公式のドキュメントをご覧ください。
基本的にはデフォルトで大丈夫ですが、manifest の icons は設定する必要があります。
ここでは私が設定したものを順に見ていきます。

プラグイン・オプションは VitePWA() に引数として渡します。
長くなると plugins の一覧性が悪くなるので、const で定義して渡すことにしました。

vite.config.ts (抜粋)

const pwaOptions = {
  strategies: 'generateSW' as 'generateSW', // デフォルトなので不要
  registerType: 'prompt' as 'prompt',       // デフォルトなので不要
  manifest: {
    name: '台本ビューア',
    short_name: 'PSCV',
    description: '台本データ (JSON) を読むためのビューアです。',
    icons: [],              // あとで追加します
    start_url: 'index.html',
    display: 'standalone',  // デフォルトなので不要
    background_color: '#BD913F',
    theme_color: '#916028',
    lang: 'ja',
  },
  includeAssets: ['ui_icon/*.svg'],
  devOptions: {
    enabled: true,
  },
}

export default defineConfig({
  base: '/pscv/',
  plugins: [
    svelte(),
    VitePWA(pwaOptions),  // 引数を追加
  ],
})

'デフォルトなので不要' とコメントしているところは、書かなくても同じなのですが知っておいた方が良いオプションなので書いてあります。
また最初の2つに as ～ として型アサーションしているのは、リテラル型で定義されていて文字列をそのまま入れるとエラーになるからです (もっと良い回避方法があるかも)。

strategies と registerType

strategies と registerType については、公式ドキュメントの Service Worker Strategies And Behaviors というページに説明があります。

vite-plugin-pwa はデフォルトでビルド時に Service Worker を自動生成しますが、 strategies オプションを 'injectManifest' という値にすることで、自分で Service Worker のロジックを書くことができます。
その場合はビルドしたファイルのリストを、あらかじめ書いておいた Service Worker に埋め込めるようです (試してません)。

registerType はアプリに更新があった場合にどのように Service Worker を更新するかを指定します。こちらはビルド時ではなく実行時のふるまいです。
デフォルトの 'prompt' はユーザに許可を得て更新する設定ですが、実際は許可を得る部分を作る必要があります (→参考)。
'autoUpdate' という値にすると、アプリの更新を検知したらすぐに Service Worker の更新が走るようになります。
どちらが良いかはアプリの種類によります。

manifest

manifest は自分で PWA のウェブマニフェストを書く時とほぼ同じ内容で、ビルド時にこれを元にウェブマニフェストのファイルが作られます。

プラグインが適当なデフォルト値を持っているので icons 以外は書かなくても何とかなります。
どういうオプションがあるかはソースコードの ManifestOptions 型の定義が参考になります。MDN のページや W3C のページ (或はその翻訳) にも情報があります。

display は PWA をインストールして実行した時の見た目を決めます。
デフォルトの 'standalone' がネイティブアプリらしくて良いですが、他にどんな値があるかも知っておくと良いです。
MDN にその説明をしているページがあります。

includeAssets

includeAssets でキャッシュするファイルを追加できます (→公式の説明)。
デフォルトでローカルにキャッシュされるのは、ビルドしたスクリプトとウェブマニフェストで参照しているアイコンです。それ以外の画像ファイルなどは、表示した時点でキャッシュされるようです。

includeAssets で指定したファイルはデフォルトで (Service Worker が読み込まれた時点で) キャッシュされるので、第1回で ui_icon フォルダに入れた svg ファイルなどは追加しておくと良いです。
指定するパスは public フォルダからの相対パスで、正規表現が使えます。

※この設定は GitHub のソースには入っていません。この後のコミットで追加します。

devOptions

devOptions を追加して enabled を true にすると、開発環境で Service Worker の動きを確認できるようになります。
公式ドキュメントの 'Getting Started' に簡単な説明がありますが、私がいろいろ試した結果、アイコンを正しく設定して一度ビルドしてから preview コマンドを実行 (yarn preview など) すると、開発サーバが起動してブラウザが PWA と認識するようです。

アイコンを準備する

これも vite-plugin-pwa のドキュメントに書いてありますが、Favicon Generator を使うと1枚の画像から必要なアイコンのセットを生成できます。
元になる画像は 512x512px で、角丸や丸に切り抜かれても良いように図柄を小さめにしました (→参考)。
Safari 用の mask-icon もその元画像から作れますが、モノクロの素材を別で用意しました。

アイコンを参照するようにする

上で作ったアイコンを、ウェブマニフェストや index.html から参照するようにします。

ファイル名	参照のしかた
android-chrome-192x192.png	manifest の icons で参照する
android-chrome-512x512.png	manifest の icons で参照する
apple-touch-icon.png	index.html で apple-touch-icon として参照する
favicon.ico	index.html で icon として参照する
safari-pinned-tab.svg	index.html で mask-icon として参照する

ファイルは public フォルダのサブフォルダに入れて、index.html や manifest から相対パスで参照するようにしました。
具体的な書き方は PWA Minimal Requirements にも書いてありますし、私の GitHub を見ていただいても分かると思います (画像のファイル名は変えてます)。

manifest の icons の最後にある purpose: 'any maskable' は、OS が角丸や丸に切り抜いて使って良いということだと思いますが、もともと図柄の周辺に余裕を持たせているので 512x512 のアイコンと同じ画像を指定しました。

robots.txt

PWA には robots.txt も必要なのだそうです (→参考)。
以前 PWA を作った時は robots.txt はなくても問題なかったと思いますが、いちおう作っておきます (→ソースコード)。

動作確認

ブラウザから PWA として認識されるようになったことを確認するには、いちどビルドしてから preview コマンドを実行します。

> yarn build
.....
> yarn preview
yarn run v1.22.19
$ vite preview
  ➜  Local:   http://127.0.0.1:4173/pscv/
  ➜  Network: use --host to expose

タブに favicon が表示されていること、開発ツールで Service Worker が認識されていること、タブメニューに「「台本ビューア」をインストール...」が表示されていることが確認できました。
インストールメニューが出ない時は開発ツールで Storage をクリアしてリロードするなど試してみてください。

スマホで動作確認

スマホで確認するために自サバの (サーバルート)/pscv フォルダに dist フォルダの中身をアップロードしました。
サーバは https でアクセスできるようにする必要があります。

Android

PWA を認識した時の動作はブラウザによって違いますが、Vivaldi や Chrome では以下のようなプロンプトとメニュー項目が出ました。

Firefox ではプロンプトは確認できませんでしたが、インストールメニューは表示されました。

PWA をデバイスにインストールすると、Chrome と Firefox では丸いアイコンになりました (OS のバージョンや設定によると思います)。

iOS

iOS ではプロンプトが出ず、共有メニューから「ホーム画面に追加」を選べば良いようです。
追加されたアイコンをタップすると起動して PWA であることが分かりますが、インストール時や削除時の扱いはショートカットと同じのようです。

参考リンク