跳到主要内容

在预落地页上使用 SDK

通常，访客会先来到预落地页，再从那里前往 PWA 商店卡片——安装按钮就在那里。但安装和推送订阅可以直接在您的预落地页上完成：接入 Browser SDK 并从您自己的按钮调用其方法。这样，访客无需离开预落地页即可安装 App 并订阅推送。

访客无需安装 App 即可完成推送订阅。

前提条件​

  • 已上传到 Qubix 的预落地页。 即 网站 板块中的页面——上传方式与普通网站相同（参见上传网站）。
  • 已配置且处于活跃状态的域名。 预落地页必须在 Qubix 中已配置且处于活跃状态的域名上提供服务（参见域名）。这是必要条件：安装和推送仅在页面与 SDK 服务地址处于同一域名时才能正常工作。
  • 已创建 PWA — 您需要从 PWA 应用 板块的卡片中获取其标识符（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. 为安装做好准备——在页面加载时调用一次。该调用会注册 service worker 并附加 App manifest：

    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