ติดตั้งเว็บแอปด้วยองค์ประกอบการติดตั้ง HTML ใหม่

Patrick Brosset

เผยแพร่เมื่อวันที่ 12 พฤษภาคม 2026

การติดตั้งเว็บแอปต้องใช้ JavaScript เสมอ เมื่อคุณใช้เหตุการณ์ beforeinstallprompt โฟลว์การติดตั้งจะอยู่ในสคริปต์ทั้งหมด องค์ประกอบ <install> ใหม่จะเปลี่ยนไป โดยคุณเพียงวางองค์ประกอบ HTML เดียวลงในหน้าเว็บ แล้วเบราว์เซอร์จะแสดงปุ่มติดตั้งที่เชื่อถือได้ให้คุณโดยไม่ต้องใช้ JavaScript

ทีม Microsoft Edge ได้ร่วมมือกับทีม Chrome ในการติดตั้งใช้งานองค์ประกอบ <install> ใน Chromium ตอนนี้คุณสามารถทดสอบองค์ประกอบดังกล่าวได้โดยเปิดใช้แฟล็กใน Chrome หรือ Edge เวอร์ชัน 148 ขึ้นไป และยังทดสอบได้ในฐานะช่วงทดลองใช้จากต้นทางซึ่งคุณสามารถใช้ได้ในทั้ง 2 เบราว์เซอร์ตั้งแต่เวอร์ชัน 148 ถึง 153

ลองใช้และดูว่าองค์ประกอบดังกล่าวแตกต่างจาก Web Install API (navigator.install()) ซึ่งเป็น API แบบบังคับอย่างไร โดย API นี้มีการทดลองใช้จาก origin trial ของตัวเอง

ตัวปัญหา

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

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

องค์ประกอบ <install>

เบราว์เซอร์จะควบคุมเนื้อหาและการนำเสนอขององค์ประกอบ <install> HTML ใหม่โดย การควบคุมข้อความป้ายกำกับ ภาษา และลักษณะที่ปรากฏของปุ่มโดยเบราว์เซอร์หมายความว่า เบราว์เซอร์สามารถเชื่อถือการคลิกของผู้ใช้ว่าเป็นสัญญาณแสดงความตั้งใจจริง เช่นเดียวกับองค์ประกอบสิทธิ์อื่นๆ อย่าง <geolocation>

ผู้ใช้ที่คลิกปุ่มที่มีป้ายกำกับว่า "ติดตั้งแอปพลิเคชันที่ยอดเยี่ยม" ไม่น่าจะแปลกใจเมื่อข้อความแจ้งการติดตั้งปรากฏขึ้น

เนื่องจากเบราว์เซอร์แสดงปุ่ม คุณจึงได้รับฟีเจอร์การติดตั้งที่เชื่อถือได้โดยใช้โค้ดเพียงเล็กน้อยและไม่ต้องจัดเตรียมพิธีการ beforeinstallprompt ใน JavaScript

ติดตั้งแอปปัจจุบัน

หากหน้าปัจจุบันลิงก์ไปยังไฟล์ Manifest ที่มีช่อง id คุณจะต้องใช้เพียงองค์ประกอบเดียว ดังนี้

<install></install>

เบราว์เซอร์จะแสดงปุ่มที่มีข้อความและไอคอนมาตรฐาน และเมื่อผู้ใช้คลิกปุ่มดังกล่าว โฟลว์การติดตั้งปกติของเบราว์เซอร์จะเริ่มทำงาน

ติดตั้งแอปอื่น

หากต้องการติดตั้งเว็บแอปที่อยู่ในต้นทางอื่นที่ไม่ใช่หน้าปัจจุบัน ให้ใช้แอตทริบิวต์ installurl เพื่อชี้ไปยังเว็บแอปอื่น

<install installurl="https://awesome-app.com/"></install>

หากหน้าเว็บที่ https://awesome-app.com ลิงก์ไปยัง ไฟล์ Manifest ที่กำหนดช่อง id คุณก็เพียงแค่ดำเนินการดังกล่าว

หากไม่มีช่อง id ให้ใช้แอตทริบิวต์ manifestid เพื่อระบุ ไฟล์ Manifest ที่คำนวณแล้ว id

<install installurl="https://awesome-app.com/"
  manifestid="https://awesome-app.com/?source=pwa">
</install>

วิธีรับ id ของไฟล์ Manifest ที่คำนวณแล้ว

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. ไปที่แท็บแอปพลิเคชัน
3. ในส่วนข้อมูลประจำตัว ให้คัดลอกค่ารหัสแอปที่คำนวณแล้ว

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

ระบุเนื้อหาทางเลือก

หากเบราว์เซอร์ไม่รองรับองค์ประกอบ <install> ระบบจะแสดง HTML ที่คุณใส่ไว้ ในองค์ประกอบดังกล่าว

<install installurl="https://awesome-app.com/">
  <a href="https://awesome-app.com/">Launch Awesome App</a>
</install>

ตรวจหาการรองรับ

หากเนื้อหาทางเลือกไม่เพียงพอสำหรับ Use Case ของคุณ และคุณต้องการที่จะใช้ประสบการณ์ของผู้ใช้ที่แตกต่างกันในเบราว์เซอร์ที่ไม่รองรับองค์ประกอบ <install> ให้ใช้ JavaScript เพื่อตรวจหาการรองรับ:

if ('HTMLInstallElement' in window) {
  // The <install> element is supported.
}

จัดการเหตุการณ์

