PWA対応WebサービスをTWAとしてGoogle Playに登録してみた

現在PWA対応のWebサイトはTWAとしてGoogle Playストアに登録してAndroidアプリとしてインストールできるようになっています。当サービスCrieitも試しにやってみました。Laravel + Laravel Mix(Vue.js)という構成です。

PWA対応

まずはサイト自体がPWA対応していることが前提ですのでそちらの準備を行います。利用しているフレームワークによっては最初からPWA対応されているものもあるのでその場合は特に設定は不要です。

色々キャッシュしてトラブルになると面倒だと思ったのでホーム画面追加機能だけ利用しました。

Workboxを導入

Service Workerの作成のためWorkboxを導入します。

yarn add -D workbox-sw workbox-webpack-plugin

デフォルトだとLaravel Mixでビルドしたファイルをキャッシュ設定にしてしまうため、今回はそれを無効にしておきました。webpack.mix.jsに下記を追記します。excludeで全無視しています。

const workboxPlugin = require('workbox-webpack-plugin')

mix.webpackConfig({
  plugins: [
    new workboxPlugin.GenerateSW({
      swDest: 'service-worker.js',
      clientsClaim: true,
      skipWaiting: true,
      exclude: [/.*/],
      runtimeCaching: []
    })
  ],
  output: {
    publicPath: ''
  }
})

PWA用のmanifest.jsonを公開ルートフォルダに作成します。

{
    "name": "Crieit - プログラマー、クリエイターが何でも気軽に書けるコミュニティ",
    "short_name": "Crieit",
    "icons": [
        {
            "src": "/img/card.png",
            "sizes": "144x144",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "display": "standalone",
    "theme_color": "#448AFF",
}

表示するHTMLにmanifest.jsonを位置を記述します。

<link rel="manifest" href="/manifest.json">

JavaScriptでService Workerの登録を行います。Laravelプロジェクト作成時に自動的に作られていたbootstrap.jsに追記しておきました。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
  })
}

これでビルドしたら完了です。ビルドすると precache-manifest.なんちゃらかんちゃら.js というファイルがされるためそれもコミットします。ただ、これは毎回生成されてしまうので、一度生成した後にwebpack.mix.jsの記述はコメントアウトしておきました。シンプルなPWA対応の場合は以後もう何も変更がありませんので。

TWA対応

次にTWAの対応です。これはAndroid StudioでAndroidアプリケーションを作成します。具体的なやり方は下記に書かれています。

【実践】Google Play Store でPWA配信 (TWA) - Qiita

ただしちょっとインストールするもののハッシュ値が古かったりするので本家も参考にすると良いでしょう。

Using Trusted Web Activities  |  Google Developers

丁度この記事を書いている最中に見つけたできたてほやほやの記事もありました。多分色々情報が最新ですので日本語情報では一番参考になりそうです。

話題のTWAでPWAをGoogle Play Storeに配信してみた

ハマったところ

build.gradle

似たようなセクションがあったりして追記するところを間違えてうまくいかなかった事がありました。

customtabsだとうまくいかない

実は前述リンクでやっているcustomtabsを使った方法ではうまくいきませんでした。ということで、代わりにandroid-browser-helperというものを使いました。なぜうまく行かなかったかというと、多分丁度最近android-browser-helperに変わったばかりで、微妙に各所の情報が古かったのではないかと。

具体的には、app/build.gradleに追記したcustomtabsのimplementationの代わりに下記を追記しました。

    implementation 'androidx.browser:browser:1.0.0'
    implementation 'com.github.GoogleChrome:android-browser-helper:ff8dfc4ed3d4133aacc837673c88d090d3628ec8'

僕は試していませんが、実は公式も変わったようなので下記のほうが正しそうです。ハッシュ値からバージョンに変わっているのでもしかしたら丁度ちゃんとリリースしたよ、というところなのかもしれません。

    implementation 'com.google.androidbrowserhelper:androidbrowserhelper:1.0.0'

あとはAndroidManifest.xmlのActivityもこれを使った形に変更が必要です。

 <activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">

assetlinks.json

あとはassetlinks.jsonを公開フォルダに追加する必要があります。前述のリンクどれでも作り方の説明が書かれています。

アイコンの調整

そのままだとデフォルトのアイコンでアプリになってしまいますので、適宜アイコンを置き換えます。最近は最新の方の機種用にXMLのアイコンファイルも作成するようです。容量自体も軽量になり、あとはforegroundとbackgroundがあり、Android側でアイコンを揺らしたりするアニメーションなどで利用されるようです。

今回は作るのが面倒だったので元々のXMLを削除することで画像を使ってもらうことにしました。

まとめ

ということでTWAの対応方法を書きました。詳しい説明と言うよりは主にハマったところをメインに書いているため詳しくは記事中のリンクを参考にしてください。