プログレッシブWebアプリ(PWA)として配布
プログレッシブWebアプリ(PWA)は、ネイティブアプリを配布することなく、ネイティブのようなエクスペリエンスを提供します。PWAは既存のWeb開発手法と最新ブラウザの機能を組み合わせた新しいテクノロジーです。
PWAには主に以下のようなメリットがあります。
- 管理を効率化できます。ネイティブモバイルアプリとは異なり、アプリストアを必要としません。
- Webブラウザテクノロジーに基づき、プラットフォームに依存しません。AndroidとiOSで同じアプリを実行できます。また、OutSystemsでは、アプリをPWAとして配布することやAndroid/iOS用のネイティブビルドとして配布することができます。
- 変更をOutSystems環境にパブリッシュするとすぐに更新されます。
- ユーザーデバイスのシステムリソースへの負荷が軽量です。
- OutSystemsでPWAを開発すると、ローコード開発のメリットをフル活用できます。それだけでアプリのPWA配布を有効にする意義は十分にあります。
OutSystemsでは、PWAはモバイルアプリの配布モードです。モバイルアプリはモバイルアプリランタイムに含まれ、このタイプのデフォルトのアプリテンプレートはPhone AppとTablet Appです。PWAとしてユーザーに提供する新しいアプリをService Studioで作成する場合は、それらを選択します。モバイルアプリを、ネイティブモバイルアプリとPWAの両方として同時に配布することができます。
前提条件
アプリをPWAとして配布するには、以下が必要です。
- Service Studio 11.6以降
- Platform Server 11.9以降
- LifeTime Oct.2019 CP1以降
- HTTPS通信を行うことができる有効なSSL証明書
アプリを作成してPWAを有効にする
モバイルアプリを作成し、アプリの詳細で[Distribute as PWA]トグルをオンにします。
-
新しいアプリの作成を開始し、[New Application]ウィンドウで[Phone App]または[Tablet App]アプリテンプレートを選択します。
既存のモバイルアプリを使用してPWA配布を有効にできます。モバイルアプリがネイティブAndroidビルドまたはiOSビルドでのみ動作するネイティブプラグインを使用している場合は、ユーザーエクスペリエンスを確認します。
-
アプリに画面とロジックを追加します。
-
アプリをパブリッシュします。
-
アプリの詳細の[Distribute]タブで、[Distribute as PWA]トグルをオンにします。[Distribute]タブを見つけるには、Service Studioのホーム画面に戻り、アプリケーションアイコンをクリックします。
[Distribute as PWA]の値を変更した後、アプリを再パブリッシュする必要はありません。この変更はすぐに有効になります。
モバイルのベストプラクティス(特に軽量なローカルストレージの設計)は、PWAの開発にも適用されます。
PWAを実行する
PWAの実行手順を以下に示します。Service Studioでアプリの詳細に移動し、[Distribute]タブをクリックします。
- モバイルデバイスでPWAを開くには、QRコードをスキャンします。
- デスクトップブラウザでPWAを開くには、リンクをクリックします。
AndroidのPWA
AndroidデバイスでPWAをインストールして実行するには、以下の手順を実行します。
-
ChromeでアプリのURLにアクセスします。
-
[Add (my app) to Home screen]バナーをタップします。
-
Androidのホーム画面にショートカットが追加されたことを確認したら、ストアからインストールした他のアプリと同様にアプリを開きます。他のAndroidアプリと同様にアンインストールすることができます。
iOSのPWA
iOSデバイスでPWAをインストールして実行するには、以下の手順を実行します。
-
SafariでアプリのURLにアクセスします。
-
[Share]ボタンをタップします。共有メニューが開きます。
-
[Add to home screen]をタップします。確認画面が開きます。
-
確認画面で、[Add]をタップします。
-
これで、アプリがホーム画面に表示されます。他のiOSアプリと同様にアンインストールすることができます。
PWAをカスタマイズする
以下の方法でアプリをカスタマイズできます。
- アプリの詳細画面で詳細を編集する。
- 拡張構成でPWAマニフェストの設定を上書きする。
PWAのプロパティを変更する
Service StudioのUIを使用して、アプリの名前、説明、色、ロゴを編集できます。必ずアプリを再パブリッシュしてください。
Service Studioで編集可能なマニフェスト値
マニフェストは、Service Studioによって自動的に生成されます。マニフェストは、値を上書きする必要がある場合にのみ変更します。Service StudioのUIから以下のマニフェストオプションを編集できます。
Service Studioのプロパティ | マニフェストキー |
---|---|
アプリケーション名 | name |
アプリケーションの説明 | description |
アプリの初期色 | theme_color |
アプリケーションのロゴ* | icons |
(*)Service Studioによって、4つの必要なアイコンの解像度が生成されます。
マニフェストの設定を上書きする{#override-pwa-manifest}
OutSystemsは、LifeTimeでPWAの拡張構成を上書きすることができない問題を特定しました。開発チームが修正作業を行っています。ただし、Service Studioでは引き続き拡張構成を使用できます。
LifeTimeのPWAマニフェストによってService Studioのマニフェストが上書きされることに留意します。
マニフェストを使用すると、Service Studioで設定した値が上書きされます。[Extensibility Configurations]フィールドのJSONの[PWAManifest
]セクションでマニフェストを使用する必要があります。以下の2箇所でマニフェストを編集できます。
- Service Studioでは、すべての環境で、すべてのUI設定がマニフェストによって上書きされます。モジュールのプロパティの[Extensibility Configurations]フィールドでJSONマニフェストを編集します。
- LifeTimeでは、現在の環境のみで、すべてのUI設定がマニフェストによって上書きされます。[Extensibility Configurations]フィールドは、[Applications > (アプリ名) > Settings > Advanced > Extensibility Configurations]にあります。
マニフェストのリソースとサンプルJSON
Web App Manifest Generatorを使用してマニフェストを生成したり、このサンプルでテストを行ったりすることができます。
{
"PWAManifest":{
"name":"Name overridden",
"short_name":"ShortName overridden",
"description":"Description overridden",
"theme_color":"#EDEDED",
"background_color":"black",
"dir":"ltr",
"orientation": "portrait",
"serviceworker":{
"src":"/PWAServiceWorker/scripts/PWAServiceWorker.ServiceWorker.js"
}
}
}
このJSONは、PWAとプラグインの両方で使用できます。
iOSのPWAのインストールプロンプト
プロンプトを使用すると、アプリのPWAバージョンをインストールできることをユーザーに知らせることができます。iOSデバイスの場合、コミュニティで提供されているPrompt to Install PWAプラグインを試すか、カスタムソリューションを開発します。
Android(Chrome)の場合、インストールプロンプトがネイティブで提供されているためプラグインは不要です。
PWAでプラグインを使用する{#plugins}
これらは、PWAで正式にサポートされているプラグインです。
- Camera Plugin、バージョン6.0以降
- Location Plugin、バージョン5.1以降
まもなく他のプラグインも追加されます。また、独自のプラグインをForgeに投稿することもできます。
PWAをデバッグする
PWAをデバッグするには、Google Chromeでアプリをエミュレートします。[Debugger]タブに移動し、[Debug Setup]で[Emulate using Chrome]を選択します。
トラブルシューティング
PWAを修正するときに役立つトラブルシューティングのヒントを以下に示します。
トグルボタンが有効でない
まだアプリを再パブリッシュしていない場合は、開発インフラでアプリを再パブリッシュしてから[Distribute as PWA]トグルをオンにします。新しい機能が正しく動作するには、Platform Serverのアップグレードリストの手順に従って、Platform Serverをアップグレードした後にアプリを再パブリッシュする必要があります。
PWAの無効なホームURLを取得している
環境のURLと一致するURL(例: https://example.com/
)を取得しているためにPWAを読み込むことができない場合、アプリのホームモジュールを設定しているかどうかを確認します。
アプリの詳細画面を開きます。[Test in browser]ボタンが無効になっている場合は、アプリにモジュールが定義されていません。モジュール名の右側にある巻き矢印アイコンをクリックし、そのモジュールをホームモジュールに設定します。PWAの読み込みを再試行します。
PWAのデバッグが開始しない
PWAのデバッグを開始すると、[Waiting for application]ウィンドウが開いたままになり、何も起こりません。
この問題を修正するには、デバッガを[Emulate using Chrome]に設定してから[Start debugging]をクリックします。デバッガの[Android device]オプションと[iOS device]オプションは、アプリがネイティブビルドとして配布されている場合にのみ使用でき、アプリがPWAとして配布されている場合は使用できません。
LifeTimeで拡張構成を適用した場合に上書きすることができない
LifeTimeで拡張構成を適用してマニフェストを上書きする場合に関する問題があります。チームが修正作業を行っています。ただし、Service Studioでは引き続き拡張構成を使用できます。
iOSでPWAがインストールされない
Platform Server 11.7以前およびiOS 13以降を使用している場合は、以下のいずれかを行う必要があります。
-
Platform Server 11.8以降へのアップグレード
-
Web SQLの無効化[Settings > Safari > Advanced > Experimental Features]に移動し、[Disable Web SQL]がオフになっていることを確認します。
iOS 13.0~13.2でPWAが動作しない
iOSバージョン13.0~13.2でPWAが正しく動作しないというiOSのバグがあります。この問題を修正するには、iOS 13.3以降を使用してください。
PWAが低速でクエリの実行に時間がかかりすぎる
PWAのパフォーマンスが悪くクエリの実行に時間がかかりすぎる場合は、ローカルストレージモデルが複雑すぎる可能性やアプリで処理する必要があるデータの量が多すぎる可能性があります。詳細については、軽量なローカルストレージの設計に関する推奨事項をご覧ください。
PWAを有効にすると「not connected to the environment」というエラーが発生する
PWAを有効にしようとしたとき、Service Studioで「There was an error connecting to your development environment. Confirm your connection and retry.」というエラーが発生します。
この問題を修正するための案をいくつか示します。
-
「https」で始まる環境のURLを入力してService Studioに接続します。たとえば、
http://myenvironment.example.com
に接続する代わりに、https://myenvironment.example.com
に接続します。その後、PWAの有効化を再試行します。 -
SSL証明書が有効で適切に構成されているかどうかを確認します。モバイルアプリをネイティブビルドやPWAとして配布する場合は、サーバーとセキュアな通信を行うための証明書が必要です。詳細については、「HTTPSセキュリティを適用する」の注記をご覧ください。
実行時エラーがある
アプリのローカルデータを削除してみます。ブラウザで設定を探し、アプリのインストールドメインのデータを消去します。Chromeの場合、[Settings > Site Settings > Cookies and site data > See all cookies and site data]に移動し、ドメインを検索してデータを消去します。