vite-plugin-pwa を使って PWA にする
すごい簡単にPWAにできたからメモを残しておく
パッケージを入れる
$ pnpm add -D vite-plugin-pwa @vite-pwa/assets-generator
アイコン/画像の生成
public/ 配下に置かないとだめらしいから、そうした！
package.json の script を追加して、生成する
code:json
{
"scripts": {
"generate-pwa-assets": "pwa-assets-generator --preset minimal-2023 public/logo.svg"
}
}
実行する
$ pnpm generate-pwa-asset
エラーになったから対応した
$ pnpm approve-builds
スペースを押して、 sharp を選択して、y をおした
code:sh
$ pnpm approve-builds
✔ Choose which packages to build (Press <space> to select, <a> to toggle all, <i> to invert selection) · sharp
✔ The next packages will now be built: sharp.
Do you approve? (y/N) · true
node_modules/.pnpm/sharp@0.32.6/node_modules/sharp: Running install script, done in 2.6s
~/ghq/github.com/tamago324/hogepiyo-app
これは何をしているの？
pnpm には「依存パッケージのインストール時に実行されるビルド（postinstall などのスクリプト）」をユーザーが明示的に承認する仕組みがあります。
pnpm approve-builds を使うと、ビルドが必要なパッケージ一覧が表示され、それらのパッケージを「ビルドしてよい」と明示的に許可（approve）することができます。
セキュリティとしてブロックをするらしい？
対応してから、再度実行する
$ pnpm generate-pwa-asset
生成されるから、それぞれをファイルに追加する
HTML の head を生成してくれたから、これを index.html に追加しておく
code:html
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/logo.svg" sizes="any" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
PWA の設定も生成してくれたから、設定しておく
code:json
{
"icons": [
{
"src": "pwa-64x64.png",
"sizes": "64x64",
"type": "image/png"
},
{
"src": "pwa-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "pwa-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "maskable-icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
最終的にはこうなった！
devOptions をつけないと、localhost でうまく動かなかった！
code:ts
VitePWA({
registerType: "autoUpdate",
devOptions: {
enabled: true,
},
manifest: {
name: "アプリ名",
short_name: "短いいアプリ名",
description: "説明",
theme_color: "#ffffff",
icons: [
{
src: "pwa-64x64.png",
sizes: "64x64",
type: "image/png",
},
{
src: "pwa-192x192.png",
sizes: "192x192",
type: "image/png",
},
{
src: "pwa-512x512.png",
sizes: "512x512",
type: "image/png",
},
{
src: "maskable-icon-512x512.png",
sizes: "512x512",
type: "image/png",
purpose: "maskable",
},
],
},
}),
Windows の Chrome でインストールボタンが出たから、インストールできた！
tamago324.icon すごい...これだけで PWA 化できてしまう...
iPhone もできた！
けど、下に埋め込まれてしまったから、スタイルの調整が必要そう
iPhone のホームバー (セーフエリア) と被らないようにするには、env(safe-area-inset-bottom) を使うらしい！
HTML の <head> に追加
code:html
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
footer に padding を追加
code:css
.footer {
/* iOS の Safe Area に対応 */
padding-bottom: env(safe-area-inset-bottom);
}