การจัดการการนำทางไปยัง PWA ที่ติดตั้ง

Demián Renzulli

Dan Murphy

Dibyajyoti Pal

Vincent Scheib

เผยแพร่: 19 สิงหาคม 2025

การจัดการการนำทางครอบคลุมวิธีการควบคุมวิธีที่ Progressive Web App (PWA) จัดการการนำทางของผู้ใช้ องค์ประกอบที่สำคัญของฟีเจอร์นี้คือการจับภาพการนำทาง ซึ่งเป็นกระบวนการของเบราว์เซอร์ที่กำหนดว่าการคลิกลิงก์ควรเปิด PWA ที่ติดตั้งไว้หรือเปิดแท็บเบราว์เซอร์ใหม่

คู่มือนี้ครอบคลุมการจับภาพการนำทางเวอร์ชันใหม่ ซึ่งพร้อมใช้งานตั้งแต่ Chrome 139 แม้ว่าลักษณะการทำงานเริ่มต้นของเบราว์เซอร์จะเหมาะกับกรณีส่วนใหญ่ แต่การทำความเข้าใจเทคนิคการจัดการเหล่านี้และ API ที่เกี่ยวข้องอย่างลึกซึ้งยิ่งขึ้น เป็นสิ่งจำเป็นหากคุณต้องการสร้างประสบการณ์การใช้งานที่ราบรื่นที่สุดสำหรับผู้ใช้

ส่วนการควบคุมของนักพัฒนาแอปจะอธิบายวิธี ปรับแต่งการนำทางเพื่อมอบประสบการณ์การเปิดตัว PWA ที่ดีที่สุด

ลักษณะการทำงานเริ่มต้นใหม่

Chrome กำลังปรับวิธีจัดการลิงก์ให้เป็นมาตรฐานเพื่อสอดคล้องกับค่ากำหนดของผู้ใช้และลดความยุ่งยาก ก่อนหน้านี้ลักษณะการทำงานไม่สอดคล้องกันในแพลตฟอร์มต่างๆ โดยปกติแล้วอุปกรณ์เคลื่อนที่จะให้ความสําคัญกับการเปิดแอปที่ติดตั้งไว้ ในขณะที่เบราว์เซอร์บนเดสก์ท็อปจะเปิดลิงก์ในแท็บก่อน แล้วจึงส่งสัญญาณว่าแอปสามารถจัดการลิงก์นั้นได้

แนวทางใหม่แบบรวมสำหรับการจับภาพการนำทางจะเปิดลิงก์ใน PWA ที่ติดตั้งที่เกี่ยวข้องโดยอัตโนมัติ ลิงก์จะเปลี่ยนกลับไปเป็นแท็บเบราว์เซอร์ก็ต่อเมื่อ ไม่ได้ติดตั้ง PWA หรือผู้ใช้เลือกไม่ใช้ ลักษณะการทำงานใหม่นี้จะพร้อมใช้งานใน Chrome 139 สำหรับ Windows, Mac และ Linux โดยการรองรับ ChromeOS จะพร้อมใช้งานในการเผยแพร่ในอนาคต

กระบวนการจัดการการนำทาง

การบันทึกการนำทางเป็นส่วนหนึ่งของกระบวนการจัดการการนำทาง กระบวนการนี้ ครอบคลุมโฟลว์ทั้งหมดตั้งแต่การดำเนินการเริ่มต้นของผู้ใช้ไปจนถึงการตัดสินใจของเบราว์เซอร์ และพฤติกรรมที่เกิดขึ้นซึ่งกำหนดค่าโดยนักพัฒนาซอฟต์แวร์

• การกระทำของผู้ใช้: รวมถึงการโต้ตอบ เช่น การคลิกหรือแตะลิงก์
• การตัดสินใจของเบราว์เซอร์: รวมถึงงานและการตัดสินใจที่เบราว์เซอร์จัดการ เช่น ลักษณะการทำงานเริ่มต้น เช่น การบันทึกการนำทาง
• การควบคุมของนักพัฒนาซอฟต์แวร์: มี API ของเว็บที่ช่วยให้นักพัฒนาซอฟต์แวร์สั่งให้เบราว์เซอร์จัดการงานที่เฉพาะเจาะจง

