Ionic Portalとは
iOSやAndroidのネイティブアプリの一部にIonicで作ったWebアプリケーションを組込めるようにする開発環境。2021年9月にリリースされた。
命名はHTMLのportalタグを意識しているものだと思われる。
WebとiOS/Androidネイティブを統合したハイブリッドアプリ(日本ではなぜか"ガワネイティブ"と呼ばれることがある)を構築するためのベストな方法はないものか〜と探していた時にニュースを見かけたので検証をしてみた。
利用料金
開始は無料。商用利用時にアプリの年間収益によってライセンスが適用される。現在はARR1Mドル超えたら問い合わせしろと書いてある。
似た技術
React Native
React技術でネイティブアプリを作るためのフレームワーク。ライブラリとして既存のアプリに組込める。
Integration with Existing Apps · React Native
Strada
Hotwireで構成したWebアプリケーションをWebViewで動かしてOSネイティブな機能を呼び出せるよう統合したもの。
Trusted Web Activity, TWA(Android)
Progressive Web AppをChrome Custom Tabsで読み込んでAndroidアプリに統合する機能の名称。ネイティブアプリ部分のコードはユーザーが自由に書ける。
Trusted Web Activity - Chrome Developers
Ionic Portal = Micro Frontendsなのか
公式サイトにはMicro Frontendsと書いているけどマーケティングのために入れている文言っぽいので深追いはしていない。
デプロイを分散できてないから狭義のMicro Frontendsではない。Monorepoチュートリアル を見ても、Modular App Developmentのが近い。
ハイブリッドアプリについて
ハイブリッドアプリの試みは歴史的に見ると死屍累々ではあるんだけど*1 アプローチとしては枯れているので現場では結構使われている。
最近見かけた事例だとメルカリShopsがハイブリッドアプリ構成になっていた。
ハイブリッドアプリの目的
様々なモバイルアプリフレームワークの選択肢ある中、ネイティブ+Webのハイブリッドアプリにする目的としては以下がある。
ネイティブアプリファースト
技術的な制約によりすべてをWeb技術で作りたいわけではなくて、あくまでネイティブアプリが主軸にあって一部の画面をWebアプリケーション化することで開発コスト削減と保守性の向上がしたい。
このためネイティブ実装をする箇所とWebアプリケーションとして作る箇所を適切にコントロールできるのが好ましい。
オンラインアップデート
App Storeへのアップロードを通さずにアプリをアップデートすること。機能としてはover-the-air (OTA)対応と呼ぶこともある。
ハイブリッドアプリの場合、これはWebViewで読み込む先がインターネット上のURLなので自動で適用される。
しかし従来のIonic App, Cordva Appではアップデートはアプリのパッケージに含めるJavaScriptやHTMLを生成し直してアプリストアで再配布する必要がある*2。この場合OTAには対応していないがオプションはあるので後述する。
Ionic Portalの使い方
Getting Started Guide - Ionic Portals
ドキュメントがここにある。要約すると以下の流れになる
- 既存のiOS/AndroidアプリにIonicPortalsモジュールを組込む
- ネイティブアプリのリソースにIonicで構成したWebアプリケーションをバンドルしIonicPortalsから呼び出せるようにする
- ネイティブアプリの使いたい箇所でIonicPortalsからIonicアプリを呼び出して画面に表示する
この部分のソースコードは公開されていて内部的にはCAPBridgeViewControllerやCapacitorWebViewを活用している。
Ionic Portalでオンラインアップデート
Ionic Portalはそのままだとアプリに組込まれたローカルなWebViewで実行されるのでオンラインアップデートには対応していない。
オンラインアップデートを実現するためにはAppflowのLive Updatesという別の機能へ対応する必要がある。
Ionic Portalがどういう用途に向いていそうか
既存のネイティブアプリへの埋め込み
既にIonicでアプリを構成しているならそれをネイティブアプリに組込むのは簡単で、Ionicチームもそういう用途を想定していると思う。
https://github.com/ionic-team/portals-ecommerce-demo のリポジトリでも一画面ごとに全部分割して個別のWebViewで描画するストーリーで開発してある。
Webアプリケーションから直接OSネイティブな機能を呼び出したいアプリ
Ionic PortalのコンテキストからはCapacitorプラグインが利用できるため。デバイスのカメラ機能や位置情報取得を呼び出すことができる。
ただ、OSネイティブな機能の呼び出しはハイブリッドアプリのネイティブ実装部分で行えばいいという方針ならIonicを経由する理由は薄い。
ハイブリッドアプリの課題
先のメルカリShopsの事例にあるようにハイブリッドアプリ構成時にはネイティブアプリのみだと必要なかった独自の工夫が必要になる。
サンドボックス化
OSネイティブな機能の呼び出しをJavaScriptのようなバイナリの外のリソースから呼び出す仕組みを作る時に、不正な呼び出しを防いだり安全性を担保する必要があって、それができてないフレームワークはApp Storeレビューによって弾かれるケースがあった。
メルカリShopsではWebアプリケーションのドメインとネイティブ実装のレイヤーでこれを対応して、オンラインアップデートを生かしたままネイティブ実装の処理をJavaScriptの関数でブリッジ呼び出し可能にしている。
Ionicやその基盤のCapacitorでの基本戦略ではローカルなWebViewに限定することでサンドボックス化が実現されている。これによってオンラインアップデートをする場合にAppflowのLive Updatesを組込む必要がある。
認証
ネイティブ実装と独立した複数のWebView間でログインしたユーザーのセッションを引き継ぐ必要がある。
メルカリShopsではメルカリ本体の認証APIを使って認証されCookieでセッションが継続される。
https://github.com/ionic-team/portals-ecommerce-demo ではネイティブ実装部分でSwiftやJavaで個別に実装して、それをIonicプラグイン化してWebアプリケーションからも参照するという方針が示されている。
この他にも公式ドキュメントでは必要になった呼び出し時にインジェクションするなどの例がある。いづれにせよハイブリッドアプリ特有の認証レイヤーが必要になってくる。
まとめ
- Ionic Portalは複数のIonicアプリを既存のアプリに組込みやすくするもの
- ハイブリッドアプリ技術はまだ発展の余地がある
*1: ハイブリッドアプリ駄目じゃん例としてよくあげられるニュース： Facebook:「HTML5に賭けたのは間違い」発言の技術的な理由と反応
*2: オンラインアップデートの障壁はReact NativeやExpoでも条件は同じ
