ก่อนหน้านี้ การติดตั้งแอปจะทําได้เฉพาะในบริบทของแอปพลิเคชันเฉพาะแพลตฟอร์มเท่านั้น ปัจจุบันเว็บแอปสมัยใหม่มอบประสบการณ์การใช้งานที่ติดตั้งได้ซึ่งให้การผสานรวมและความน่าเชื่อถือในระดับเดียวกับแอปเฉพาะแพลตฟอร์ม
ซึ่งทำได้หลายวิธี ดังนี้
- การติดตั้ง PWA จากเบราว์เซอร์
- การติดตั้ง PWA จาก App Store
การมีช่องทางการจัดจำหน่ายที่หลากหลายเป็นวิธีที่มีประสิทธิภาพในการเข้าถึงผู้ใช้จํานวนมาก แต่การเลือกกลยุทธ์ที่เหมาะสมเพื่อโปรโมตการติดตั้ง PWA อาจเป็นเรื่องยาก
คู่มือนี้จะอธิบายแนวทางปฏิบัติแนะนำในการรวมตัวเลือกการติดตั้งต่างๆ เพื่อเพิ่มอัตราการติดตั้ง และหลีกเลี่ยงการแข่งขันและการตัดรายได้กันเองของแพลตฟอร์ม ข้อเสนอการติดตั้งที่ครอบคลุม ได้แก่ PWA ที่ติดตั้งจากทั้งเบราว์เซอร์และ App Store รวมถึงแอปเฉพาะแพลตฟอร์ม
เหตุผลที่ควรทำให้เว็บแอปติดตั้งได้
Progressive Web App ที่ติดตั้งจะทำงานในหน้าต่างแบบสแตนด์อโลนแทนแท็บเบราว์เซอร์ โดยสามารถเปิดได้จากหน้าจอหลัก แท่นชาร์จ แถบงาน หรือชั้นวางของผู้ใช้ คุณสามารถค้นหาแอปในอุปกรณ์และข้ามไปมาระหว่างแอปต่างๆ ด้วยตัวสลับแอป ซึ่งทำให้ผู้ใช้รู้สึกเหมือนแอปเป็นส่วนหนึ่งของอุปกรณ์ที่ติดตั้ง
แต่การมีทั้งเว็บแอปที่ติดตั้งได้และแอปเฉพาะแพลตฟอร์มอาจทำให้ผู้ใช้สับสน สําหรับผู้ใช้บางราย แอปเฉพาะแพลตฟอร์มอาจเป็นตัวเลือกที่ดีที่สุด แต่สําหรับผู้ใช้บางราย แอปดังกล่าวอาจมีข้อเสียอยู่บ้าง ดังนี้
- ข้อจำกัดด้านพื้นที่เก็บข้อมูล: การติดตั้งแอปใหม่อาจหมายถึงการลบแอปอื่นๆ หรือล้างพื้นที่เก็บข้อมูลด้วยการนำเนื้อหาที่มีคุณค่าออก ซึ่งจะเสียเปรียบอย่างยิ่งสำหรับผู้ใช้อุปกรณ์ระดับล่าง
- แบนด์วิดท์ที่ใช้ได้: การดาวน์โหลดแอปอาจเป็นกระบวนการที่เสียค่าใช้จ่ายและช้ามาก โดยเฉพาะสำหรับผู้ใช้ที่มีการเชื่อมต่อที่ช้าและแพ็กเกจอินเทอร์เน็ตที่มีราคาแพง
- การขัดข้อง: การออกจากเว็บไซต์และไปยัง Store เพื่อดาวน์โหลดแอปจะทำให้เกิดปัญหาเพิ่มเติมและทำให้การดำเนินการของผู้ใช้ล่าช้า ซึ่งสามารถดำเนินการในเว็บได้โดยตรง
- รอบการอัปเดต: การเปลี่ยนแปลงในแอปเฉพาะแพลตฟอร์มอาจต้องผ่านกระบวนการตรวจสอบแอป ซึ่งอาจทำให้การเปลี่ยนแปลงและการทดสอบ (เช่น การทดสอบ A/B) ช้าลง
ในบางกรณี เปอร์เซ็นต์ของผู้ใช้ที่จะไม่ดาวน์โหลดแอปเฉพาะแพลตฟอร์มของคุณอาจสูง เช่น ผู้ใช้ที่คิดว่าจะไม่ใช้แอปบ่อยนัก หรือผู้ใช้ที่ไม่ต้องการเสียพื้นที่เก็บข้อมูลหรืออินเทอร์เน็ตหลายเมกะไบต์ คุณกําหนดขนาดของกลุ่มนี้ได้หลายวิธี เช่น โดยใช้การตั้งค่าข้อมูลวิเคราะห์เพื่อติดตามเปอร์เซ็นต์ของผู้ใช้ "เว็บบนอุปกรณ์เคลื่อนที่เท่านั้น"
หากกลุ่มนี้มีขนาดใหญ่ แสดงว่าคุณควรระบุวิธีอื่นในการติดตั้งประสบการณ์การใช้งาน
การโปรโมตการติดตั้ง PWA ผ่านเบราว์เซอร์
หากคุณมี PWA คุณภาพสูง ก็อาจดีกว่าที่จะโปรโมตการติดตั้ง PWA แทนแอปเฉพาะแพลตฟอร์ม เช่น หากแอปเฉพาะแพลตฟอร์มไม่มีฟังก์ชันการทำงานที่ PWA นำเสนอ หรือหากไม่ได้อัปเดตมาเป็นเวลานาน นอกจากนี้ การโปรโมตการติดตั้ง PWA ยังมีประโยชน์ในกรณีที่แอปเฉพาะแพลตฟอร์มไม่ได้เพิ่มประสิทธิภาพสำหรับหน้าจอขนาดใหญ่ เช่น ใน ChromeOS
สําหรับแอปบางแอป การเพิ่มจํานวนการติดตั้งแอปเฉพาะแพลตฟอร์มเป็นส่วนสําคัญของโมเดลธุรกิจ ในกรณีนี้ การโปรโมตการติดตั้งแอปเฉพาะแพลตฟอร์มจึงเหมาะสมกับธุรกิจ แต่ผู้ใช้บางรายอาจรู้สึกสบายใจที่จะอยู่ในเว็บมากกว่า หากระบุกลุ่มนั้นได้ ระบบจะแสดงข้อความแจ้ง PWA แก่กลุ่มนั้นเท่านั้น (สิ่งที่เราเรียกว่า "PWA เป็นทางเลือกสำรอง")
PWA เป็นประสบการณ์การใช้งานที่ติดตั้งได้หลัก
เมื่อ PWA เป็นไปตามเกณฑ์ความสามารถในการติดตั้ง เบราว์เซอร์ส่วนใหญ่จะแสดงเครื่องหมายว่า PWA นั้นติดตั้งได้ เช่น Chrome บนเดสก์ท็อปจะแสดงไอคอนที่ติดตั้งได้ในแถบที่อยู่ และในอุปกรณ์เคลื่อนที่จะแสดงแถบข้อมูลขนาดเล็ก ดังนี้
แม้ว่าการดำเนินการดังกล่าวอาจเพียงพอสำหรับประสบการณ์การใช้งานบางอย่าง แต่หากเป้าหมายของคุณคือการกระตุ้นการติดตั้ง PWA เราขอแนะนำให้คุณคอยฟัง BeforeInstallPromptEvent และทําตามรูปแบบในการโปรโมตการติดตั้ง PWA
ป้องกันไม่ให้ PWA แย่งส่วนแบ่งอัตราการติดตั้งแอปเฉพาะแพลตฟอร์ม
ในบางกรณี คุณอาจเลือกโปรโมตการติดตั้งแอปเฉพาะแพลตฟอร์มแทน PWA แต่ในกรณีนี้ เรายังคงแนะนำให้คุณระบุกลไกที่อนุญาตให้ผู้ใช้ติดตั้ง PWA ตัวเลือกสำรองนี้ช่วยให้ผู้ใช้ที่ติดตั้งแอปเฉพาะแพลตฟอร์มไม่ได้หรือไม่ต้องการติดตั้งได้รับประสบการณ์การใช้งานที่คล้ายกันเมื่อติดตั้งแอป
ขั้นตอนแรกในการใช้กลยุทธ์นี้คือการกำหนดการหาค่าประมาณว่าเมื่อใดที่คุณจะแสดงโปรโมชันการติดตั้ง PWA แก่ผู้ใช้
ตัวอย่างเช่น ผู้ใช้ PWA คือผู้ใช้ที่เห็นข้อความแจ้งให้ติดตั้งแอปเฉพาะแพลตฟอร์ม แต่ไม่ได้ติดตั้งแอปเฉพาะแพลตฟอร์มดังกล่าว ผู้ใช้รายดังกล่าวกลับมาที่เว็บไซต์อย่างน้อย 5 ครั้ง หรือคลิกแบนเนอร์แอป แต่ใช้เว็บไซต์ต่อไปแทน
จากนั้นจึงติดตั้งใช้งานวิธีการเฮิวริสติกได้ดังนี้
- แสดงแบนเนอร์การติดตั้งแอปเฉพาะแพลตฟอร์ม
- หากผู้ใช้ปิดแบนเนอร์ ให้ตั้งค่าคุกกี้ด้วยข้อมูลดังกล่าว (เช่น
document.cookie = "app-install-banner=dismissed") - ใช้คุกกี้อื่นเพื่อติดตามจํานวนการเข้าชมเว็บไซต์ของผู้ใช้ (เช่น
document.cookie = "user-visits=1") - เขียนฟังก์ชัน เช่น
isPWAUser()ที่ใช้ข้อมูลที่จัดเก็บไว้ในคุกกี้ก่อนหน้านี้ร่วมกับgetInstalledRelatedApps()API เพื่อระบุว่าผู้ใช้ถือเป็น "ผู้ใช้ PWA" หรือไม่ - เมื่อผู้ใช้ดําเนินการที่มีความหมาย ให้เรียก
isPWAUser()หากฟังก์ชันแสดงผลเป็น "จริง" และมีการบันทึกข้อความแจ้งให้ติดตั้ง PWA ไว้ก่อนหน้านี้ คุณจะแสดงปุ่มติดตั้ง PWA ได้
การโปรโมตการติดตั้ง PWA ผ่าน App Store
แอปสำหรับ App Store สร้างได้ด้วยเทคโนโลยีต่างๆ ซึ่งรวมถึงเทคนิค PWA ในส่วนการผสาน PWA เข้ากับสภาพแวดล้อมเนทีฟ คุณจะเห็นสรุปเทคโนโลยีที่ใช้เพื่อวัตถุประสงค์ดังกล่าวได้
ในส่วนนี้ เราจะจัดประเภทแอปใน Store เป็น 2 กลุ่มดังนี้
- แอปเฉพาะแพลตฟอร์ม: แอปเหล่านี้ส่วนใหญ่สร้างขึ้นด้วยโค้ดเฉพาะแพลตฟอร์ม โดยขนาดจะขึ้นอยู่กับแพลตฟอร์ม แต่โดยปกติแล้วจะมีขนาดใหญ่กว่า 10MB ใน Android และ 30MB ใน iOS คุณอาจต้องการโปรโมตแอปเฉพาะแพลตฟอร์มหากไม่มี PWA หรือหากแอปเฉพาะแพลตฟอร์มนำเสนอชุดฟีเจอร์ที่สมบูรณ์กว่า
- แอปน้ำหนักเบา: แอปเหล่านี้สามารถสร้างด้วยโค้ดเฉพาะแพลตฟอร์มได้เช่นกัน แต่โดยทั่วไปแล้วแอปเหล่านี้จะสร้างขึ้นด้วยเทคโนโลยีเว็บและแพ็กเกจไว้ใน Wrapper สำหรับแพลตฟอร์มที่เฉพาะเจาะจง คุณอัปโหลด PWA แบบสมบูรณ์ไปยังร้านค้าได้ด้วย (เราจะพูดถึงเรื่องนี้ในภายหลังในบทความนี้) บางบริษัทเลือกที่จะให้บริการแอปเหล่านี้เป็นเวอร์ชัน "Lite" และบางบริษัทก็ใช้แนวทางนี้กับแอปหลักด้วย
การโปรโมตแอปที่มีน้ำหนักเบา
การศึกษาของ Google Play พบว่าทุกๆ 6 MB ที่ขนาด APK เพิ่มขึ้น อัตรา Conversion การติดตั้งจะลดลง 1% ซึ่งหมายความว่าอัตราการดาวน์โหลดที่เสร็จสมบูรณ์ของแอปขนาด 10 MB อาจสูงกว่าแอปขนาด 100 MB ประมาณ 30%
ในการแก้ปัญหานี้ บริษัทบางแห่งใช้ประโยชน์จาก PWA เพื่อให้บริการแอปเวอร์ชันน้ำหนักเบาใน Play Store โดยใช้ Trusted Web Activities (TWA) TWA จะรวม PWA ไว้ในคอมโพเนนต์ที่คล้ายกับเว็บวิว และขนาดแอปที่ได้มักจะมีเพียงไม่กี่เมกะไบต์
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" ก็เพียงพอที่จะโน้มน้าวให้ผู้ใช้ติดตั้งแอป ปัจจุบันมีตัวเลือกเพิ่มเติมในการอนุญาตให้ผู้ใช้ติดตั้งแอป ซึ่งรวมถึงการมอบประสบการณ์การใช้งานแอปที่เบาสบายใน Store และการอนุญาตให้ผู้ใช้เพิ่ม PWA ลงในหน้าจอหลักโดยแจ้งให้ผู้ใช้ดำเนินการจากเว็บไซต์โดยตรง