Tối ưu hóa việc tải flow & paywall trong Capacitor SDK

Một lần tải flow hoặc paywall đáng tin cậy trên Capacitor cần đảm bảo ba điều: hiển thị nhanh, trả về biến thể đúng đối tượng mục tiêu, và fallback mượt mà khi mạng chậm. Các quy tắc dưới đây bao gồm thời điểm, caching và các mẫu fallback để đạt được điều đó.

Tip

Các quy tắc này giả định rằng adapty.activate() và adapty.identify() đã được thực thi xong. Xem Thứ tự gọi trong Capacitor SDK.

Quy tắc và lưu ý

Làm điều này	Không làm điều này	Lý do
Tải placement mà bạn sắp hiển thị.	Tải trước tất cả các placement cùng lúc khi khởi động.	Tải trước hàng loạt sẽ chặn luồng chính và gây ra màn hình đen trong quá trình tải ồ ạt.
Gọi `getFlow` sau khi attribution đã có cơ hội xử lý xong — ví dụ: 1–2 giây sau `activate` hoặc sau khi listener `onLatestProfileLoad` kích hoạt.	Gọi `getFlow` khi khởi động ứng dụng trong `App.tsx`.	Attribution chưa được xử lý xong. Flow sẽ được xác định dựa trên đối tượng mặc định và âm thầm bỏ qua các phân khúc cũng như cá nhân hóa ASA.
Đặt `loadTimeoutMs` và cấu hình paywall dự phòng cho mỗi placement.	Chờ `getFlow` vô thời hạn.	Nếu không có timeout, người dùng với kết nối kém sẽ thấy màn hình trắng cho đến khi mạng phản hồi — hoặc họ sẽ đóng ứng dụng.

Xem Tải paywall và sản phẩm để tham khảo tham số fetchPolicy và loadTimeoutMs, và Placements để chọn placement phù hợp.

Hiển thị media màn hình đầu tiên từ app bundle

Một flow tải hình ảnh và video của nó từ Adapty. Để hiển thị media của màn hình đầu tiên ngay lập tức, hãy phục vụ nó từ app bundle thay thế. Đây là cách tốt để tái sử dụng media bạn đã có sẵn trong app, chẳng hạn như hình ảnh của một onboarding gốc hiện có.

Trong Flow & Paywall Builder, đặt ID media tùy chỉnh cho hình ảnh hoặc video. File bạn tải lên đó sẽ là file dự phòng.
Thêm file vào các dự án native: bundle app iOS và thư mục assets của Android.
Khi tạo flow view, truyền file đã đóng gói cho ID đó vào customAssets:


// "welcome_video" is the custom media ID set in the Flow & Paywall Builder
const bundledAssets: Record<string, AdaptyCustomAsset> = {
  'welcome_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'welcome.mp4' },
      android: { relativeAssetPath: 'videos/welcome.mp4' },
    },
  },
};

const view = await createFlowView(flow, { customAssets: bundledAssets });

File được đóng gói sẽ tăng kích thước tải xuống của ứng dụng, vì vậy chỉ đóng gói những media mà người dùng nhìn thấy đầu tiên.

Phương tiện bạn không đóng gói vẫn hiển thị ngay lập tức: layout của flow có sẵn một bản sao độ phân giải thấp của mỗi hình ảnh, bao gồm cả ảnh tĩnh của video, và hiển thị nó cho đến khi file đầy đủ tải xong.

Để xem toàn bộ tài liệu tham khảo về customAssets, xem Tùy chỉnh assets.

Tối ưu cho kết nối kém

Đối với các thị trường có kết nối kém liên tục (khu vực nông thôn, phương tiện di chuyển, vùng bị ảnh hưởng bởi định tuyến):

Đặt fetchPolicy: 'return_cache_data_else_load' cho mọi lần tải, ngoại trừ lần đầu tiên.
Cấu hình paywall dự phòng cho mọi placement trong Adapty Dashboard.
Đặt loadTimeoutMs từ 3000–5000 milliseconds và chấp nhận paywall dự phòng khi timeout xảy ra.
Đừng chặn việc hiển thị flow vì adapty.getProfile(). Gọi getFlow độc lập để hồ sơ người dùng tải chậm không làm trễ giao diện.