Flutter Deep Link — คู่มือ 2026

บทนำ: เจาะลึกโลกของ Flutter Deep Link ในปี 2026

พื้นฐานความรู้เกี่ยวกับ Flutter Deep Link

Deep Link คืออะไร และทำงานอย่างไร?

ประเภทของ Deep Link: URI Schemes และ App Links/Universal Links

การจัดการ Deep Link ใน Flutter: Packages และ Methods

🎬 YouTube @icafefx

วิธีติดตั้งและใช้งาน Flutter Deep Link

ขั้นตอนที่ 1: ติดตั้ง Package `uni_links`

dependencies:
  flutter:
    sdk: flutter
  uni_links: ^0.5.1 # ตรวจสอบเวอร์ชันล่าสุดก่อนใช้งาน

flutter pub get

ขั้นตอนที่ 2: กำหนดค่า Android Manifest และ Info.plist

CFBundleURLTypes

    
        CFBundleURLSchemes
        
            myapp
        
        CFBundleURLName
        com.example.myapp
    

ขั้นตอนที่ 3: เขียน Code Flutter เพื่อจัดการ Deep Link

import 'package:flutter/material.dart';
import 'package:uni_links/uni_links.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  String? _latestLink = 'Unknown';

  @override
  void initState() {
    super.initState();
    _initUniLinks();
  }

  Future _initUniLinks() async {
    // Get the initial link if the app was launched with a link
    final initialLink = await getInitialLink();
    if (initialLink != null) {
      setState(() {
        _latestLink = initialLink;
      });
    }

    // Attach a listener to the stream of links
    linkStream.listen((String? link) {
      setState(() {
        _latestLink = link ?? 'Unknown';
      });
    }, onError: (err) {
      setState(() {
        _latestLink = 'Failed to get latest link: $err.';
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('UniLinks Example App'),
        ),
        body: Center(
          child: Text('Latest link received: $_latestLink.'),
        ),
      ),
    );
  }
}

ตารางสรุปขั้นตอนการติดตั้งและใช้งาน

"การทำ Deep link อาจจะดูยุ่งยากในช่วงแรก แต่ถ้าเข้าใจหลักการและทำตามขั้นตอนอย่างละเอียด คุณจะสามารถสร้าง Deep link ที่มีประสิทธิภาพ และมอบประสบการณ์ใช้งานที่ดีให้กับผู้ใช้ได้อย่างแน่นอน"

เทคนิคขั้นสูง / Configuration

มาถึงส่วนที่เพื่อนๆ หลายคนน่าจะรอคอยกันแล้วนะครับ นั่นก็คือเทคนิคขั้นสูงและการปรับแต่งค่าต่างๆ ที่เกี่ยวข้องกับ Deep Link ใน Flutter ให้มันทำงานได้อย่างมีประสิทธิภาพและตอบโจทย์ความต้องการของเรามากที่สุด บอกเลยว่าส่วนนี้จะเน้นไปที่การจัดการกับ use cases ที่ซับซ้อนขึ้น และการปรับแต่ง config ให้เข้ากับ environment ที่แตกต่างกัน

ผมจะพาเพื่อนๆ ไปดูการจัดการกับ Deep Link ที่มี parameters หลายตัว การจัดการกับ fallback URLs และการใช้ Dynamic Links จาก Firebase เพื่อให้ Deep Link ของเราฉลาดและยืดหยุ่นมากยิ่งขึ้น นอกจากนี้ เราจะมาดูวิธีการ config Deep Link ให้ทำงานได้ทั้งบน Android และ iOS อย่างละเอียด รวมถึงการจัดการกับเรื่องของ deferred Deep Linking ซึ่งเป็นเรื่องที่สำคัญมากในการทำ user acquisition

การจัดการกับ Deep Link ที่มี Parameters หลายตัว

Deep Link ที่ดี มักจะมาพร้อมกับ parameters ที่ช่วยให้แอปพลิเคชันสามารถระบุ context และดำเนินการต่างๆ ได้อย่างถูกต้อง ลองคิดดูว่าถ้าเราอยากจะส่ง Deep Link ที่พา user ไปยังหน้า product page พร้อมกับ pre-populate ข้อมูลบางอย่าง เช่น ขนาด สี หรือจำนวน เราก็จำเป็นต้องใช้ parameters หลายตัวในการส่งข้อมูลเหล่านี้

