メインコンテンツへスキップ

Progressive Web Apps

Progressive Web Apps（PWA）は、最新のWeb機能を利用して、ネイティブアプリケーションと同様の体験をユーザーに提供するものです。 8th Wall Cloud Editorでは、プロジェクトのPWA版を作成し、ユーザーがホーム画面に追加できるようにすることができます。 ユーザーがアクセスするためには、インターネットに接続されている必要があります。

注意: Progressive Web Appsは有料プランのアカウントにのみ利用可能です。

WebARプロジェクトでPWAのサポートを有効にするには：

  1. プロジェクトの設定ページにアクセスし、「Progressive Web App」ペインを展開します。 (有料ワークスペースにのみ表示されます)
  2. スライダーを「PWAサポートを有効にする」に切り替えます。
  3. PWAの名前、アイコン、色をカスタマイズすることができます。
  4. "保存 "をクリックする

project-settings-pwa

注意: Cloud Editorのプロジェクトでは、以前に公開したことがある場合は、プロジェクトのビルドと再公開を促されることがあります。 再公開しない場合、PWAサポートは次回プロジェクトがビルドされるときに含まれます。

PWA APIリファレンス​

8th WallのXRExtrasライブラリは、Webアプリにインストールプロンプトを自動的に表示するAPIを提供します。

PwaInstaller API リファレンス（ https://github.com/8thwall/web/tree/master/xrextras/src/pwainstallermodule） を参照してください。

PWA アイコンの要件​

  • ファイルタイプ： .png
  • アスペクト比： 1:1
  • 寸法：
    • 最小： 512×512ピクセル
      • 注意：512x512より大きな画像をアップロードした場合、1:1のアスペクト比にトリミングされ、512x512にリサイズされることになります。

PWAインストールプロンプトのカスタマイズ​

XRExtras の PwaInstallerモジュールは、ユーザーにウェブアプリをホーム画面 に追加するよう求めるインストールプロンプトを表示します。

インストールプロンプトの外観をカスタマイズするには、XRExtras.PwaInstaller.configure() API を使用してカスタム文字列値を指定します。

完全にカスタムなインストールプロンプトを表示するには、displayInstallPromptとhideInstallPromptでインストーラーを構成します。

Self-Hosted型PWAの利用状況​

Self-Hosted型アプリの場合、PWAの詳細をHTMLに自動的に注入することはできません。configure APIを使用して、インストール時に表示させたい名前とアイコンをプロンプトに入力してください。

htmlの <head> に、以下の <meta> タグを追加してください：

<meta name="8thwall:pwa_name" content="My PWA Name">

<meta name="8thwall:pwa_icon" content="//cdn.mydomain.com/my_icon.png">

PWAコード例​

基本例（AFrame）​

<a-scene
  xrextras-almost-there
  xrextras-loading
  xrextras-runtime-error
  xrextras-pwa-installer
  xrweb>

基本例（非AFrame）​

XR8.addCameraPipelineModules([
  XR8.GlTextureRenderer.pipelineModule(),
  XR8.Threejs.pipelineModule(),
  XR8.XrController.pipelineModule(),
  XRExtras.AlmostThere.pipelineModule(),
  XRExtras.FullWindowCanvas.pipelineModule(),
  XRExtras.Loading.pipelineModule(),
  XRExtras.RuntimeError.pipelineModule(),

  XRExtras.PwaInstaller.pipelineModule(), // ここに追加

  // カスタムのパイプラインモジュールです。
  myCustomPipelineModule(),
]）。

カスタマイズルックの例（A-Frame）​

<a-scene
  xrextras-gesture-detector
  xrextras-almost-there
  xrextras-loading
  xrextras-runtime-error
  xrextras-pwa-installer="name: My Cool PWA;
    iconSrc: '//cdn.8thwall.com/my_custom_icon';
    installTitle: 'My CustomTitle';
    installSubtitle: 'My Custom Subtitle';
    installButtonText: 'Custom Install';
    iosInstallText: 'Custom iOS Install'"
  xrweb>

カスタマイズルック例（非A-Frame）​

XRExtras.PwaInstaller.configure({
  displayConfig：{
    name: 'マイカスタムPWA名',
    iconSrc: '//cdn.8thwall.com/my_custom_icon',
    installTitle: ' My Custom Title',
    installSubtitle: 'My Custom Subtitle',
    installButtonText：'Custom Install',
    iosInstallText：'Custom iOS Install',
  }.
})

表示時間のカスタマイズ例（A-Frame）​

<a-scene
  xrweb="disableWorldTracking: true"
  xrextras-gesture-detector
  xrextras-almost-there
  xrextras-loading
  xrextras-runtime-error
  xrextras-pwa-installer="minNumVisits: 5;
    displayAfterDismissalMillis: 86400000;"
>

表示時間のカスタマイズ例（非A-Frame）​

XRExtras.PwaInstaller.configure({
  promptConfig：{
    minNumVisits：5, // ユーザーはプロンプトが出るまでに5回ウェブアプリにアクセスする必要がある
    displayAfterDismissalMillis: 86400000 // 1日
  }.
})