TL;DR
[versions]
# ...
+ yuyuyuyuyu-composePwa = "0.1.0"
[libraries]
# ...
[plugins]
# ...
+ yuyuyuyuyu-composePwa = { id = "dev.yuyuyuyuyu.composepwa", version.ref = "yuyuyuyuyu-composePwa" }
と
// ...
plugins {
// ...
+ alias(libs.plugins.yuyuyuyuyu.composePwa)
}
を追記して Gradle project sync して
./gradlew :composeApp:buildPWA
を実行すればOK
composeApp/build/dist/wasmJs/productionExecutable/ にPWAとしてビルドされたWebアプリが出力されます
（./gradlew :composeApp:wasmJsBrowserDistribution を ./gradlew :composeApp:buildPWA で置き換えるイメージです）
はじめに
AndroidエンジニアだってWebアプリ作りたくなる時くらいありますよね？！？！？！
でもやっぱりスマホにインストールしてオフラインで動かしたいですよね？！？！？！？
普段使っている技術スタックでWebアプリを作ってそれをスマホにインストールできたらうれしいですよね？！？！？！
でもCompose Multiplatformで作ったWebアプリをPWA化するライブラリ（プラグイン）が無い！！！！！！😭
ということで作りました
ComposePWAの導入方法
gradle/libs.versions.toml と composeApp/build.gradle.kts でそれぞれ下記のように追記し、 gradle sync すればOKです
[versions]
# ...
+ yuyuyuyuyu-composePwa = "0.1.0"
[libraries]
# ...
[plugins]
# ...
+ yuyuyuyuyu-composePwa = { id = "dev.yuyuyuyuyu.composepwa", version.ref = "yuyuyuyuyu-composePwa" }
// ...
plugins {
// ...
+ alias(libs.plugins.yuyuyuyuyu.composePwa)
}
// ...
使い方
基本的には
./gradlew :composeApp:buildPWA
を実行するだけでOKです
./gradlew :composeApp:buildPWA を実行することで、Compose Multiplatformで作ったWebアプリがPWAとしてビルドされ、 composeApp/build/dist/wasmJs/productionExecutable/ に出力されます
出力されるPWAをカスタマイズしたい場合
アプリアイコンを独自のものにする場合
アプリアイコンを独自のものにしたい、という場合は ngx-pwa-icons が便利です
アプリアイコンのPNGファイルがあるフォルダで
npx ngx-pwa-icons
を実行し、出来上がった icons/ で composeApp/src/wasmJsMain/resources/icons/ を置き換えてください。
※ ngx-pwa-icons の実行にはNode.jsが必要になります
それ以上のカスタマイズがしたい場合
自動生成された composeApp/src/wasmJsMain/resources/manifest.json や composeApp/workbox-config.js をいじってください
内部的にはnpmモジュールの workbox-cli を使っています
Workboxのドキュメント
workbox-cliを呼び出している箇所
ComposePWAはなにをするのか
buildPWA というGradleタスクを提供します
buildPWA は呼び出されると
- ビルドキャッシュの削除（前回のビルドで生成されたサービスワーカーを削除するため）
- 依存しているnpmモジュールの同期（念のため）
- 必要なHTMLタグの追記（既に存在していたらスキップ）
- 必要なファイルの生成（既に存在していたらスキップ）
- Webアプリとしてビルド
- サービスワーカーの生成
を行い、Compose MultiplatformのソースコードをPWAとしてビルドします
composeApp/src/wasmJsMain/resources/index.html にどのような変更を加えるのか
<!doctype html>
<html lang="en">
<head>
<!-- ... -->
+ <script type="application/javascript" src="registerServiceWorker.js"></script>
+ <link rel="manifest" href="manifest.json">
</head>
<!-- ... -->
<html>
自動生成されるファイルたち
- composeApp/workbox-config.js
- composeApp/src/wasmJsMain/resources/icons/icon-*.png
- composeApp/src/wasmJsMain/resources/manifest.json
- composeApp/src/wasmJsMain/resources/registerServiceWorker.js
Workboxが分かる人向け
デフォルトのキャッシュ戦略
デフォルトのキャッシュ戦略は Stale-while-revalidate にしてあります
基本的にキャッシュから読み込みつつ更新があるかチェック、更新があったらバックグラウンドでダウンロードしておいて次回起動時に差し替える、というやつです
おわりに
Compose Multiplatform製のWebアプリをPWA化するプラグインを作ったと言ってはいますが、やっていることはほとんど gradle-node-plugin を使って workbox-cli を呼び出しているだけ、なのでこれらを作ってくださった偉大なる先人たちに圧倒的感謝です！！！！！！
おまけ
GitHub Pagesでホストするには
ComposePWAを使ってPWA化したWebアプリをGitHub Pagesでホストしているので、参考までにそこで使っているGitHub Actionsのリンクを貼っておきます