เผยแพร่เมื่อวันที่ 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 ที่คำนวณแล้ว
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- ไปที่แท็บแอปพลิเคชัน
- ในส่วนข้อมูลประจำตัว ให้คัดลอกค่ารหัสแอปที่คำนวณแล้ว
การใช้ปุ่ม <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 ตัวเลือกดังนี้
- ทดสอบองค์ประกอบในอุปกรณ์ของคุณเองเท่านั้น
- ทดสอบองค์ประกอบในสภาพแวดล้อมจริงกับผู้ใช้โดยลงทะเบียนเข้าร่วมช่วงทดลองใช้จากต้นทาง
ทดสอบในอุปกรณ์ของคุณเอง
วิธีทดสอบองค์ประกอบในอุปกรณ์ของคุณเองวันนี้
- ใช้ Chrome หรือ Edge เวอร์ชัน 148 ขึ้นไป
- ไปที่
about://flags/#web-app-install-elementในแท็บใหม่ - ตั้งค่าองค์ประกอบการติดตั้งเว็บแอป เป็นเปิดใช้
- รีสตาร์ทเบราว์เซอร์
ทดสอบในเว็บไซต์ที่เผยแพร่แล้วโดยใช้ช่วงทดลองใช้จากต้นทาง
ช่วงทดลองใช้จากต้นทางช่วยให้ผู้ใช้จริงในเว็บไซต์เวอร์ชันที่ใช้งานจริงใช้ฟีเจอร์ได้โดยไม่ต้องเปิดใช้แฟล็กก่อน
- เปิดหน้าลงทะเบียนช่วงทดลองใช้จากต้นทางขององค์ประกอบ
<install> - ลงชื่อเข้าใช้
- คลิกลงทะเบียน
- ป้อนต้นทางของเว็บไซต์และกรอกข้อมูลในส่วนที่เหลือของแบบฟอร์ม
- เมื่อส่งแบบฟอร์มแล้ว คุณจะได้รับสตริงโทเค็น
- เพิ่มโทเค็นลงในหน้าเว็บของเว็บไซต์โดยใช้แท็ก
<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 มีดังนี้
|
navigator.install() API |
|
|---|---|---|
| วิธีการ | HTML แบบประกาศ | JavaScript แบบบังคับ |
| โค้ดที่ต้องใช้ | องค์ประกอบ HTML เดียว | JavaScript สำหรับเรียก navigator.install() และจัดการ Promise ที่แสดงผล |
| ความน่าเชื่อถือของเบราว์เซอร์ | สูง: เบราว์เซอร์ควบคุมเนื้อหาและลักษณะที่ปรากฏของปุ่ม เช่นเดียวกับองค์ประกอบสิทธิ์ | ต่ำ: ต้องมีการเปิดใช้งานของผู้ใช้ (คลิก แตะ) เป็นเครื่องหมายรับรองความน่าเชื่อถือ |
| การติดตั้งจากต้นทางอื่น | ได้ โดยใช้ installurl |
ได้ โดยส่ง URL ไปยัง navigator.install() |
| การปรับแต่ง | น้อย: เบราว์เซอร์จะกำหนดลักษณะที่ปรากฏของปุ่ม | เต็ม: คุณออกแบบ UI ของคุณเองและเรียก API จากการโต้ตอบใดก็ได้ |
| Fallback | ในตัว: เนื้อหาลูกจะแสดงหากเบราว์เซอร์ไม่รองรับองค์ประกอบ | คุณเขียนตรรกะการตรวจหาฟีเจอร์และ Fallback ของคุณเอง |
| เหมาะสำหรับ | ปุ่มติดตั้งแบบวางได้โดยใช้โค้ดเพียงเล็กน้อย สถานการณ์ที่ต้องการ UI ที่เบราว์เซอร์เชื่อถือได้ | โฟลว์การติดตั้งที่กำหนดเอง, UI แคตตาล็อกแบบไดนามิก, การผสานรวมกับอินเทอร์เฟซที่มี JavaScript จำนวนมากอยู่แล้ว |
บอกให้เรารู้ว่าคุณคิดอย่างไร
เรากำลังมองหาความคิดเห็นเกี่ยวกับแนวทางทั้ง 2 อย่างจริงจัง เราอาจเพิ่มการรองรับองค์ประกอบ <install> หรือ API navigator.install() หรือทั้ง 2 อย่าง ขึ้นอยู่กับความต้องการของคุณ
หากต้องการแชร์ความคิดเห็นเกี่ยวกับองค์ประกอบ <install> ให้ เปิดปัญหาในที่เก็บ WICG
ที่สร้างขึ้นเพื่อข้อเสนอนี้
หากต้องการแชร์ความคิดเห็นเกี่ยวกับ API navigator.install() ให้เพิ่มความคิดเห็นใน
ปัญหาความคิดเห็นของนักพัฒนาแอป: navigator.install เทียบกับ <install>
องค์ประกอบ