Skip to main content

 

モバイルアプリのデリバリー

 

モバイルアプリにのみ適用されます

 

OutSystems

早期アクセス - プログレッシブWebアプリ(PWA)として配布

このドキュメントは未完成です。PWA機能専用のフォーラムトピックにフィードバックをお寄せください。

プログレッシブWebアプリ(PWA)は、ネイティブアプリを配布することなく、ネイティブのようなエクスペリエンスを提供します。OutSystemsでPWAを開発する場合は、モバイルアプリを作成してPWA機能を有効にするだけでよいため、ローコード開発の利点をすべて利用できます。

前提条件

アプリをPWAとして配布するには、以下の要件を満たしている必要があります。

  • Service Studio 11.6.21.8208以降
  • Platform Server 11.7.0.3110以降
  • LifeTime Oct.2019 CP1以降
  • LifeTimeの早期アクセス機能の有効化

プログレッシブWebアプリを作成する

Distribute]タブは、LifeTimeでこの機能をアクティベートした後にのみ使用できます。

モバイルアプリを作成し、アプリの詳細で[Distribute as PWA]トグルをオンにします。

  1. 新しいアプリの作成を開始し、[New Application]ウィンドウで[Phone App]または[Tablet App]アプリテンプレートを選択します。PWA機能はモバイルアプリでのみ機能します。ご注意ください。
  2. アプリに画面とロジックを追加します。
  3. アプリをパブリッシュします。
  4. アプリの詳細の[Distribute]タブで、[Distribute as PWA]トグルをオンにします。[Distribute]タブを見つけるには、Service Studioのホーム画面に戻り、アプリケーションアイコンをクリックします。

    プログレッシブWebアプリの配布をアクティベートするPWAトグル

Distribute as PWA]の値を変更した後、アプリを再パブリッシュする必要はありません。この変更は、リアルタイムで適用されます。

早期アクセスの段階で、本番サーバーなどの別の環境にアプリをステージングする場合は、Service Studioで環境に接続し、その環境のPWAをアクティベートする必要があります。

プログレッシブWebアプリを試す

PWAの実行手順を以下に示します。アプリの詳細に移動し、[Distribute]タブをクリックします。

  • モバイルデバイスで開くには、QRコードをスキャンします。
  • デスクトップブラウザで開くには、リンクをクリックします。

プログレッシブWebアプリを実行するためのQRコードとリンク

AndroidのPWA

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

  1. ChromeでアプリのURLにアクセスします。
  2. Add (my app) to Home screen]バナーをタップします。

    Androidへのアプリのインストール

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

    Androidのホーム画面のPWA

iOSのPWA

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

iOSのバグにより、PWAはiOSバージョン13.0~13.2では動作しません。代わりにiOS 13.3以降を使用してください。

iOS 13以降を実行している場合、iOSでPWAを実行するには、Web SQLの設定を有効にする必要があります。[Settings > Safari > Advanced > Experimental Features]に移動し、[Disable Web SQL]がオフになっていることを確認します。

iOSのSafariのWeb SQLの設定

これで、URLにアクセスしてアプリをインストールできます。

  1. SafariでアプリのURLにアクセスします。
  2. [Share]ボタンをタップします。共有メニューが開きます。

    iOSのSafariのShareボタン

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

    iOSの共有オプション

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

    iPhoneのホーム画面への追加を確認する

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

    iOSの共有オプションによりホーム画面に追加する

アプリをカスタマイズする

以下の方法でアプリをカスタマイズできます。

  • アプリの詳細画面で詳細を編集する
  • 拡張構成でPWAマニフェストを使用して設定を上書きする

アプリのプロパティを変更する

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

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

マニフェストは自動的に生成されます。一部の値を上書きする場合を除き、マニフェストを使用する必要はありません。Service StudioのUIから以下のマニフェストオプションを編集できます。

Service Studioのプロパティ マニフェストキー
アプリケーション名 name
アプリケーションの説明 description
アプリの初期色 theme_color
アプリケーションのロゴ* icons

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

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

LifeTimeのPWAマニフェストによってService Studioのマニフェストが上書されることに留意します。

マニフェストを使用すると、Service Studioで設定した値が上書きされます。[Extensibility Configurations]フィールドのJSONの[PWAManifest]セクションでマニフェストを使用する必要があります。以下の2箇所でマニフェストを編集できます。

Service Studioでは、すべての環境で、UIで行った設定がマニフェストによって上書きされます。モジュールのプロパティの[Extensibility Configurations]フィールドでJSONマニフェストを編集します。 LifeTimeでは、現在の環境のみで、UIで行った設定がマニフェストによって上書きされます。[Extensibility Configurations]フィールドは、[Applications]タブの[Advanced]セクションにあります。

マニフェストのリソースとサンプル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"
      }
   }
}

PWAのプラグイン{#plugins}

早期アクセスの段階で、PWAで正式にサポートされているCamera Pluginを試すことができます。

間もなく他のプラグインも追加されます。また、独自のプラグインをForgeに投稿することもできます。

デバッグ

現在、PWAではデバッガーを利用できません。PWAに関する実行時の問題をトラブルシューティングするには、ブラウザのデバッグ機能を使用することをお勧めします。

トラブルシューティング

PWA機能のトラブルシューティングに役立ついくつかの補足を以下に示します。

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

Platform Serverのアップグレードリストの指示に従って、新しい機能が正しく動作するように、Platform Serverのアップグレード後はアプリを再パブリッシュする必要があります。ご注意ください。まだアプリを再パブリッシュしていない場合は、開発インフラでアプリを再パブリッシュしてから[Distribute as PWA]トグルをオンにします。

再パブリッシュの手順を実行することなくPWAトグルボタンを機能させるには、現在のモジュールを1回再パブリッシュしてから[Distribute as PWA]トグルをオンにしてみるという回避策も考えられます。ただし、アップグレード後にアプリを再パブリッシュすることは必須の手順であり、これをスキップすると意図しない影響が生じる可能性があることに留意します。