OutSystemsのモバイルアプリケーションにおいて、プラグインとは、Cordova Pluginをラップしてハードウェアにアクセスする機能を提供するもの。
特定のプラグインは、PWAでも動作するように作られています。
PWAもモバイルアプリケーションとして開発するわけですが、実質WebアプリケーションであるPWA内でどのようにして同じプラグインが動作するのか、実装を追って確認してみました。
現時点（2021/8/6）のプラグイン実装からの確認なので、あとで公式のガイドが出たら、別の作り方が推奨されるかも。
対象は、2021/8/6時点で、公式（PWAでプラグインを使用する）でPWAに対応しているCamera Plugin。
確認環境
Personal Environment(Version 11.12.0 (Build 30002))
Service Studio (Version 11.11.11)
Camera Plugin (Version 7.0.7)
Check Actionの書き方
プラグインを作るときには、そのプラグインを使えるかどうかを判定するためのCheckプラグイン名 Actionを提供することになっています。
実装は以下の通り。PWAのときは黄色に塗ったフローを通ります。
この例を見ると、
- CommonPluginに含まれるIsCordovaDefinedでCordovaが有効（＝つまりネイティブ環境で動くモバイルアプリケーション）かを判定する
- Cordovaが定義されていないときは常にIsAvailable=Trueを返す
- 定義されているときは、これまで通りネイテイブ環境のモバイルアプリケーションに必要な動作をする
という仕組み。
PWAでもネイテイブでも動作させる処理（TakePicture）
実装は以下の通り。PWAのときは黄色に塗ったフローを通ります。
Cordovaが定義されている（＝ネイティブアプリ環境）かどうかで処理を分岐しています。
Cordovaが定義されている（＝ネイティブアプリ環境の）場合
従来のプラグイン向けのロジックを「Native_処理名」を名前とするActionに切り出す。
例：TakePictureのネイティブ向け処理はNative_TakePicture Actionへ
Cordovaが定義されていない（＝PWAの）場合
「Web_処理名」を名前とするActionに切り出す。
例：TakePictureのPWA向け処理はWeb_TakePicture Actionへ
PWAではプラグインの機能をWeb APIを利用して実現するため、以下のようにJavaScriptで呼び出すWeb APIが処理の本体となる。
ここでは、Camera Plugin自体の詳細は書きませんが、大まかに言うと以下のような処理。
- 非表示のinputタグを作る（accepts=image/*、capture=camera、type=file）
- inputタグをクリックしたら、window.focusでvideoElementを削除する処理を走らせるリスナーを追加する
- reactContainer配下のDOMに追加
- 追加したvideoElementをclickする（iOSならdispatchEventで）
PWAでは動作しなくてよい or できない処理（ChooseGalleryPicture）
IsCordovaDefinedの結果がFalseであれば何もせずに終了させる。