ในอดีต การติดตั้งแอปสามารถทำได้เฉพาะในบริบทของแอปพลิเคชันเฉพาะแพลตฟอร์มเท่านั้น ทุกวันนี้เว็บแอปสมัยใหม่มอบประสบการณ์การใช้งานที่ติดตั้งได้ซึ่งผสานรวมและความน่าเชื่อถือในระดับเดียวกับแอปเฉพาะแพลตฟอร์ม
คุณสามารถบรรลุเป้าหมายนี้ได้หลายวิธี:
- การติดตั้ง PWA จากเบราว์เซอร์
- การติดตั้ง PWA จาก App Store
การมีช่องทางการเผยแพร่ที่แตกต่างกันเป็นวิธีที่มีประสิทธิภาพในการเข้าถึงผู้ใช้จำนวนมาก แต่การเลือกกลยุทธ์ที่เหมาะสมเพื่อโปรโมตการติดตั้ง PWA อาจเป็นเรื่องท้าทาย
คู่มือนี้จะอธิบายแนวทางปฏิบัติแนะนําในการรวมตัวเลือกการติดตั้งต่างๆ เพื่อเพิ่มอัตราการติดตั้ง รวมถึงหลีกเลี่ยงการแข่งขันบนแพลตฟอร์มและการแย่งลูกค้ากันเอง ข้อเสนอการติดตั้งที่ครอบคลุมรวมถึง PWA ที่ติดตั้งทั้งจากเบราว์เซอร์และ App Store ตลอดจนแอปเฉพาะแพลตฟอร์ม
ทำไมจึงต้องทำให้เว็บแอปของคุณติดตั้งได้
Progressive Web App ที่ติดตั้งไว้จะทำงานในหน้าต่างแบบสแตนด์อโลนแทนแท็บเบราว์เซอร์ โฆษณาเหล่านี้สามารถเปิดได้จากหน้าจอหลัก แถบแอป แถบงาน หรือแถบของผู้ใช้ คุณสามารถค้นหาแอปเหล่านั้นในอุปกรณ์และสลับไปมาได้ด้วยตัวสลับแอป ทำให้ผู้ใช้รู้สึกว่าเป็นส่วนหนึ่งของอุปกรณ์ที่ติดตั้งอยู่
แต่การมีทั้งเว็บแอปที่ติดตั้งได้และแอปเฉพาะแพลตฟอร์มอาจทำให้ผู้ใช้สับสนได้ แอปเฉพาะแพลตฟอร์มสำหรับผู้ใช้บางรายอาจเป็นทางเลือกที่ดีที่สุด แต่สำหรับบางแอปอาจมีข้อเสียดังนี้
- ข้อจำกัดด้านพื้นที่เก็บข้อมูล: การติดตั้งแอปใหม่อาจหมายถึงการลบแอปอื่นๆ หรือการล้างพื้นที่เก็บข้อมูลด้วยการนำเนื้อหาที่มีคุณค่าออก ซึ่งจะเสียเปรียบโดยเฉพาะอย่างยิ่งสำหรับผู้ใช้อุปกรณ์ระดับโลว์เอนด์
- แบนด์วิดท์ที่ใช้ได้: การดาวน์โหลดแอปอาจเป็นกระบวนการที่มีราคาสูงและช้า ซึ่งจะมีผลมากกว่าสำหรับผู้ใช้ที่มีการเชื่อมต่อช้าและแพ็กเกจอินเทอร์เน็ตราคาแพง
- ความยุ่งยาก: การออกจากเว็บไซต์แล้วย้ายไปที่ร้านค้าเพื่อดาวน์โหลดแอปจะสร้างอุปสรรคและทำให้ผู้ใช้ดำเนินการในเว็บได้โดยตรงล่าช้า
- รอบการอัปเดต: การเปลี่ยนแปลงในแอปเฉพาะแพลตฟอร์มอาจต้องดำเนินการผ่านกระบวนการตรวจสอบแอป ซึ่งอาจทำให้การเปลี่ยนแปลงและการทดสอบช้าลง (เช่น การทดสอบ A/B)
ในบางกรณี เปอร์เซ็นต์ของผู้ใช้ที่จะไม่ดาวน์โหลดแอปเฉพาะแพลตฟอร์มของคุณอาจมีขนาดใหญ่ เช่น ผู้ใช้ที่คิดว่าจะไม่ใช้แอปบ่อยนัก หรือไม่มีเหตุผลสมควรในการใช้พื้นที่เก็บข้อมูลหรือข้อมูลหลายเมกะไบต์ คุณระบุขนาดของกลุ่มนี้ได้หลายวิธี เช่น โดยการใช้การตั้งค่า Analytics เพื่อติดตามเปอร์เซ็นต์ของ "เว็บบนอุปกรณ์เคลื่อนที่เท่านั้น" ผู้ใช้
หากกลุ่มนี้มีปริมาณพอสมควร นั่นเป็นสัญญาณที่ดีว่าคุณต้องเสนอวิธีอื่นๆ ในการติดตั้งประสบการณ์
โปรโมตการติดตั้ง 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 พบว่าอัตรา Conversion การติดตั้งจะลดลง 1% เมื่อมีการเพิ่มขนาดของ APK ทุกๆ 6 MB ซึ่งหมายความว่าอัตราการดาวน์โหลดที่สำเร็จของแอป 10 MB อาจสูงกว่าแอปขนาด 100 MB 30% โดยประมาณ!
เพื่อแก้ไขปัญหานี้ บริษัทบางแห่งจึงใช้ประโยชน์จาก PWA เพื่อให้บริการแอปเวอร์ชันง่ายๆ ใน Play Store โดยใช้กิจกรรมบนเว็บที่เชื่อถือได้ (TWA) TWA จะรวม PWA ไว้ใน WebView เช่น คอมโพเนนต์ และขนาดของแอปที่ได้มักจะมีขนาดเพียงไม่กี่เมกะไบต์
Oyo หนึ่งในบริษัทโรงแรมที่ใหญ่ที่สุดของอินเดียได้สร้างแอปเวอร์ชัน Lite และเปิดให้ใช้งานใน Play Store โดยใช้ TWA ในตอนที่เขียนบทความนี้ แอป Oyo มีขนาดเพียง 850 KB ซึ่งเป็นขนาดของแอป Android เพียง 7% เท่านั้น และเมื่อติดตั้งแล้ว ก็ยังแยกแยะความแตกต่างจากแอป 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 ไปยังหน้าจอหลักโดยข้อความแจ้งให้ทำจากเว็บไซต์โดยตรง