Flutter – Implement Deeplink

Tram Ho

Giới thiệu

Đối với lập trình viên mobile thì việc làm việc với deepkink hay applink là một điều không thể tránh khỏi. Hôm nay mình sẽ giới thiệu đến các bạn một plugin tuyệt vời để implement App/Deep Links (Android) Universal Links/ Custom URL schemes (iOS). khi lập trình với Flutter mà mình đã sử dụng rất nhiều. Đó chính là plugin uni_links

Tiến hành

Việc đầu tiên phải làm là add uni_links vào pubspec dự án của bạn nhé

Để sử dụng được deeplink(ở đây mình gọi chung cho tất cả cấu hình cho dễ hiểu) thì cần phải config riêng cho từng platform ios và android

Android

Uni links support cả hai kiểu “App Links” và “Deep Links”

  • App Links: chỉ work được với https chema và yêu cầu phải có một host đã được chỉ định cho ứng dụng của bạn
  • Deep Links: đối với deep link thì bạn có thể sử dụng bất kỳ custom schema nào mà bạn muốn mà không phải yêu cầu specified host nào. Điều này có thể gây nên sự confict với các app khác vì vậy bạn phải chắc chắn rằng custom schema của mình là duy nhất. (EX HST0000001://host.com)

Để config applink và deeplink cho android bạn vào file android/app/src/main/AndroidManifest.xml: và add các intent sau

Thuộc tính android:host là option tuỳ chọn đối với Deep link và bắt buộc đối với app link

Để tăng thêm tính đặc trưng, bạn có thể thêm thuộc tính android: pathPrefix: vào

IOS

Tương tự như android, uni links cũng support 2 type khác trên ios là “Universal Links” và “Custom URL schemes”.

  • Universal Links cũng chỉ work với ‘https’ schema và yêu cầ một specified host, các quyền và tệp được lưu trữ apple-app-site-association
  • Custom URL schemes : cũng tương tự như deep link của android, bạn có thể sử dụng bất kỳ custom schema nào mà bạn muốn

Đối với Universal Links bạn cần add hoặc tạo quyền truy cập domain com.apple.developer.associated-domains thông qua Xcode hoặc edit file ios/Runner/Runner.entitlements

Đối với Custom URL schemas bạn cần đặc tả schema của mình trong file ios/Runner/Info.plist

Sử dụng trong Flutter

Việc config cho từng platform đã xong, bây giờ bạn chỉ việc implement trong flutter để app có thể bắt được link nhé

Có hai trường hợp app bạn sẽ nhận được link: App chưa khởi chạy và app đang chạy trong nền.

Initial Link (String) => Trả về link khi ứng dụng được start nếu có

Initial Link (Uri) => Tương tự như getInitialLink nhưng link được convert qua Uri type

On change event (String) # => Lắng nghe sự thay đổi của Link, thông thường sẽ sử dụng cách này

On change event (Uri) => Tương tự như `On change event (String)

Dưới đây là ví dụ đầy đủ về cách implement, cực kỳ đơn giản thôi, mời các bạn xem qua nhé

Cảm ơn các bạn đã theo dõi Nguồn: https://pub.dev/packages/uni_links

Chia sẻ bài viết ngay