ที่ผ่านมาการติดตั้งแอปจะทำได้ในบริบทของแอปพลิเคชันเฉพาะแพลตฟอร์มเท่านั้น ปัจจุบันเว็บแอปสมัยใหม่มอบประสบการณ์แบบติดตั้งได้ ซึ่งมอบการผสานรวมและความเสถียรในระดับเดียวกับแอปเฉพาะแพลตฟอร์ม
ซึ่งทำได้หลายวิธี ดังนี้
- การติดตั้ง PWA จากเบราว์เซอร์
- การติดตั้ง PWA จาก App Store
การมีช่องทางการเผยแพร่ที่แตกต่างกันเป็นวิธีที่มีประสิทธิภาพในการเข้าถึงผู้ใช้จำนวนมาก แต่การเลือกกลยุทธ์ที่เหมาะสมในการโปรโมตการติดตั้ง PWA อาจเป็นเรื่องท้าทาย
คู่มือนี้จะศึกษาแนวทางปฏิบัติที่ดีที่สุดในการรวมตัวเลือกการติดตั้งต่างๆ เพื่อเพิ่มอัตราการติดตั้ง รวมทั้งหลีกเลี่ยงการแข่งขันระหว่างแพลตฟอร์มและการแย่งลูกค้ากันเอง บริการติดตั้งที่ครอบคลุมประกอบด้วย PWA ที่ติดตั้งทั้งจากเบราว์เซอร์และ App Store ตลอดจนแอปเฉพาะแพลตฟอร์ม
ทำไมต้องทำให้เว็บแอปติดตั้งได้
Progressive Web App ที่ติดตั้งจะทำงานในหน้าต่างแบบสแตนด์อโลนแทนการใช้แท็บเบราว์เซอร์ โดยสามารถเปิดได้จากหน้าจอหลัก แท่นชาร์จ แถบงาน หรือชั้นวางของผู้ใช้ โดยอาจค้นหาในอุปกรณ์และสลับไปมาด้วยตัวสลับแอป ทำให้เด็กๆ รู้สึกเหมือนเป็นส่วนหนึ่งของอุปกรณ์ที่ติดตั้งแอปอยู่
แต่การมีทั้งเว็บแอปที่ติดตั้งได้และแอปเฉพาะแพลตฟอร์มอาจทำให้ผู้ใช้สับสนได้ สำหรับแอปเฉพาะแพลตฟอร์มของผู้ใช้บางรายอาจเป็นตัวเลือกที่ดีที่สุด แต่สำหรับแอปอื่นๆ อาจมีข้อเสียบางประการดังนี้
- ข้อจำกัดเกี่ยวกับพื้นที่เก็บข้อมูล: การติดตั้งแอปใหม่อาจหมายถึงการลบแอปอื่น หรือล้างพื้นที่เก็บข้อมูลโดยการนำเนื้อหาที่มีคุณค่าออก ซึ่งจะส่งผลเสียต่อผู้ใช้ที่ใช้อุปกรณ์ระดับล่างโดยเฉพาะ
- แบนด์วิดท์ที่ใช้งานได้: การดาวน์โหลดแอปอาจเป็นกระบวนการที่มีค่าใช้จ่ายสูงและช้ามาก โดยเฉพาะอย่างยิ่งสำหรับผู้ใช้ที่ใช้การเชื่อมต่อช้าและแพ็กเกจอินเทอร์เน็ตที่มีราคาแพง
- ความยุ่งยาก: การออกจากเว็บไซต์และย้ายไปยังร้านค้าเพื่อดาวน์โหลดแอปจะสร้างอุปสรรคเพิ่มเติมและทำให้การดำเนินการของผู้ใช้ล่าช้าซึ่งสามารถทำได้ในเว็บโดยตรง
- รอบการอัปเดต: การเปลี่ยนแปลงในแอปเฉพาะแพลตฟอร์มอาจต้องผ่านกระบวนการตรวจสอบแอป ซึ่งอาจทำให้การเปลี่ยนแปลงและการทดสอบช้าลง (เช่น การทดสอบ A/B)
ในบางกรณี เปอร์เซ็นต์ของผู้ใช้ที่ไม่ดาวน์โหลดแอปเฉพาะแพลตฟอร์มอาจมีขนาดใหญ่ เช่น ผู้ใช้ที่คิดว่าจะไม่ค่อยได้ใช้แอป หรือไม่สามารถใช้พื้นที่เก็บข้อมูลหรือข้อมูลหลายเมกะไบต์ คุณกำหนดขนาดของกลุ่มนี้ได้หลายวิธี เช่น ใช้การตั้งค่าข้อมูลวิเคราะห์เพื่อติดตามเปอร์เซ็นต์ของผู้ใช้ "เว็บบนอุปกรณ์เคลื่อนที่เท่านั้น"
หากกลุ่มนี้มีขนาดใหญ่มาก นั่นเป็นตัวบ่งชี้ที่ดีว่าคุณต้องการเสนอทางเลือกในการติดตั้งประสบการณ์การใช้งาน
การโปรโมตการติดตั้ง PWA ผ่านเบราว์เซอร์
หากคุณมี PWA คุณภาพสูง ก็ควรโปรโมตการติดตั้งในแอปเฉพาะแพลตฟอร์ม เช่น หากแอปเฉพาะแพลตฟอร์มไม่มีฟังก์ชันการทำงานที่ PWA เสนอให้หรือหากแอปไม่ได้อัปเดตมาระยะหนึ่งแล้ว นอกจากนี้ ควรโปรโมตการติดตั้ง PWA หากแอปเฉพาะแพลตฟอร์มไม่ได้รับการเพิ่มประสิทธิภาพสำหรับหน้าจอขนาดใหญ่ เช่น ใน ChromeOS
สำหรับบางแอป การกระตุ้นการติดตั้งแอปเฉพาะแพลตฟอร์มเป็นส่วนสำคัญของโมเดลธุรกิจ ในกรณีดังกล่าว การโปรโมตการติดตั้งแอปเฉพาะแพลตฟอร์มอาจเป็นเรื่องที่เหมาะสม แต่ผู้ใช้บางรายอาจรู้สึกสะดวกใจที่จะอยู่ในเว็บมากกว่า หากระบุกลุ่มดังกล่าวได้ ข้อความแจ้งของ PWA จะแสดงให้ผู้ชมเห็นเท่านั้น (สิ่งที่เราเรียกว่า "PWA สำรอง")
PWA เป็นประสบการณ์การติดตั้งหลัก
เมื่อ PWA เป็นไปตามเกณฑ์ความสามารถในการติดตั้ง เบราว์เซอร์ส่วนใหญ่จะแสดงสัญญาณว่า PWA ติดตั้งได้ เช่น Chrome ในเดสก์ท็อปแสดงไอคอนติดตั้งได้ในแถบที่อยู่ ส่วนในอุปกรณ์เคลื่อนที่ จะแสดงแถบข้อมูลขนาดเล็ก ดังนี้
![ข้อความแจ้งให้ติดตั้ง Chrome แบบมาตรฐานซึ่งเรียกว่าแถบข้อมูลขนาดเล็ก](https://web.dev/static/articles/define-install-strategy/image/standard-chrome-install-p-21f83b2dd90e4.png?authuser=6&hl=th)
แม้ว่าจะเพียงพอสําหรับประสบการณ์การใช้งานบางอย่าง แต่หากเป้าหมายของคุณคือเพิ่มการติดตั้ง PWA เราขอแนะนําให้คุณฟัง BeforeInstallPromptEvent
และทําตามรูปแบบในการโปรโมตการติดตั้ง PWA
ป้องกันไม่ให้ PWA แย่งรายได้ไปจากอัตราการติดตั้งแอปเฉพาะแพลตฟอร์ม
ในบางกรณี คุณอาจเลือกโปรโมตการติดตั้งแอปเฉพาะแพลตฟอร์มผ่าน PWA แต่ในกรณีนี้ เรายังคงแนะนำให้คุณมีกลไกที่อนุญาตให้ผู้ใช้ติดตั้ง PWA ตัวเลือกสำรองนี้ช่วยให้ผู้ใช้ที่ไม่สามารถทำได้หรือไม่ต้องการติดตั้งแอปเฉพาะแพลตฟอร์มของคุณได้รับประสบการณ์การติดตั้งที่คล้ายกัน
ขั้นตอนแรกในการใช้กลยุทธ์นี้คือการกำหนดการเรียนรู้ว่าคุณจะแสดงโปรโมชันการติดตั้งแก่ผู้ใช้สำหรับ PWA เมื่อใด
ตัวอย่างเช่น ผู้ใช้ PWA คือผู้ใช้ที่เห็นข้อความแจ้งให้ติดตั้งแอปเฉพาะแพลตฟอร์ม และไม่ได้ติดตั้งแอปเฉพาะแพลตฟอร์ม พวกเขากลับมาที่เว็บไซต์อย่างน้อย 5 ครั้ง หรือคลิกแบนเนอร์แอป แต่ใช้เว็บไซต์ต่อไปแทน
จากนั้นจึงนำการเรียนรู้มาใช้ในลักษณะต่อไปนี้
- แสดงแบนเนอร์เพื่อการติดตั้งแอปเฉพาะแพลตฟอร์ม
- หากผู้ใช้ปิดแบนเนอร์ ให้ตั้งค่าคุกกี้ด้วยข้อมูลดังกล่าว (เช่น
document.cookie = "app-install-banner=dismissed"
) - ใช้คุกกี้อื่นเพื่อติดตามจำนวนการเข้าชมเว็บไซต์ของผู้ใช้ (เช่น
document.cookie = "user-visits=1"
) - เขียนฟังก์ชัน เช่น
isPWAUser()
ที่ใช้ข้อมูลที่จัดเก็บไว้ในคุกกี้ก่อนหน้านี้ร่วมกับ API ของgetInstalledRelatedApps()
เพื่อพิจารณาว่าผู้ใช้ถือเป็น "ผู้ใช้ PWA" หรือไม่ - เมื่อผู้ใช้ดำเนินการที่มีความหมาย ให้เรียกใช้
isPWAUser()
หากฟังก์ชันแสดงผลเป็น "จริง" และได้บันทึกข้อความแจ้งให้ติดตั้ง PWA ไว้ก่อนหน้านี้ คุณก็แสดงปุ่มติดตั้ง PWA ได้
การโปรโมตการติดตั้ง PWA ผ่าน App Store
แอปสำหรับ App Store สามารถสร้างด้วยเทคโนโลยีที่แตกต่างกัน รวมถึงเทคนิค PWA ในการรวม PWA เข้ากับสภาพแวดล้อมแบบดั้งเดิม คุณจะเห็นสรุปของเทคโนโลยีที่นำไปใช้ได้
ในส่วนนี้ เราจะจัดประเภทแอปใน Store เป็น 2 กลุ่ม ได้แก่
- แอปเฉพาะแพลตฟอร์ม: แอปเหล่านี้ส่วนใหญ่สร้างขึ้นด้วยโค้ดเฉพาะแพลตฟอร์ม ขนาดจะขึ้นอยู่กับแพลตฟอร์ม แต่มักจะเกิน 10 MB ใน Android และ 30 MB ใน iOS คุณอาจต้องโปรโมตแอปเฉพาะแพลตฟอร์มหากไม่มี PWA หรือหากแอปเฉพาะแพลตฟอร์มมีชุดฟีเจอร์ที่สมบูรณ์มากกว่า
- แอปที่มีน้ำหนักเบา: แอปเหล่านี้สร้างได้ด้วยโค้ดเฉพาะแพลตฟอร์ม แต่มักสร้างด้วยเทคโนโลยีเว็บซึ่งอยู่ใน Wrapper เฉพาะแพลตฟอร์ม และยังอัปโหลด PWA แบบเต็มไปยังร้านค้าได้ด้วย (เราจะกล่าวถึงเรื่องนี้ภายหลังในบทความนี้) บางบริษัทก็เลือกที่จะมอบประสบการณ์การใช้งานแบบ "Lite" และบางบริษัทก็ใช้วิธีนี้สำหรับแอปหลัก (หลัก) เช่นกัน
การโปรโมตแอปน้ำหนักเบา
การศึกษาของ Google Play ระบุว่าเมื่อเพิ่มขนาด APK ทุก 6 MB อัตรา Conversion ของการติดตั้งจะลดลง 1% ซึ่งหมายความว่าอัตราการดาวน์โหลดเสร็จสมบูรณ์ของแอปที่มีขนาด 10 MB อาจสูงกว่าแอปที่มีขนาด 100 MB อยู่ประมาณ 30%!
เพื่อแก้ไขปัญหานี้ บริษัทบางแห่งจึงใช้ PWA จัดหาแอปเวอร์ชันขนาดเล็กใน Play Store โดยใช้กิจกรรมบนเว็บที่เชื่อถือได้ (TWA) TWA จะรวม PWA ไว้ใน WebView เช่นเดียวกับคอมโพเนนต์ และขนาดแอปที่เป็นผลลัพธ์มักจะมีขนาดไม่เกิน 2-3 เมกะไบต์
Oyo หนึ่งในบริษัทด้านการบริการที่ใหญ่ที่สุดของอินเดีย ได้สร้างแอปเวอร์ชัน Lite และให้บริการใน Play Store โดยใช้ TWA ในเวลาที่เขียนบทความนี้ แอป Oyo มีขนาดเพียง 850 KB ซึ่งมีขนาดเพียง 7% ของแอป Android และเมื่อติดตั้งแล้ว จะแยกแยะจากแอป Android ไม่ได้เลย
Oyo จะเก็บแอปทั้งเวอร์ชันหลักและแอป "Lite" ไว้ใน Store เพื่อมอบตัวเลือกแก่ผู้ใช้
การมอบประสบการณ์เว็บขนาดเล็ก
ในความเป็นจริง ผู้ใช้อุปกรณ์ระดับโลว์เอนด์มีแนวโน้มที่จะดาวน์โหลดแอปเวอร์ชันขนาดเล็กมากกว่าผู้ใช้บนโทรศัพท์ระดับไฮเอนด์ ดังนั้น หากสามารถระบุอุปกรณ์ของผู้ใช้ได้ คุณอาจให้ความสำคัญกับแบนเนอร์การติดตั้งแอปที่น้ำหนักเบากว่าเวอร์ชันแอปเฉพาะแพลตฟอร์ม
สำหรับในเว็บ คุณอาจได้รับสัญญาณของอุปกรณ์และประมาณสัญญาณดังกล่าวกับหมวดหมู่อุปกรณ์ (เช่น "สูง" "ปานกลาง" หรือ "ต่ำ") คุณดูข้อมูลนี้ได้หลายวิธีโดยใช้ JavaScript API หรือคำแนะนำไคลเอ็นต์
การใช้ JavaScript
เมื่อใช้พร็อพเพอร์ตี้ JavaScript เช่น navigator.hardwareConcurrency, navigator.deviceMemory และ navigator.connection คุณจะสามารถดูข้อมูลเกี่ยวกับ CPU ของอุปกรณ์, หน่วยความจำ และสถานะเครือข่ายได้ตามลำดับ เช่น
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
การใช้คำแนะนำสำหรับไคลเอ็นต์
นอกจากนี้ สัญญาณของอุปกรณ์ยังอาจอนุมานได้ในส่วนหัวของคำขอ HTTP ผ่านคำแนะนำสำหรับไคลเอ็นต์ ต่อไปนี้คือวิธีที่คุณสามารถใช้โค้ดก่อนหน้าสำหรับหน่วยความจำอุปกรณ์ด้วยคำแนะนำเกี่ยวกับไคลเอ็นต์
ก่อนอื่น ให้บอกเบราว์เซอร์ว่าคุณสนใจรับคำแนะนำเกี่ยวกับหน่วยความจำของอุปกรณ์ในส่วนหัวของการตอบกลับ HTTP สำหรับคำขอของบุคคลที่หนึ่งใดก็ได้
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
จากนั้น คุณจะเริ่มได้รับข้อมูล Device-Memory
ในส่วนหัวของคำขอ HTTP ดังนี้
GET /main.js HTTP/1.1
Device-Memory: 0.5
คุณสามารถใช้ข้อมูลนี้ในแบ็กเอนด์เพื่อจัดเก็บคุกกี้ที่มีหมวดหมู่อุปกรณ์ของผู้ใช้ได้ ดังนี้
app.get('/route', (req, res) => {
// Determine device category
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Set cookie
res.setCookie('Device-Category', deviceCategory);
…
});
ขั้นตอนสุดท้าย สร้างตรรกะของคุณเองเพื่อแมปข้อมูลนี้กับหมวดหมู่อุปกรณ์ แล้วแสดงข้อความแจ้งให้ติดตั้งแอปที่เกี่ยวข้องในแต่ละกรณี ดังนี้
if (isDeviceMidOrLowEnd()) {
// show "Lite app" install banner or PWA A2HS prompt
} else {
// show "Core app" install banner
}
บทสรุป
ความสามารถในการมีไอคอนบนหน้าจอหลักของผู้ใช้เป็นหนึ่งในคุณลักษณะที่น่าสนใจที่สุดของแอปพลิเคชัน เนื่องจากที่ผ่านมาวิธีการนี้ใช้ได้กับแอปที่ติดตั้งจาก App Store เท่านั้น บริษัทอาจคิดว่าการแสดงแบนเนอร์การติดตั้ง App Store ก็เพียงพอแล้วที่จะโน้มน้าวให้ผู้ใช้ติดตั้งประสบการณ์การใช้งานของตน ปัจจุบันมีตัวเลือกเพิ่มเติมสำหรับให้ผู้ใช้ติดตั้งแอปได้ ซึ่งรวมถึงการนำเสนอประสบการณ์การใช้งานแอปขนาดเล็กในร้านค้า และการอนุญาตให้ผู้ใช้เพิ่ม PWA ลงในหน้าจอหลักโดยแจ้งให้ผู้ใช้ดำเนินการจากเว็บไซต์โดยตรง