メインコンテンツまでスキップ

プレランディング上の SDK

通常、訪問者はプレランディングに到着してからインストールボタンがある PWA ストアカードへ移動します。しかし、インストールとプッシュ購読はご自身のプレランディング上で直接開始できます。Browser SDK を接続し、ご自身のボタンからそのメソッドを呼び出すだけです。これにより、訪問者はストアカードに移動せずにアプリをインストールしてプッシュを購読できます。

これにはアプリのインストールは必要ありません。プッシュ購読はインストールなしで機能します。

事前に必要なもの​

  • Qubix にアップロードしたプレランディング。 これは Websites セクション内のページです — 通常のサイトと同じ方法でアップロードしてください（ウェブサイトのアップロード をご覧ください）。
  • 設定済みでアクティブなドメイン。 プレランディングは、Qubix に設定されたアクティブなドメインで配信されなければなりません（ドメイン をご覧ください）。これは必須です。インストールとプッシュは、ページと SDK のサービスアドレスが同じドメイン上にある場合にのみ機能します。
  • 作成済みの PWA — PWA Apps セクションのカードから識別子（pwaId）が必要です。

接続方法​

  1. プレランディングのコードで、設定を記述してから SDK スクリプトを読み込みます。設定はスクリプトの前に記述します。

    index.htmlHTML
    <script>
      window.pwaConfig = {
        pwaId: 'YOUR-PWA-ID',
        domain: 'your-domain.com',
      }
    </script>
    <script src="https://your-domain.com/sdk.js" defer></script>

    プッシュキーは /sdk.js に自動的にインライン化されます — 手動で追加する必要はありません。フィールドの詳細な説明は Browser SDK リファレンス にあります。

  2. インストールの準備として SDK を初期化します — ページ読み込み時に 1 度だけ実行します。この呼び出しでサービスワーカーを登録し、アプリマニフェストを添付します。

    JavaScript
    sdk.pwa.init()

  3. インストールをご自身のボタンに紐づけます。

    HTML
    <button id="install">アプリをインストール</button>
    <script>
      document.getElementById('install').addEventListener('click', () => {
        sdk.pwa.install()
      })
    </script>

  4. プッシュ購読をご自身のボタンに紐づけます（または適切なタイミングで呼び出します）。

    JavaScript
    await sdk.subscribePush()

以上で完了です — インストールと購読はご自身のページ上で行われます。訪問者をストアカードに誘導することはありません。

ヒント

一部のシナリオでストアカードが必要な場合は、sdk.showStore() で開けます。このメソッドを呼び出さなければ、訪問者はご自身のプレランディングに留まります。

インストールはブラウザが表示する

インストールが実際に利用可能な場合にのみインストールボタンを表示してください — sdk.pwa.canInstall() で確認します。ブラウザはインストールプロンプトを常に許可するわけではありません。セキュアな接続（HTTPS）が必要であり、通常はページ上での訪問者のアクションも必要です。そのため、インストールと購読はどちらも、ページ読み込み時に発火させるのではなく、明示的なタップに紐づけるのが一般的です。

確認する​

スマートフォンでプレランディングを開いてご自身のボタンをタップすると、ブラウザがインストールプロンプトと通知プロンプトを表示します。結果はレポートで確認できます。install_accepted、push_allow などのイベントがイベントストリームに記録されます。

次のステップ​

Browser SDK リファレンス

Browser SDK の全メソッドとイベント。

ウェブサイトのアップロード

プレランディングを Qubix にアップロードする方法。

プッシュキャンペーン

購読した訪問者への通知の送信。

On this page