ในอดีต การติดตั้งแอปสามารถทำได้เฉพาะในบริบทของแอปพลิเคชันเฉพาะแพลตฟอร์มเท่านั้น ปัจจุบันเว็บแอปสมัยใหม่มอบประสบการณ์การใช้งานที่ติดตั้งได้ซึ่งให้การผสานรวมและความน่าเชื่อถือในระดับเดียวกับแอปเฉพาะแพลตฟอร์ม
ซึ่งทำได้หลายวิธี ดังนี้
- การติดตั้ง PWA จากเบราว์เซอร์
- การติดตั้ง PWA จาก App Store
การมีช่องทางการเผยแพร่ที่แตกต่างกันเป็นวิธีที่มีประสิทธิภาพในการเข้าถึงผู้ใช้จำนวนมาก แต่การเลือกกลยุทธ์ที่เหมาะสมเพื่อโปรโมตการติดตั้ง PWA อาจเป็นเรื่องท้าทาย
คู่มือนี้จะอธิบายแนวทางปฏิบัติแนะนำในการรวมตัวเลือกการติดตั้งต่างๆ เพื่อเพิ่มอัตราการติดตั้ง และหลีกเลี่ยงการแข่งขันและการใช้แพลตฟอร์มร่วมกัน ข้อเสนอการติดตั้งที่ครอบคลุมรวมถึง PWA ที่ติดตั้งทั้งจากเบราว์เซอร์และ App Store ตลอดจนแอปเฉพาะแพลตฟอร์ม
เหตุผลที่ควรทำให้เว็บแอปติดตั้งได้
Progressive Web App ที่ติดตั้งจะทำงานในหน้าต่างแบบสแตนด์อโลนแทนแท็บเบราว์เซอร์ โดยสามารถเปิดได้จากหน้าจอหลัก แท่นชาร์จ แถบงาน หรือชั้นวางของผู้ใช้ คุณสามารถค้นหาแอปเหล่านั้นในอุปกรณ์และสลับไปมาได้ด้วยตัวสลับแอป ทำให้ผู้ใช้รู้สึกว่าเป็นส่วนหนึ่งของอุปกรณ์ที่ติดตั้งอยู่
แต่การมีทั้งเว็บแอปที่ติดตั้งได้และแอปเฉพาะแพลตฟอร์มอาจทำให้ผู้ใช้สับสนได้ สําหรับผู้ใช้บางราย แอปเฉพาะแพลตฟอร์มอาจเป็นตัวเลือกที่ดีที่สุด แต่สําหรับผู้ใช้บางราย แอปดังกล่าวอาจมีข้อเสียอยู่บ้าง ดังนี้
- ข้อจำกัดด้านพื้นที่เก็บข้อมูล: การติดตั้งแอปใหม่อาจหมายถึงการลบแอปอื่นๆ หรือการล้างพื้นที่เก็บข้อมูลด้วยการนำเนื้อหาที่มีคุณค่าออก ซึ่งจะเสียเปรียบโดยเฉพาะอย่างยิ่งสำหรับผู้ใช้อุปกรณ์ระดับโลว์เอนด์
- แบนด์วิดท์ที่ใช้ได้: การดาวน์โหลดแอปอาจเป็นกระบวนการที่มีราคาสูงและช้า ซึ่งจะมีผลมากกว่าสำหรับผู้ใช้ที่มีการเชื่อมต่อช้าและแพ็กเกจอินเทอร์เน็ตราคาแพง
- ความยุ่งยาก: การออกจากเว็บไซต์แล้วย้ายไปที่ร้านค้าเพื่อดาวน์โหลดแอปจะสร้างอุปสรรคและทำให้ผู้ใช้ดำเนินการในเว็บได้โดยตรงล่าช้า
- รอบการอัปเดต: การเปลี่ยนแปลงในแอปเฉพาะแพลตฟอร์มอาจต้องดำเนินการผ่านกระบวนการตรวจสอบแอป ซึ่งอาจทำให้การเปลี่ยนแปลงและการทดสอบช้าลง (เช่น การทดสอบ 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 กลุ่มดังนี้
- แอปเฉพาะแพลตฟอร์ม: แอปเหล่านี้ส่วนใหญ่สร้างขึ้นด้วยโค้ดเฉพาะแพลตฟอร์ม ขนาดของโฆษณาจะขึ้นอยู่กับแพลตฟอร์ม แต่โดยปกติแล้วจะมีขนาดใหญ่กว่า 10 MB ใน Android และ 30 MB ใน 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 ไว้ใน WebView เช่น คอมโพเนนต์ และขนาดของแอปที่ได้มักจะมีขนาดเพียงไม่กี่เมกะไบต์
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 ลงในหน้าจอหลักโดยแจ้งให้ผู้ใช้ดำเนินการจากเว็บไซต์โดยตรง