AndroidのPWA

AndroidデバイスでPWAをインストールして実行するには、以下の手順を実行します。

1. ChromeでアプリのURLにアクセスします。

2. ［Add (my app) to Home screen］バナーをタップします。

   

3. Androidのホーム画面にショートカットが追加されたことを確認したら、ストアからインストールした他のアプリと同様にアプリを開きます。他のAndroidアプリと同様にアンインストールすることができます。

   

iOSのPWA

iOSデバイスでPWAをインストールして実行するには、以下の手順を実行します。

1. SafariでアプリのURLにアクセスします。

2. ［Share］ボタンをタップします。共有メニューが開きます。

   

3. ［Add to home screen］をタップします。確認画面が開きます。

   

4. 確認画面で、［Add］をタップします。

   

5. これで、アプリがホーム画面に表示されます。他のiOSアプリと同様にアンインストールすることができます。

   

PWAのプロパティを変更する

Service StudioのUIを使用して、アプリの名前、説明、色、ロゴを編集できます。必ずアプリを再パブリッシュしてください。

Service Studioで編集可能なマニフェスト値

マニフェストは、Service Studioによって自動的に生成されます。マニフェストは、値を上書きする必要がある場合にのみ変更します。Service StudioのUIから以下のマニフェストオプションを編集できます。

（*）Service Studioによって、4つの必要なアイコンの解像度が生成されます。

マニフェストの設定を上書きする{#override-pwa-manifest}

マニフェストを使用すると、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）の場合、インストールプロンプトがネイティブで提供されているためプラグインは不要です。

トグルボタンが有効でない

まだアプリを再パブリッシュしていない場合は、開発インフラでアプリを再パブリッシュしてから［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］に移動し、ドメインを検索してデータを消去します。