องค์ประกอบ <install> จะเริ่มทำงานเมื่อเกิดเหตุการณ์ที่คุณสามารถรับฟังเพื่อดูว่าการดำเนินการสำเร็จหรือไม่ มีการปิดข้อความแจ้ง และมีข้อผิดพลาดในการตรวจสอบ

const button = document.querySelector('install');

button.addEventListener('promptaction', () => {
  console.log('Installation succeeded');
});

button.addEventListener('promptdismiss', () => {
  console.log('User dismissed the install prompt');
});

button.addEventListener('validationstatuschanged', (e) => {
  if (e.target.invalidReason === 'install_data_invalid') {
    console.error('Invalid install data:', e.target.invalidReason);
  }
});

ลองใช้งานได้แล้ววันนี้

หากต้องการลองใช้องค์ประกอบ <install> ในวันนี้ คุณมี 2 ตัวเลือกดังนี้

• ทดสอบองค์ประกอบในอุปกรณ์ของคุณเองเท่านั้น
• ทดสอบองค์ประกอบในสภาพแวดล้อมจริงกับผู้ใช้โดยลงทะเบียนเข้าร่วมช่วงทดลองใช้จากต้นทาง

ทดสอบในอุปกรณ์ของคุณเอง

วิธีทดสอบองค์ประกอบในอุปกรณ์ของคุณเองวันนี้

1. ใช้ Chrome หรือ Edge เวอร์ชัน 148 ขึ้นไป
2. ไปที่ about://flags/#web-app-install-element ในแท็บใหม่
3. ตั้งค่าองค์ประกอบการติดตั้งเว็บแอป เป็นเปิดใช้
4. รีสตาร์ทเบราว์เซอร์

ทดสอบในเว็บไซต์ที่เผยแพร่แล้วโดยใช้ช่วงทดลองใช้จากต้นทาง

ช่วงทดลองใช้จากต้นทางช่วยให้ผู้ใช้จริงในเว็บไซต์เวอร์ชันที่ใช้งานจริงใช้ฟีเจอร์ได้โดยไม่ต้องเปิดใช้แฟล็กก่อน

1. เปิดหน้าลงทะเบียนช่วงทดลองใช้จากต้นทางขององค์ประกอบ <install>
2. ลงชื่อเข้าใช้
3. คลิกลงทะเบียน
4. ป้อนต้นทางของเว็บไซต์และกรอกข้อมูลในส่วนที่เหลือของแบบฟอร์ม
5. เมื่อส่งแบบฟอร์มแล้ว คุณจะได้รับสตริงโทเค็น
6. เพิ่มโทเค็นลงในหน้าเว็บของเว็บไซต์โดยใช้แท็ก <meta> ดังนี้

<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

หรือจะส่งโทเค็นเป็นส่วนหัวการตอบกลับ HTTP แทนก็ได้ ดังนี้

Origin-Trial: YOUR_TOKEN_HERE

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

• เริ่มต้นใช้งานการทดลองใช้จากต้นทางสำหรับ Chrome
• ทดสอบ API และฟีเจอร์ทดลองโดยใช้การทดลองใช้จากต้นทาง สำหรับ Edge.

ดูของจริง

ดูการสาธิต Store ขององค์ประกอบ <install> ซึ่งเป็นแคตตาล็อก PWA ที่ใช้องค์ประกอบ <install> เพื่อให้คุณติดตั้งแอปตัวอย่างหลายแอปได้

การเปรียบเทียบกับ Web Install API

องค์ประกอบ <install> ไม่ใช่วิธีเดียวที่เรากำลังทดลองเพื่อ ปรับปรุงการติดตั้งแอปบนเว็บ

ก่อนหน้านี้ เราได้ทดลองใช้ Web Install API (navigator.install()) ซึ่งเป็น JavaScript API แบบบังคับที่ช่วยให้เว็บไซต์ของคุณเริ่มการติดตั้งเว็บแอปจากต้นทางเดียวกันหรือต้นทางอื่นได้ ดูข้อมูลเพิ่มเติมได้ที่ The Web Install API พร้อมให้ ทดสอบแล้ว

Web Install API มี ช่วงทดลองใช้จากต้นทางของตัวเองด้วย

การเปรียบเทียบแนวทางทั้ง 2 มีดังนี้

บอกให้เรารู้ว่าคุณคิดอย่างไร

เรากำลังมองหาความคิดเห็นเกี่ยวกับแนวทางทั้ง 2 อย่างจริงจัง เราอาจเพิ่มการรองรับองค์ประกอบ <install> หรือ API navigator.install() หรือทั้ง 2 อย่าง ขึ้นอยู่กับความต้องการของคุณ

หากต้องการแชร์ความคิดเห็นเกี่ยวกับองค์ประกอบ <install> ให้ เปิดปัญหาในที่เก็บ WICG ที่สร้างขึ้นเพื่อข้อเสนอนี้

หากต้องการแชร์ความคิดเห็นเกี่ยวกับ API navigator.install() ให้เพิ่มความคิดเห็นใน ปัญหาความคิดเห็นของนักพัฒนาแอป: navigator.install เทียบกับ <install> องค์ประกอบ

แหล่งข้อมูล

• คำอธิบาย: องค์ประกอบ <install>
• การสาธิต: Store ขององค์ประกอบ <install>
• วิธีการใช้งานและแหล่งที่มาของการสาธิต
• รายการสถานะแพลตฟอร์ม Chrome
• Web Install API พร้อมให้ ทดสอบ แล้ว (บล็อกของ Edge)
• คำอธิบาย Web Install API