Deeplink & Universal link

Tài liệu này hướng dẫn developer cách tạo và xử lý deeplink (hoặc universal link) để mở một Mini App trên V-App, áp dụng cho các tình huống:

• Mở Mini App từ một website.
• Mở Mini App từ ứng dụng Native (ex: từ chat của V-App).
• Gửi link trong SMS, quảng cáo hoặc QR Code.

Hình thức mở Mini App

V-App hỗ trợ deeplink dạng Scheme và Universal Link. Giả định bạn có cấu hình pages quy định như sau ở trong app-config:

export const getAppConfig = (): IAppConfig => ({
  pages: [
    {
      pathname: '/',
      Component: HomePage,
      navigationBar: {
        title: 'V-MiniApp Home',
      },
    },
    {
      pathname: '/getAuthCode',
      Component: AuthPage,
      navigationBar: {
        title: 'V-MiniApp Auth',
      },
    },
  ],
})

Để truy xuất tới page /getAuthCode thì cấu trúc deeplink và universal link sẽ như sau:

Deeplink

Đổi với môi trường production, deeplink sẽ có cấu trúc như sau:

Field	Description
Scheme	vapp	Định dạng URL để V-App nhận diện và xử lý. Khi người dùng mở Mini App thông qua V-App.
Mini App Path	mini	Phần này giúp V-App biết đây là Mini App và khởi động Mini App Runtime
	AppId	ID của Mini App cần mở. Mỗi Mini App có một appId duy nhất.
	Page	Trang cụ thể trong Mini App cần mở. Lưu ý: Page phải đúng với router path được khai báo trong trường hợp H5 App.
	App Query	Các tham số truyền vào Mini App. Việc truy xuất tham số sẽ thông qua React Router.
	System Query	Thông tin hệ thống bổ sung để điều hướng và xử lý ngữ cảnh

Lưu ý:

• Nếu Page không tồn tại thì mặc định sẽ mở trang chủ
• Page được khai bao có phân biệt chữ hoa / thường. /getauthcode hay /GetAuthCode sẽ mở trang chủ vì chưa được khai báo trong router.

Universal Link

Nhằm hỗ trợ việc chia sẻ link ra ngoài khỏi V-App và handle trường hợp khách hàng chưa cài app, thì V-App có hỗ trợ universal link để mở một Mini App. Cấu trúc link như sau:

Ở môi trường UAT:

Field	Description
Domain	v-app.vn	Domain của web
Mini App Path	mini	Phần này giúp V-App biết đây là Mini App và khởi động Mini App Runtime
	AppId	ID của Mini App cần mở. Mỗi Mini App có một appId duy nhất.
	Page	Trang cụ thể trong Mini App cần mở. Lưu ý: Page tương ứng với router path trong trường hợp H5 App
	App Query	Các tham số truyền vào Mini App. Việc truy xuất tham số sẽ thông qua React Router.
	System Query	Thông tin hệ thống bổ sung để điều hướng và xử lý ngữ cảnh

Với universal link nếu khách hàng đã cài ứng dụng V-App thì sẽ nhảy trực tiếp vào Mini App với Page Path được quy định ở trên. Còn nếu khách hàng chưa cài app sẽ được mở trình duyệt với trang hướng dẫn cài Mini App:

Routing

• Bạn có thể tìm hiểu thêm về cách khai báo các page và lấy params từ link của app tại đây.