การทำงานร่วมกันขององค์ประกอบเหล่านี้จะเป็นตัวกำหนดว่า PWA จะเปิดในหน้าต่างแบบสแตนด์อโลนหรือแท็บเบราว์เซอร์

กรณีการใช้งานพื้นฐานในการจัดการการนำทางคือเมื่อผู้ใช้คลิกหรือแตะลิงก์ไปยัง PWA ที่ติดตั้งจากหน้าอื่นในเบราว์เซอร์ ตัวอย่างต่อไปนี้ แสดงกรณีของผู้ใช้ที่ติดตั้ง PWA ของ Google Chat และคลิกลิงก์ไปยัง PWA ดังกล่าวจากคำเชิญใน Google ปฏิทิน

การดำเนินการของผู้ใช้

การกระทำของผู้ใช้ทุกอย่างประกอบด้วยองค์ประกอบสำคัญ 3 อย่าง ได้แก่ เหตุการณ์ (เช่น การคลิกหรือแตะ) แพลตฟอร์มที่เกิดเหตุการณ์ (เช่น หน้าเว็บหรือทางลัดบนเดสก์ท็อป) และประเภทลิงก์ที่เปิดใช้งาน (เช่น URL HTTPS) ตัวอย่างเช่น การดำเนินการของผู้ใช้อาจเป็นการคลิกลิงก์ไปยัง https://chat.google.com/meeting_room_id ภายในขอบเขตของ Google Chat PWA จากหน้าเว็บใน calendar.google.com

การตัดสินใจเกี่ยวกับเบราว์เซอร์

เมื่อผู้ใช้ดำเนินการ เช่น คลิกในขั้นตอนก่อนหน้า เบราว์เซอร์จะ เรียกใช้กระบวนการจับภาพการนำทางเพื่อตัดสินใจว่าจะเปิดลิงก์ ในแท็บเบราว์เซอร์หรือใน PWA ที่ติดตั้ง ซึ่งประกอบด้วยขั้นตอนต่อไปนี้

1. พิจารณาว่าการนำทางสามารถจับภาพได้หรือไม่: โดยทั่วไป การนำทางจะถือว่าจับภาพได้หากสร้างเฟรมใหม่และไม่ได้เปิดในบริบทการท่องเว็บเสริม
2. ระบุ PWA ที่ควบคุม: หากจับภาพการนำทางได้ เบราว์เซอร์จะ พยายามค้นหา PWA ที่ "ควบคุม" URL (อยู่ภายในขอบเขต ที่กำหนดไว้ในไฟล์ Manifest ของเว็บแอป)
3. ยืนยันค่ากำหนดของผู้ใช้: หากพบ PWA ที่ควบคุมอยู่ เบราว์เซอร์จะ ตรวจสอบค่ากำหนดของผู้ใช้ หากผู้ใช้ไม่ได้เลือกไม่ใช้ในการตั้งค่าแอป PWA จะเปิดขึ้น มิฉะนั้นลิงก์จะเปิดในแท็บเบราว์เซอร์ใหม่
4. เปิด PWA: เบราว์เซอร์จะเปิด PWA โดยใช้อัลกอริทึมการจัดการการเปิด คุณมีอิทธิพลต่อการทำงานนี้ได้โดยใช้ Launch Handler API ซึ่งจะกล่าวถึงในส่วนถัดไป

แผนภาพต่อไปนี้สรุปกระบวนการนี้

การควบคุมของนักพัฒนาแอป

