Hiển thị onboarding trong Capacitor SDK

Onboarding đã bị deprecated trong SDK v4 và sẽ bị xóa trong phiên bản tương lai. Chúng không còn nhận được các bản sửa lỗi hay cải tiến nữa. Hãy sử dụng flow thay thế: không giống như onboarding chạy trong WebView, flow render trực tiếp trên thiết bị — mang lại animation mượt mà hơn, giao diện native nhất quán, thời gian tải nhanh hơn và không phụ thuộc vào WebView runtime. Xem Lấy flow & paywall và Hiển thị flow & paywall để bắt đầu.

Nếu bạn đã tùy chỉnh onboarding bằng builder, bạn không cần lo lắng về việc render nó trong code ứng dụng di động để hiển thị cho người dùng. Onboarding đó đã bao gồm cả nội dung cần hiển thị lẫn cách thức hiển thị.

Trước khi bắt đầu, hãy đảm bảo rằng:

Bạn đã tạo một onboarding.
Bạn đã thêm onboarding vào một placement.

Hiển thị onboarding

Để hiển thị onboarding, dùng phương thức view.present() trên view được tạo bởi phương thức createOnboardingView. Mỗi view chỉ có thể dùng một lần. Nếu cần hiển thị lại onboarding, hãy gọi createOnboardingView thêm một lần nữa để tạo view mới.

Tái sử dụng cùng một view mà không tạo lại có thể dẫn đến lỗi.


try {
  const view = await createOnboardingView(onboarding);
  
  view.setEventHandlers({
    onClose: (actionId, meta) => {
      console.log('Onboarding closed:', actionId);
      return true; // Allow the onboarding to close
    },
    onCustom: (actionId, meta) => {
      console.log('Custom action:', actionId);
      return false; // Don't close the onboarding
    }
  });
  
  await view.present();
  console.log('Onboarding presented successfully');
} catch (error) {
  console.error('Failed to present onboarding:', error);
}

Cấu hình kiểu trình bày trên iOS

Cấu hình cách onboarding được hiển thị trên iOS bằng cách truyền tham số iosPresentationStyle vào phương thức present(). Tham số này chấp nhận các giá trị 'full_screen' (mặc định) hoặc 'page_sheet'.

await view.present({ iosPresentationStyle: 'page_sheet' });

Tùy chỉnh cách mở liên kết trong onboarding

Tùy chỉnh cách mở liên kết trong onboarding được hỗ trợ từ Adapty SDK v3.15 trở lên.

Mặc định, các liên kết trong onboarding sẽ mở bằng trình duyệt trong ứng dụng. Điều này mang lại trải nghiệm liền mạch cho người dùng bằng cách hiển thị trang web ngay trong ứng dụng, không cần chuyển sang ứng dụng khác.

Nếu bạn muốn mở liên kết bằng trình duyệt bên ngoài, bạn có thể tùy chỉnh hành vi này bằng cách đặt tham số openIn thành browser_out_app:

await view.present({ openIn: 'browser_out_app' }); // default — browser_in_app

Các bước tiếp theo

Sau khi hiển thị onboarding, bạn sẽ muốn xử lý các tương tác và sự kiện của người dùng. Tìm hiểu cách xử lý các sự kiện onboarding để phản hồi hành động của người dùng và theo dõi analytics.