Ionic Deep Link

Deep Link คือ URL ที่ Ionic App (ทั้ง Mobile และ Web) ใช้อ้างอิงถึงตำแหน่งของข้อมูล/หน้า หนึ่งๆ ที่อยู่บนแอพลิเคชั่นโดยตรง มีประโยชน์ในการอำนวยความสะดวกให้กับ User ในการเข้าถึงข้อมูลหรือหน้านั้นๆ โดยตรงจากแหล่งภายนอก เช่น การแชร์ หรือจาก Search Result

Deep Link ของ Ionic จะอยู่ในฟอร์แมต:

http(s)://<app_name_or_server_name>:<port>/#/<segment>

จุดสังเกตคือจะมี Hash (#) ขั้นอยู่ระหว่างส่วนของแอพลิชั่น/เซิร์ฟเวอร์ และ Segment (หรือ path) เนื่องจาก Ionic เป็น Single-Page Web Application นั่นเอง

แนวทาง

การสร้าง Deep Link ให้ Page ต่างๆ บน Ionic มีองค์ประกอบสำคัญต่อไปนี้

1. การสร้าง Deep Link จะทำได้เฉพาะในระดับของ Page Level เท่านั้น (ถูกบังคับด้วยการใช้ Module IonicPageModule)
2. แต่ละ Page ที่จะมี Deep Link ของตัวเอง ต้องมี Module ของตัวเอง โดย IonicPageModule` จะใช้ Class ของ Page เป็น Parameter ดังนั้น แต่ละ Module จึงมีเพจที่มี Deep Link ได้แค่เพจเดียว
3. การ Load Module ของเพจเหล่านี้จะเป็นการ Load แบบ Lazy Loading เท่านั้น (ซึ่งมีข้อดีคือทำให้การ Transpile ตอนเริ่มแอพลิเคชั่นเร็วขึ้น) ดังนั้นเราจึงไม่ต้องประกาศชื่อ Module เหล่านี้ใน app.module.ts
4. อย่างไรก็ตาม ตัวแอพลิเคชั่นเองต้องมี Page ของตัวเอง (default คือ HomePage) ซึ่งเราไม่สามารถเพิ่ม Deep Link ที่นอกเหนือจากค่า Default (คือ Home) ของ Home Page ได้อีก

ขั้นตอน

ขั้นที่ 1 สมมติว่าเรากำลังจะสร้างเพจชื่อ search ให้มี Deep Link ขั้นแรกเราจะให้ Ionic สร้างไฟล์ที่จำเป็นให้ด้วยคำสั่ง

ionic generate page search

Ionic จะสร้าง Folder และไฟล์ที่จำเป็นให้โดยอัตโนมัติ

ขั้นที่ 2 แก้ไขไฟล์ pages/search/search.module.ts

...
import { IonicPageModule } from 'ionic-angular';
import { SearchPage } from './search';
...
@NgModule({
...
  imports: [
    ...
    IonicPageModule.forChild(SearchPage),
    ...
  ],
  entryComponents: [
    SearchPage // factoring the page
  ]
}]
export class SearchPageModule {}

ขั้นที่ 3 แก้ไขไฟล์ pages/search/search.ts

import { Component } from '@angular/core'; 
...
@IonicPage({
  name: 'search',    // for navCtrl.push()
  segment: 'search'  // becomes http(s)://<server>/#/search URL
})
@Component({
...

ขั้นที่ 4 ทดสอบโดยการรัน

ionic serve

เปิด Browser แล้วลองเข้า http://localhost:8100/#/search

References

• [IonicPage – Link to Pages with URL like a Pro](https://blog.khophi.co/ionicpage-link-pages-url-like-pro/)