แม้ว่ากระบวนการนำทางจะขึ้นอยู่กับการตั้งค่าเริ่มต้นของเบราว์เซอร์และการตั้งค่าของผู้ใช้เป็นหลัก แต่คุณก็ใช้ API ต่างๆ เพื่อจัดการลักษณะเฉพาะของกระบวนการนี้ได้ หลังจาก การอัปเดตการบันทึกการนำทางล่าสุด เว็บ API บางรายการที่ใช้งานมานานก็ มีความเกี่ยวข้องมากขึ้น

Launch Handler API

API นี้จะทำงานเมื่อเบราว์เซอร์ตัดสินใจเปิด PWA ซึ่งจะช่วยให้คุณ ควบคุมวิธีเปิด PWA ได้ เช่น ในหน้าต่างใหม่หรือหน้าต่างที่มีอยู่

กำหนดวิธีเปิด PWA ผ่านสมาชิก launch_handler ในไฟล์ Manifest ของเว็บแอป ซึ่งรวมถึงฟิลด์ย่อยที่ชื่อ client_mode ฟิลด์ย่อยนี้ จะกำหนดว่าควรใช้หน้าต่างใหม่หรือหน้าต่างที่มีอยู่ และควร ไปยังส่วนต่างๆ หรือไม่ ค่าที่ใช้ได้สำหรับ client_mode มีดังนี้

• focus-existing: เพื่อจัดการลิงก์ในหน้าต่างแอปที่มีอยู่ เช่น PWA ที่ทำงานในโหมดสแตนด์อโลนอยู่แล้ว
• navigate-existing: ในตัวเลือกนี้ ระบบจะนำบริบทการท่องเว็บในหน้าต่างเว็บแอปที่มีการโต้ตอบล่าสุดไปยัง URL เป้าหมายของการเปิดตัว
• navigate-new: ตัวเลือกนี้จะสร้างบริบทการท่องเว็บใหม่ในหน้าต่างเว็บแอปเพื่อโหลด URL เป้าหมายของการเปิดตัว

ใช้ launchQueue API เพื่อระบุพารามิเตอร์เพิ่มเติมและจัดการกรณีพิเศษ Launch Handler API พร้อมใช้งานตั้งแต่ Chrome 110 แต่จะมีประโยชน์มากขึ้น เมื่อมีการอัปเดตการจับภาพการนำทาง ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบเกี่ยวกับ Launch Handler API

API อื่นๆ ที่เกี่ยวข้อง

นอกจาก API ที่ใช้จัดการการเปิดตัวแล้ว API อื่นๆ ก็มีบทบาทในกระบวนการนี้ได้เช่นกัน โดยขึ้นอยู่กับความต้องการเฉพาะของแอป ซึ่งรวมถึง ตัวแฮนเดิลโปรโตคอลของ URL ซึ่งช่วยให้เว็บแอปสามารถลงทะเบียนความสามารถในการจัดการรูปแบบ URL นอกเหนือจาก http และ https มาตรฐาน (เช่น โปรโตคอลมาตรฐานอย่าง mailto: หรือ โปรโตคอลที่กำหนดเองอย่าง web+music) นอกจากนี้ API ส่วนขยายขอบเขตของเว็บแอป (ปัจจุบันอยู่ระหว่างการพัฒนา) ยังช่วยให้คุณขยายขอบเขตของ PWA เพื่อจับลิงก์จาก แหล่งที่มาอื่นๆ รวมถึงโดเมนย่อย เพื่อให้เมื่อผู้ใช้คลิกลิงก์จาก แหล่งที่มาที่เชื่อมโยง PWA จะเปิดขึ้นได้ การอธิบายอย่างละเอียดอยู่นอกขอบเขตของบทความนี้ แต่คุณสามารถดูข้อมูลเพิ่มเติมได้จากลิงก์ที่เกี่ยวข้อง

กรณีการใช้งาน: การบันทึกลิงก์ Google Chat ใน PWA ของ Chat

