6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

TWA試してみた

Posted at

先日GooglePlayでPWAを配信できるようになったという記事を見て、試してみた記事になります。
詳細は元の記事を読むといいと思います。

ざっくり要約

仕組みとしてはTrusted Web Activity(TWA)というものを使ってネイティブアプリ内でWebコンテンツを起動するようです。
メリットとしてはアプリとPWAでキャッシュを共有できたり、ネイティブAPIの一部(今はプッシュ通知くらい?)が使えるっぽいです。

サンプルを試す

まずは公開されているサンプルをそのまま試す手順です。
とは言えリンク先GitHubのREADMEに手順が書いてあるのでほぼそれをやるだけです。
この確認はエミュレータで行いました。

  1. 上記ページからcloneしてくる。
  2. chromeアプリを起動してchrome://flagsを開き、Enable commmand line on non-rooted devicesを有効にする。
  3. エミュレータを起動した状態でcloneしたプロジェクト内のenable-debug.shを実行する。その際、引数に https://svgomg.firebaseapp.comを指定する。
  4. cloneしたプロジェクトを実行する。

注意点としてはエミュレータでchromeを使うためには最新のNexus5Xを使う必要があったくらいです。
当初、古いバージョンを使っていてEnable commmand line on non-rooted devicesの設定がありませんでした…

自分で用意したPWAに繋ぎ変えてみる

上記が動いたので今度は自分で用意したPWAを表示してみます。

1.build.gradle(Module:app)を開き、manifestPlaceholdersを修正する。例としてhttps://hogehoge.comを表示するものとします。

build.gradle
manifestPlaceholders = [
    // The hostname is used when building the intent-filter, so the TWA is able to
    // handle Intents to open https://svgomg.firebaseapp.com.
    hostName: "hogehoge.com",
    defaultUrl: "https://hogehoge.com",
    launcherName: "SVGOMG TWA",
    // This variable below expresses the relationship between the app and the site,
    // as documented in the TWA documentation at
    // https://developers.google.com/web/updates/2017/10/using-twa#set_up_digital_asset_links_in_an_android_app
    // and is injected into the AndroidManifest.xml
    assetStatements: '[{ "relation": ["delegate_permission/common.handle_all_urls"], ' +
        '"target": {"namespace": "web", "site": "https://hogehoge.com"}}]'
]

2.enable-debug.shをhttps://hogehoge.comを引数にして実行する。
3.ビルドして実行する。

と、やればできると思ったんですが、私の環境だとエミュレータでは動きませんでした。
Chromeを入れろ的なToastが出て、ページが開きませんでした。もちろん先のサンプルが動いたものなのでchromeのバージョンなどには問題ないはず。
そこで試しに実機をつないでやってみましたらさらっと動きました…なぜだ…

まとめ

本来はDigital Asset Linksというのを使ってPWAのサイト側で認証させる必要があるらしいのですが、今回はそれをシェルで行っている処理ですっ飛ばすようにしてるし本当にお試しというレベルです。
まだまだほとんど情報がなかったので参考になれば幸いです。

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?