ใน Flutter เราสามารถจัดการกับ parameters เหล่านี้ได้โดยการ parse URL ที่เข้ามา และดึงค่าของ parameters ออกมาใช้งาน ตัวอย่างเช่น ถ้าเรามี Deep Link แบบนี้: myapp://product/123?size=M&color=blue เราสามารถใช้ Uri.parse() เพื่อ parse URL และดึงค่าของ size และ color ออกมาได้

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Deep Link Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  String? productId;
  String? size;
  String? color;

  @override
  void initState() {
    super.initState();
    _initDeepLink();
  }

  Future _initDeepLink() async {
    // Check if the app was launched via a deep link
    final Uri? uri = await getInitialUri();
    if (uri != null) {
      _handleDeepLink(uri);
    }

    // Listen for incoming deep links while the app is running
    uriLinkStream.listen((Uri? uri) {
      if (uri != null) {
        _handleDeepLink(uri);
      }
    });
  }

  void _handleDeepLink(Uri uri) {
    setState(() {
      productId = uri.pathSegments.length > 1 ? uri.pathSegments[1] : null;
      size = uri.queryParameters['size'];
      color = uri.queryParameters['color'];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Deep Link Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Product ID: ${productId ?? 'N/A'}',
            ),
            Text(
              'Size: ${size ?? 'N/A'}',
            ),
            Text(
              'Color: ${color ?? 'N/A'}',
            ),
          ],
        ),
      ),
    );
  }
}

โค้ดด้านบนนี้เป็นตัวอย่างง่ายๆ ที่แสดงให้เห็นว่าเราสามารถดึงค่า parameters จาก Deep Link ได้อย่างไร โดยใช้ uri.pathSegments สำหรับ path segments และ uri.queryParameters สำหรับ query parameters หลังจากนั้น เราก็สามารถนำค่าเหล่านี้ไปใช้ในการ update UI หรือดำเนินการอื่นๆ ที่เกี่ยวข้องได้เลยครับ

การจัดการ Fallback URLs

บางครั้ง Deep Link ของเราอาจจะไม่สามารถเปิดได้ ไม่ว่าจะเป็นเพราะแอปพลิเคชันยังไม่ได้ติดตั้ง หรือมีปัญหาทางเทคนิคบางอย่าง ในกรณีนี้ การมี fallback URL จะช่วยให้เราสามารถ redirect user ไปยังหน้า landing page หรือ App Store ได้ เพื่อให้ user ได้รับประสบการณ์ที่ดีที่สุด

วิธีการจัดการ fallback URLs นั้นขึ้นอยู่กับ platform ที่เราใช้งาน ถ้าเราใช้ Firebase Dynamic Links เราสามารถกำหนด fallback URL ได้โดยตรงใน Firebase console แต่ถ้าเราจัดการ Deep Link เอง เราจะต้อง implement logic ใน server-side ของเราเพื่อ redirect user ไปยัง fallback URL เมื่อ Deep Link ไม่สามารถเปิดได้

ตัวอย่างเช่น ถ้าเราใช้ Firebase Dynamic Links เราสามารถกำหนด fallback URL เป็นหน้า App Store หรือ Google Play Store ได้โดยการใส่ URL เหล่านั้นใน Firebase console เมื่อ user คลิกที่ Deep Link และแอปพลิเคชันยังไม่ได้ติดตั้ง Firebase จะ redirect user ไปยัง URL ที่เรากำหนดไว้

การใช้ Firebase Dynamic Links

Firebase Dynamic Links เป็นเครื่องมือที่มีประโยชน์มากในการจัดการ Deep Link โดยเฉพาะอย่างยิ่งเมื่อเราต้องการรองรับ deferred Deep Linking ซึ่งเป็นความสามารถในการส่ง user ไปยังหน้าเป้าหมายหลังจากที่ user ติดตั้งแอปพลิเคชันเสร็จแล้ว

การใช้ Firebase Dynamic Links นั้นค่อนข้างง่าย เราแค่ต้องสร้าง Dynamic Link ใน Firebase console และกำหนด parameters ต่างๆ ที่เราต้องการ รวมถึง fallback URL หลังจากนั้น เราก็สามารถใช้ Dynamic Link ที่สร้างขึ้นในแอปพลิเคชันของเราได้เลย

import 'package:firebase_dynamic_links/firebase_dynamic_links.dart';