สุดท้ายนี้ มาดูว่าองค์ประกอบต่างๆ ทำงานร่วมกันอย่างไรในตัวอย่างการ คลิกลิงก์ Google ปฏิทินไปยังห้อง Google Chat สำหรับผู้ใช้ที่ ติดตั้ง Google Chat PWA แล้ว

ก่อนการจับภาพการนำทาง

ในวิดีโอต่อไปนี้ ผู้ใช้สร้างการประชุมใน Google ปฏิทินและเชิญแขกรับเชิญ 3 คน แอปปฏิทินจะสร้างลิงก์ Google Chat ที่มีผู้เข้าร่วมทั้งหมดโดยอัตโนมัติ เมื่อผู้ใช้คลิกลิงก์นี้ ห้องแชทจะเปิดขึ้น ในแท็บใหม่ของเบราว์เซอร์ จากนั้นไอคอนในแถบที่อยู่จะแจ้งว่ามีการติดตั้ง PWA ที่เกี่ยวข้อง แต่ผู้ใช้จะต้องเปิดใช้ด้วยตนเอง ลักษณะการทำงานก่อนการอัปเดตการจับภาพการนำทางมีดังนี้

หลังจากการจับภาพการนำทาง

วิดีโอต่อไปนี้แสดงเวิร์กโฟลว์ของผู้ใช้เดียวกัน แต่ตอนนี้มีลักษณะการทำงานของการบันทึกการนำทางแบบใหม่ ในเวอร์ชันนี้ การคลิกลิงก์ Google Chat จาก Google ปฏิทินจะเปิดแชทรูมที่เกี่ยวข้องใน PWA ที่ติดตั้งโดยตรง นอกจากนี้ ทีม Google Chat ยังได้ใช้การจัดการการเปิดตัว โดยการเพิ่มแอตทริบิวต์ launch_handler ลงในไฟล์ Manifest ของเว็บแอป การตั้งค่า client_mode เป็น focus-existing จะช่วยให้มั่นใจได้ว่าลิงก์จะเปิดในอินสแตนซ์ที่มีอยู่ของ PWA หากมีการเรียกใช้ PWA อยู่แล้ว การนำเวลาในการตอบสนองที่เกี่ยวข้องกับการเปิดแท็บเบราว์เซอร์ใหม่แล้วทริกเกอร์การโหลดหน้าเว็บออกจะช่วยให้ "เวลาในการโต้ตอบของผู้ใช้" มีประสิทธิภาพเร็วขึ้นตามที่ออกแบบไว้ ในความเป็นจริงแล้ว Google Chat ได้ปรับปรุงเวลาในการตอบสนองของการนำทางอย่างมากโดยไม่จำเป็นต้องเปิดตัวแอปใหม่

บทสรุปและขั้นตอนถัดไป

บทความนี้จะสำรวจลักษณะการทำงานของการจับภาพการนำทางเริ่มต้นแบบใหม่ที่พร้อมใช้งาน ตั้งแต่ Chrome 139 โดยมุ่งเน้นที่กรณีการใช้งานทั่วไปที่ผู้ใช้คลิกลิงก์ HTTPS ภายในขอบเขตของ PWA ที่ติดตั้ง ดูข้อมูลเพิ่มเติมและกรณีการใช้งานได้ในการจัดการการนำทางไปยัง PWA ที่ติดตั้ง แผนภาพต่อไปนี้แสดงรายละเอียดทั้งหมดของกรณีการใช้งาน รวมถึงเหตุการณ์ของผู้ใช้ แพลตฟอร์ม และโปรโตคอล พร้อมผลลัพธ์ที่เกี่ยวข้อง

การจัดการการนำทางเป็นแง่มุมที่สำคัญแต่ก็มักถูกมองข้ามใน UX ของแอป เนื่องจากเป็นตัวควบคุมจุดแรกเข้าของแอป ฟีเจอร์และลิงก์ที่กล่าวถึงในบทความนี้จะช่วยให้คุณได้รับประสบการณ์การใช้งาน PWA ที่ดีที่สุดเท่าที่จะเป็นไปได้