การย้ายข้อมูลต้นทางของ PWA อย่างราบรื่น: เปลี่ยนโดเมนโดยไม่สูญเสียผู้ใช้

Dibyajyoti Pal

Dan Murphy

Marijn Kruisselbrink

Published: June 3, 2026

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

หากต้องการรีแบรนด์หรือปรับโครงสร้างสถาปัตยกรรม (เช่น ย้ายจาก www.example.com/social ไปเป็น social.example.com) คุณจะต้องเผชิญกับภาวะที่กลืนไม่เข้าคายไม่ออก เนื่องจากไม่มีวิธี "ย้าย" PWA ที่ติดตั้งไว้ ผู้ใช้จึงต้องถอนการติดตั้งแอปเก่าด้วยตนเองและค้นหาปุ่มติดตั้งสำหรับแอปใหม่

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

สิ่งที่การย้ายข้อมูลต้นทางทำได้

คุณสามารถแก้ไขสถาปัตยกรรมของเว็บไซต์ได้โดยไม่ส่งผลเสียต่อประสบการณ์ของผู้ใช้ ดังนี้

• อิสระในการใช้สถาปัตยกรรมทางเทคนิค: เปลี่ยนโดเมนย่อยหรือเส้นทางของแอปพลิเคชัน
• แก้ไขสถานะ แอปที่แยกกัน: แก้ปัญหาที่การเปลี่ยน start_url โดยไม่มีรหัสที่เสถียรทำให้เกิดการติดตั้งแอปซ้ำโดยไม่ได้ตั้งใจ

ผู้ใช้สามารถย้ายข้อมูลแอปได้ด้วยกล่องโต้ตอบการอัปเดตที่เรียบง่าย โดยจะได้รับแจ้งเกี่ยวกับ การย้ายข้อมูลในลักษณะเดียวกับการ อัปเดตแอปมาตรฐาน เพียงคลิกครั้งเดียว ระบบจะถอนการติดตั้งแอปเก่าและติดตั้งแอปใหม่พร้อมเปิดใช้งาน

วิธีย้ายข้อมูล PWA

หากต้องการย้ายข้อมูล PWA ให้ทำตามขั้นตอนต่อไปนี้ ส่วนที่เหลือของโพสต์จะอธิบายรายละเอียดเพิ่มเติม

1. ติดตั้งใช้งานการจับมือกัน:
   • เพิ่ม migrate_from ลงในแอปใหม่
   • เพิ่มช่อง allow_migration ลงในไฟล์ /.well-known/web-app-origin-association ในต้นทางเก่า
2. เลือกลักษณะการทำงาน: suggest (หรือเว้นว่างไว้) จะหลีกเลี่ยงการขัดจังหวะผู้ใช้ ซึ่งอาจเป็นประโยชน์ในระหว่างการเปิดตัวครั้งแรก force จะบล็อกผู้ใช้และกำหนดให้มีการย้ายข้อมูล หากผู้ใช้ไม่สามารถใช้ URL เก่าต่อไปได้
3. อัปเดตแอปเก่าให้เป็นเวอร์ชันล่าสุดอยู่เสมอ: หากเว็บไซต์เก่าเปลี่ยนเส้นทางไปยังเว็บไซต์ใหม่ ให้ใช้พร็อพเพอร์ตี้ install_url ในบล็อก migrate_from เพื่อให้เบราว์เซอร์ยังคงค้นหาไฟล์ Manifest เก่าสำหรับการอัปเดตที่อาจเกิดขึ้นได้
4. ใช้ id ในไฟล์ Manifest ปลายทาง: Chrome กำหนดให้ไฟล์ Manifest ของแอปปลายทาง ต้องมีช่อง id ซึ่งจะช่วยให้แอป ไม่เกิดข้อผิดพลาดทั่วไปในการ สร้าง แอปที่แยกกัน โดยการเปลี่ยน start_url โดยไม่ได้ตั้งค่า id

การจับมือกันแบบ 2 ทาง: วิธีการทำงาน

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

// Manifest at https://fileman.google.com/manifest.json
{
  "name": "File Manager",
  "id": "/files/",
  "start_url": "/files/index.html",
  ....
  "migrate_from": [
    "https://drive.google.com/"
  ]
}

// File at https://drive.google.com/.well-known/web-app-origin-association
{
  "https://fileman.google.com/files/": {
    "allow_migration": true
  }
}

// Manifest at https://drive.google.com/manifest.json
{
  "name": "Drive",
  "start_url": "/",
  "migrate_to": {
    "id": "https://fileman.google.com/files/",
    "install_url": "https://fileman.google.com/drive/installwebapp?usp=migrate"
  }
}

คุณสามารถส่งสัญญาณการย้ายข้อมูลได้โดยการเปลี่ยนเส้นทาง URL ของแอปเก่าไปยังแอปใหม่ และใช้ scope_extensions เพื่อไม่ให้แบนเนอร์ที่อยู่นอกขอบเขตแสดงในแอปเก่า ซึ่งเป็นอีกทางเลือกหนึ่งนอกเหนือจากการใช้ช่อง migrate_to ซึ่งหมายความว่าระบบจะไม่เห็นไฟล์ Manifest ของแอปเก่า และจึงอัปเดตไม่ได้ หากต้องการให้แอปเก่ายังคงอัปเดตได้ก่อนที่จะมีการย้ายข้อมูลแอป ให้ตั้งค่า install_url ภายใน migrate_from เพื่อแจ้งให้เบราว์เซอร์ทราบ URL ที่จะดึงข้อมูลซึ่งยังคงมีไฟล์ Manifest เก่าแนบอยู่โดยไม่มีการเปลี่ยนเส้นทาง

// Manifest at https://fileman.google.com/manifest.json
{
  "name": "File Manager",
  "id": "/files/",
  "start_url": "/files/index.html",
  ....
  "migrate_from": [
    {
      "id": "https://drive.google.com/",
      "install_url": "https://drive.google.com/drive/installwebapp?usp=migrate"
    }
  ]
}

เท่านี้ก็เรียบร้อย UX จะคล้ายกับ UX ที่ใช้สำหรับการ อัปเดตแอป, โดยผู้ใช้จะได้รับการแจ้งเตือนที่มุมขวาบนของหน้าต่างแอป

การคลิกตรวจสอบการอัปเดตแอป จะแสดง UX ต่อไปนี้ (ขึ้นอยู่กับสิ่งที่เปลี่ยนแปลงในไฟล์ Manifest)

ควบคุมประสบการณ์ของผู้ใช้

คุณสามารถเลือกระดับความเข้มข้นของการย้ายข้อมูลได้โดยใช้แฟล็ก behavior ดังนี้

1. Suggest (ค่าเริ่มต้น): ผู้ใช้จะได้รับการแจ้งเตือนแบบพาสซีฟ (เช่น ในเมนูแอป) โดยสามารถเลือกอัปเดต ถอนการติดตั้งแอป หรือไม่สนใจการย้ายข้อมูลได้ด้วยการเปิดกล่องโต้ตอบ
2. Force: เมื่อเปิดแอปครั้งถัดไป ผู้ใช้จะเห็นกล่องโต้ตอบที่บล็อกการทำงาน โดยต้องอัปเดตเป็นต้นทางใหม่หรือถอนการติดตั้งแอป (โปรดดูภาพหน้าจอต่อไปนี้)

ตัวอย่างต่อไปนี้แสดงวิธีตั้งค่าตัวเลือกนี้

"migrate_from": [
  { 
    "id": "https://example.com/social/",
    "behavior": "force" // or suggest
  }
]

บทสรุป

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