Future initDynamicLinks() async {
  FirebaseDynamicLinks.instance.onLink(
      onSuccess: (PendingDynamicLinkData? dynamicLink) async {
    final Uri? deepLink = dynamicLink?.link;

    if (deepLink != null) {
      // Handle the deep link here
      print('Deep Link: ${deepLink.toString()}');
    }
  }, onError: (OnLinkErrorException e) async {
    print('onLinkError: ${e.message}');
  });

  final PendingDynamicLinkData? data = await FirebaseDynamicLinks.instance.getInitialLink();
  final Uri? deepLink = data?.link;

  if (deepLink != null) {
    // Handle the deep link here
    print('Initial Deep Link: ${deepLink.toString()}');
  }
}

โค้ดด้านบนนี้เป็นตัวอย่างการใช้งาน Firebase Dynamic Links ใน Flutter เราจะเห็นว่าเราสามารถใช้ FirebaseDynamicLinks.instance.onLink เพื่อ listen for incoming Dynamic Links และ FirebaseDynamicLinks.instance.getInitialLink เพื่อ get initial Dynamic Link เมื่อแอปพลิเคชันถูกเปิดขึ้นมา

เปรียบเทียบ

มาถึงส่วนที่หลายคนรอคอย นั่นก็คือการเปรียบเทียบข้อดีข้อเสียของวิธีการต่างๆ ในการจัดการ Deep Link ใน Flutter เพื่อให้เพื่อนๆ สามารถเลือกวิธีการที่เหมาะสมกับโปรเจกต์ของตัวเองมากที่สุด ผมจะเปรียบเทียบระหว่างการจัดการ Deep Link ด้วย Native methods (Android App Links และ iOS Universal Links) กับการใช้ Firebase Dynamic Links

นอกจากนี้ ผมจะเปรียบเทียบ performance ของการ parse Deep Link URLs ด้วยวิธีต่างๆ เพื่อให้เพื่อนๆ เห็นภาพว่าวิธีการไหนมีประสิทธิภาพมากที่สุด และเหมาะสมกับ use cases ที่แตกต่างกัน

ตารางเปรียบเทียบ: Native Methods vs. Firebase Dynamic Links

จากตารางด้านบน เราจะเห็นว่า Native methods มีข้อดีคือความยืดหยุ่นในการปรับแต่ง และไม่มีค่าใช้จ่าย แต่ก็มาพร้อมกับความซับซ้อนในการ setup ที่สูงกว่า ในขณะที่ Firebase Dynamic Links มีข้อดีคือความง่ายในการใช้งาน และมี features ที่รองรับ deferred Deep Linking และ analytics แต่ก็มีข้อจำกัดในเรื่องของ customization และค่าใช้จ่าย (หลังจาก quota ฟรีหมด)

ตารางเปรียบเทียบ: Performance การ Parse Deep Link URLs

จากตารางด้านบน เราจะเห็นว่าการใช้ Native code ในการ parse Deep Link URLs มี performance ที่ดีที่สุด แต่ก็ต้องแลกมาด้วยความซับซ้อนในการ implement ที่สูงกว่า ในขณะที่ Uri.parse() เป็นวิธีที่ง่ายที่สุด แต่ก็มี performance ที่ต่ำกว่าเล็กน้อย การใช้ Regular Expression เป็นทางเลือกที่อยู่ตรงกลางระหว่างความง่ายและ performance

ข้อควรระวัง / Troubleshooting

ในการพัฒนา Deep Link ใน Flutter สิ่งที่ต้องระวังคือการจัดการกับ edge cases และการ troubleshooting เมื่อเกิดปัญหาขึ้น ผมจะรวบรวมข้อควรระวังและวิธีการแก้ไขปัญหาที่พบบ่อยในการพัฒนา Deep Link เพื่อให้เพื่อนๆ สามารถรับมือกับปัญหาต่างๆ ได้อย่างมีประสิทธิภาพ

ปัญหาที่พบบ่อยในการพัฒนา Deep Link ได้แก่ การ config ที่ไม่ถูกต้อง การจัดการกับ platform differences และการ debug Deep Link ใน environment ที่แตกต่างกัน นอกจากนี้ การทดสอบ Deep Link ในสถานการณ์ต่างๆ ก็เป็นสิ่งสำคัญเพื่อให้แน่ใจว่า Deep Link ของเราทำงานได้อย่างถูกต้อง

คำเตือน: อย่าลืมทดสอบ Deep Link ของคุณในทุก platform และทุกสถานการณ์ เพื่อให้แน่ใจว่ามันทำงานได้อย่างถูกต้อง!

