Chuyển tới nội dung chính

SDK trên trang prelanding của bạn

Thông thường, khách truy cập đến trang prelanding rồi từ đó chuyển tiếp đến trang cửa hàng PWA — nơi có nút cài đặt. Tuy nhiên, quá trình cài đặt và đăng ký push có thể được khởi chạy ngay trên trang prelanding của bạn: bạn kết nối Browser SDK và gọi các phương thức của nó từ các nút của riêng bạn. Khi đó, khách truy cập cài đặt ứng dụng và đăng ký nhận push mà không cần rời sang trang cửa hàng.

Khách truy cập không bắt buộc phải cài đặt ứng dụng: đăng ký push hoạt động mà không cần cài đặt.

Yêu cầu trước khi bắt đầu​

  • Một trang prelanding đã được tải lên Qubix. Đây là trang của bạn trong phần Websites — tải lên theo cách tương tự như một trang web thông thường (xem Tải lên website).
  • Một tên miền đã được cấu hình và đang hoạt động. Trang prelanding phải được phục vụ trên một tên miền đã được cài đặt trong Qubix và đang hoạt động (xem Domains). Đây là yêu cầu bắt buộc: cài đặt và push chỉ hoạt động khi trang và các địa chỉ dịch vụ của SDK nằm trên cùng một tên miền.
  • Một PWA đã được tạo — bạn sẽ cần mã định danh của nó (pwaId) từ thẻ trong phần PWA Apps.

Cách kết nối​

  1. Trong mã nguồn của trang prelanding, thiết lập cấu hình và tải script SDK. Cấu hình phải đặt trước script:

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

    Khoá push được nhúng tự động vào /sdk.js — bạn không cần thêm thủ công. Mô tả đầy đủ các trường có trong tài liệu tham chiếu Browser SDK.

  2. Chuẩn bị SDK cho quá trình cài đặt — một lần duy nhất khi trang tải. Lệnh gọi này đăng ký phần dịch vụ và gắn kết manifest của ứng dụng:

    JavaScript
    sdk.pwa.init()

  3. Gắn kết quá trình cài đặt với nút của bạn:

    HTML
    <button id="install">Install the app</button>
    <script>
      document.getElementById('install').addEventListener('click', () => {
        sdk.pwa.install()
      })
    </script>

  4. Gắn kết đăng ký push với nút của bạn (hoặc gọi vào thời điểm thích hợp):

    JavaScript
    await sdk.subscribePush()

Hoàn thành — quá trình cài đặt và đăng ký diễn ra ngay trên trang của bạn. Khách truy cập không bị chuyển hướng đến trang cửa hàng.

Mẹo

Nếu một kịch bản nào đó cần đến trang cửa hàng, sdk.showStore() sẽ mở nó. Không gọi phương thức này — khách truy cập sẽ ở lại trang prelanding của bạn.

Trình duyệt hiển thị xác nhận cài đặt

Chỉ hiển thị nút cài đặt khi tính năng cài đặt thực sự khả dụng — hãy kiểm tra sdk.pwa.canInstall(). Trình duyệt không phải lúc nào cũng cho phép hiển thị lời nhắc cài đặt: cần có kết nối bảo mật (HTTPS) và thường cần một thao tác của khách truy cập trên trang. Đó là lý do tại sao cả cài đặt lẫn đăng ký thường được gắn với một thao tác nhấn rõ ràng thay vì được kích hoạt khi tải trang.

Kiểm tra​

Mở trang prelanding trên điện thoại và nhấn vào các nút của bạn — trình duyệt sẽ hiển thị lời nhắc cài đặt và lời nhắc thông báo. Kết quả có thể thấy trong báo cáo: các sự kiện install_accepted, push_allow và các sự kiện khác xuất hiện trong luồng sự kiện.

Tiếp theo​

Tài liệu tham chiếu Browser SDK

Tất cả các phương thức và sự kiện của Browser SDK.

Tải lên website

Cách tải trang prelanding lên Qubix.

Chiến dịch push

Gửi thông báo đến những người đã đăng ký.

On this page