ODCのPWAを試してみる

以前、OutSystems 11にPWAがEAPとして追加されたときに以下の記事を書いた。ODCのPWAがどうなっているかをざっと確認しておきたい（モバイルAppの配布方法の一種である点は同じ）。

https://qiita.com/jyunji_watanabe/items/1643850f8663c63aabda

# ドキュメント
[Distribute as progressive web app - ODC Documentation](https://success.outsystems.com/documentation/outsystems_developer_cloud/building_apps/mobile_apps/distribute_as_progressive_web_app/)

# 環境条件
[OutSystems system requirements for ODC > Progressive web apps - ODC Documentation](https://success.outsystems.com/documentation/outsystems_developer_cloud/getting_started/outsystems_system_requirements_for_odc/#progressive-web-apps)より、最新の安定バージョンiOS/Android上のデフォルトブラウザ（それぞれSafariとChrome）で動作する。

> The default browser for the most current stable version of Android.
The default browser for the most current stable version of iOS.

# 設定
ODCでは、PWAはデフォルトで有効。
むしろ、無効化できる場所が無さそうに見える。

## PWAでは動かしたくないときどうするか？
一案としては、OutSystems UIにIsRunningAsPWA Actionがあるので、これを使ってエラーにしてしまうとか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/10fc012f-ca8d-d35a-4315-c524df90bfdf.png)


# インストール
## iOS
以下の操作でホーム画面にショートカットが追加される。
1. 端末のカメラでQRコードを読んで、SafariでそのURLを開く
1. 共有ボタンをタップ
1. Add to home screenを選択
## Android
以下の操作でホーム画面にショートカットが追加される。
1. 端末のカメラでQRコードを読んで、ChromeでそのURLを開く
1. 右上のメニューアイコンをタップ
1. ホーム画面に追加を選択
1. インストールを選択
## QRコードの場所
表示される場所は、3箇所？
①ODC PortalでMobile Appのページ > Mobile distributionタブの最下部
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/fd433ef7-fb6d-317f-ac8b-636fc5583b10.png)

②AppをPreviewしたとき、右側にAs a PWAタブの下に表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/3ef35f2f-1e91-3183-ed51-bc10965bc3c7.png)

③ODC StudioのApp一覧で、モバイルAppを選択したとき、右側にPWAタブの下に表示される

# Local Storage Entity
モバイルAppにはLocal Storage Entityというものがある。
作成する場所は、Dataタブ > Entities > Local Storageの下に作成する。作り方・使い方は通常のEntityと同じだが、クライアント端末側にデータが保存される点で違う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/12033842-5154-6d50-71ba-3caa18e77a3e.png)

↑のようにシンプルなLocal Storage Entityを作成した。続いて、UI FlowにEntityをドラッグ＆ドロップして画面を作成してテストしたところ、問題なく動作する。
これはOutSystems 11のときと同じ。

# オフライン
PWAはオフラインでも動作する。
ドキュメントにも以下のように記載されている。
> PWAs can run on a web browser with the same offline capabilities of a mobile app.

iOSにPWAアプリをインストールし、ネットワークを切断して動作を確認した。以下の点の確認ができた。

- 画面遷移
- Local Entityからのデータ取得と表示
- Local Entityへのデータ保存

Server Action呼び出しを試すと、Communication Exceptionが発生する（ので、想定通りにオフラインになっている）。

# Plugin
Pluginはモバイルアプリケーションに、ハードウェア操作等の機能を提供するもの。
[Mobile plugins - ODC Documentation](https://success.outsystems.com/documentation/outsystems_developer_cloud/integration_with_external_systems/mobile_plugins/)の、Supported in PWA列がYesになっているPluginはPWAでも利用可能。これもOutSystems 11と同じ。

Supported in PWA=YesになっているPluginの例として、Camera Pluginを使ってみたところ、カメラによる撮影は想定通り機能した。

# Debug
ドキュメントには、
> To debug a PWA, emulate the app in Google Chrome. From the Debugger tab, select Debug Setup > Emulate using Chrome.

のように書いてあるが、ODC StudioのDebugger > Debugger Setupには「Emulate using Chrome」のようなオプションは表示されなかった。
ただし、Start debuggingをクリックすると、Windows上のChromeでデバッグ自体はできた。ただ、Debugger Setup内のドロップダウンリストはたまにおかしな動きをするので、再度試したら結果が変わるかもしれない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/48e4d89f-c4db-4616-2b51-19fcf99f5db0.png)