• Config ไม่ถูกต้อง: ตรวจสอบให้แน่ใจว่าคุณได้ config Deep Link ของคุณอย่างถูกต้องทั้งใน AndroidManifest.xml และ Info.plist รวมถึง Firebase console ถ้าคุณใช้ Firebase Dynamic Links
• Platform differences: จำไว้ว่า Android และ iOS มีวิธีการจัดการ Deep Link ที่แตกต่างกัน ตรวจสอบให้แน่ใจว่าคุณได้ implement logic ที่เหมาะสมสำหรับแต่ละ platform
• Debugging: ใช้ logging และ debugging tools เพื่อตรวจสอบว่า Deep Link ของคุณถูก parse และ handled อย่างถูกต้อง
• Testing: ทดสอบ Deep Link ของคุณในสถานการณ์ต่างๆ เช่น เมื่อแอปพลิเคชันถูกเปิดขึ้นมาครั้งแรก หรือเมื่อแอปพลิเคชันถูกเปิดขึ้นมาจาก background
• Deferred Deep Linking: ทดสอบ deferred Deep Linking อย่างละเอียดเพื่อให้แน่ใจว่า user จะถูกนำไปยังหน้าเป้าหมายหลังจากที่ติดตั้งแอปพลิเคชันเสร็จแล้ว
• Error Handling: Implement error handling เพื่อจัดการกับกรณีที่ Deep Link ไม่สามารถ parse หรือ handled ได้

ตัวอย่างจากประสบการณ์ 20 ปี

จากประสบการณ์ 20 ปีในการพัฒนาซอฟต์แวร์ ผมได้มีโอกาสทำงานกับ Deep Link ในหลากหลายโปรเจกต์ ตั้งแต่แอปพลิเคชัน e-commerce ไปจนถึงแอปพลิเคชัน social media ผมจะแชร์ประสบการณ์และ lessons learned จากโปรเจกต์เหล่านี้ เพื่อให้เพื่อนๆ ได้เห็นภาพว่า Deep Link สามารถนำไปประยุกต์ใช้ในสถานการณ์จริงได้อย่างไร

ผมเคยเซ็ต Deep Link ตอนปี 2020 ให้กับแอป e-commerce ขนาดใหญ่ สิ่งที่ท้าทายที่สุดในโปรเจกต์นั้นคือการจัดการกับ deferred Deep Linking เพราะเราต้องการให้ user ถูกนำไปยังหน้า product page หลังจากที่ติดตั้งแอปพลิเคชันเสร็จแล้ว เราใช้ Firebase Dynamic Links เพื่อแก้ปัญหานี้ และมันก็ทำงานได้อย่างราบรื่น

สมัยก่อนผมก็เคยพลาด config Deep Link ใน AndroidManifest.xml ทำให้ Deep Link ไม่ทำงานบน Android ผมใช้เวลาหลายชั่วโมงในการ debug ปัญหานี้ และสุดท้ายก็พบว่า config ที่ผิดพลาดเป็นสาเหตุของปัญหา ดังนั้น สิ่งที่สำคัญที่สุดคือการตรวจสอบ config อย่างละเอียด

อีกสถานการณ์หนึ่งที่ผมเคยเจอคือการจัดการกับ Deep Link ที่มี parameters ซับซ้อน เราใช้ Regular Expression ในการ parse parameters เหล่านี้ และมันก็ทำงานได้อย่างมีประสิทธิภาพ แต่สิ่งที่ต้องระวังคือการเขียน Regular Expression ที่ถูกต้องและมีประสิทธิภาพ เพื่อหลีกเลี่ยงปัญหา performance

จากประสบการณ์ของผม Deep Link เป็นเครื่องมือที่มีประโยชน์มากในการเพิ่ม engagement และ user acquisition แต่สิ่งที่สำคัญที่สุดคือการวางแผนและ implement อย่างรอบคอบ รวมถึงการทดสอบอย่างละเอียดเพื่อให้แน่ใจว่า Deep Link ของเราทำงานได้อย่างถูกต้องในทุกสถานการณ์

เครื่องมือแนะนำ

Firebase Dynamic Links

Branch.io

DeepLink Dispatcher (Android) และ Universal Links (iOS)

Case Study ประสบการณ์จริง

FAQ คำถามที่พบบ่อย

Deep Link กับ App Link ต่างกันอย่างไร?

Deferred Deep Linking คืออะไร และมีประโยชน์อย่างไร?

จะทดสอบ Deep Link ใน Flutter ได้อย่างไร?

Deep Link มีผลต่อ SEO หรือไม่?

จะจัดการกับ Deep Link ที่ไม่ถูกต้อง (Invalid Deep Link) ได้อย่างไร?

Deep Link มีความเสี่ยงด้านความปลอดภัยหรือไม่?

สรุป