วิธีกำหนดกลยุทธ์การติดตั้ง

Demián Renzulli
Pete LePage

ที่ผ่านมาการติดตั้งแอปจะทำได้ในบริบทของแอปพลิเคชันเฉพาะแพลตฟอร์มเท่านั้น ปัจจุบันเว็บแอปสมัยใหม่มอบประสบการณ์แบบติดตั้งได้ ซึ่งมอบการผสานรวมและความเสถียรในระดับเดียวกับแอปเฉพาะแพลตฟอร์ม

ซึ่งทำได้หลายวิธี ดังนี้

การมีช่องทางการเผยแพร่ที่แตกต่างกันเป็นวิธีที่มีประสิทธิภาพในการเข้าถึงผู้ใช้จำนวนมาก แต่การเลือกกลยุทธ์ที่เหมาะสมในการโปรโมตการติดตั้ง PWA อาจเป็นเรื่องท้าทาย

คู่มือนี้จะศึกษาแนวทางปฏิบัติที่ดีที่สุดในการรวมตัวเลือกการติดตั้งต่างๆ เพื่อเพิ่มอัตราการติดตั้ง รวมทั้งหลีกเลี่ยงการแข่งขันระหว่างแพลตฟอร์มและการแย่งลูกค้ากันเอง บริการติดตั้งที่ครอบคลุมประกอบด้วย PWA ที่ติดตั้งทั้งจากเบราว์เซอร์และ App Store ตลอดจนแอปเฉพาะแพลตฟอร์ม

ทำไมต้องทำให้เว็บแอปติดตั้งได้

Progressive Web App ที่ติดตั้งจะทำงานในหน้าต่างแบบสแตนด์อโลนแทนการใช้แท็บเบราว์เซอร์ โดยสามารถเปิดได้จากหน้าจอหลัก แท่นชาร์จ แถบงาน หรือชั้นวางของผู้ใช้ โดยอาจค้นหาในอุปกรณ์และสลับไปมาด้วยตัวสลับแอป ทำให้เด็กๆ รู้สึกเหมือนเป็นส่วนหนึ่งของอุปกรณ์ที่ติดตั้งแอปอยู่

แต่การมีทั้งเว็บแอปที่ติดตั้งได้และแอปเฉพาะแพลตฟอร์มอาจทำให้ผู้ใช้สับสนได้ สำหรับแอปเฉพาะแพลตฟอร์มของผู้ใช้บางรายอาจเป็นตัวเลือกที่ดีที่สุด แต่สำหรับแอปอื่นๆ อาจมีข้อเสียบางประการดังนี้

  • ข้อจำกัดเกี่ยวกับพื้นที่เก็บข้อมูล: การติดตั้งแอปใหม่อาจหมายถึงการลบแอปอื่น หรือล้างพื้นที่เก็บข้อมูลโดยการนำเนื้อหาที่มีคุณค่าออก ซึ่งจะส่งผลเสียต่อผู้ใช้ที่ใช้อุปกรณ์ระดับล่างโดยเฉพาะ
  • แบนด์วิดท์ที่ใช้งานได้: การดาวน์โหลดแอปอาจเป็นกระบวนการที่มีค่าใช้จ่ายสูงและช้ามาก โดยเฉพาะอย่างยิ่งสำหรับผู้ใช้ที่ใช้การเชื่อมต่อช้าและแพ็กเกจอินเทอร์เน็ตที่มีราคาแพง
  • ความยุ่งยาก: การออกจากเว็บไซต์และย้ายไปยังร้านค้าเพื่อดาวน์โหลดแอปจะสร้างอุปสรรคเพิ่มเติมและทำให้การดำเนินการของผู้ใช้ล่าช้าซึ่งสามารถทำได้ในเว็บโดยตรง
  • รอบการอัปเดต: การเปลี่ยนแปลงในแอปเฉพาะแพลตฟอร์มอาจต้องผ่านกระบวนการตรวจสอบแอป ซึ่งอาจทำให้การเปลี่ยนแปลงและการทดสอบช้าลง (เช่น การทดสอบ A/B)

ในบางกรณี เปอร์เซ็นต์ของผู้ใช้ที่ไม่ดาวน์โหลดแอปเฉพาะแพลตฟอร์มอาจมีขนาดใหญ่ เช่น ผู้ใช้ที่คิดว่าจะไม่ค่อยได้ใช้แอป หรือไม่สามารถใช้พื้นที่เก็บข้อมูลหรือข้อมูลหลายเมกะไบต์ คุณกำหนดขนาดของกลุ่มนี้ได้หลายวิธี เช่น ใช้การตั้งค่าข้อมูลวิเคราะห์เพื่อติดตามเปอร์เซ็นต์ของผู้ใช้ "เว็บบนอุปกรณ์เคลื่อนที่เท่านั้น"

หากกลุ่มนี้มีขนาดใหญ่มาก นั่นเป็นตัวบ่งชี้ที่ดีว่าคุณต้องการเสนอทางเลือกในการติดตั้งประสบการณ์การใช้งาน

การโปรโมตการติดตั้ง PWA ผ่านเบราว์เซอร์

หากคุณมี PWA คุณภาพสูง ก็ควรโปรโมตการติดตั้งในแอปเฉพาะแพลตฟอร์ม เช่น หากแอปเฉพาะแพลตฟอร์มไม่มีฟังก์ชันการทำงานที่ PWA เสนอให้หรือหากแอปไม่ได้อัปเดตมาระยะหนึ่งแล้ว นอกจากนี้ ควรโปรโมตการติดตั้ง PWA หากแอปเฉพาะแพลตฟอร์มไม่ได้รับการเพิ่มประสิทธิภาพสำหรับหน้าจอขนาดใหญ่ เช่น ใน ChromeOS

สำหรับบางแอป การกระตุ้นการติดตั้งแอปเฉพาะแพลตฟอร์มเป็นส่วนสำคัญของโมเดลธุรกิจ ในกรณีดังกล่าว การโปรโมตการติดตั้งแอปเฉพาะแพลตฟอร์มอาจเป็นเรื่องที่เหมาะสม แต่ผู้ใช้บางรายอาจรู้สึกสะดวกใจที่จะอยู่ในเว็บมากกว่า หากระบุกลุ่มดังกล่าวได้ ข้อความแจ้งของ PWA จะแสดงให้ผู้ชมเห็นเท่านั้น (สิ่งที่เราเรียกว่า "PWA สำรอง")

PWA เป็นประสบการณ์การติดตั้งหลัก

เมื่อ PWA เป็นไปตามเกณฑ์ความสามารถในการติดตั้ง เบราว์เซอร์ส่วนใหญ่จะแสดงสัญญาณว่า PWA ติดตั้งได้ เช่น Chrome ในเดสก์ท็อปแสดงไอคอนติดตั้งได้ในแถบที่อยู่ ส่วนในอุปกรณ์เคลื่อนที่ จะแสดงแถบข้อมูลขนาดเล็ก ดังนี้

ข้อความแจ้งให้ติดตั้ง Chrome แบบมาตรฐานซึ่งเรียกว่าแถบข้อมูลขนาดเล็ก
แถบข้อมูลขนาดเล็ก

แม้ว่าจะเพียงพอสําหรับประสบการณ์การใช้งานบางอย่าง แต่หากเป้าหมายของคุณคือเพิ่มการติดตั้ง PWA เราขอแนะนําให้คุณฟัง BeforeInstallPromptEvent และทําตามรูปแบบในการโปรโมตการติดตั้ง PWA

ป้องกันไม่ให้ PWA แย่งรายได้ไปจากอัตราการติดตั้งแอปเฉพาะแพลตฟอร์ม

ในบางกรณี คุณอาจเลือกโปรโมตการติดตั้งแอปเฉพาะแพลตฟอร์มผ่าน PWA แต่ในกรณีนี้ เรายังคงแนะนำให้คุณมีกลไกที่อนุญาตให้ผู้ใช้ติดตั้ง PWA ตัวเลือกสำรองนี้ช่วยให้ผู้ใช้ที่ไม่สามารถทำได้หรือไม่ต้องการติดตั้งแอปเฉพาะแพลตฟอร์มของคุณได้รับประสบการณ์การติดตั้งที่คล้ายกัน

ขั้นตอนแรกในการใช้กลยุทธ์นี้คือการกำหนดการเรียนรู้ว่าคุณจะแสดงโปรโมชันการติดตั้งแก่ผู้ใช้สำหรับ PWA เมื่อใด

ตัวอย่างเช่น ผู้ใช้ PWA คือผู้ใช้ที่เห็นข้อความแจ้งให้ติดตั้งแอปเฉพาะแพลตฟอร์ม และไม่ได้ติดตั้งแอปเฉพาะแพลตฟอร์ม พวกเขากลับมาที่เว็บไซต์อย่างน้อย 5 ครั้ง หรือคลิกแบนเนอร์แอป แต่ใช้เว็บไซต์ต่อไปแทน

จากนั้นจึงนำการเรียนรู้มาใช้ในลักษณะต่อไปนี้

  1. แสดงแบนเนอร์เพื่อการติดตั้งแอปเฉพาะแพลตฟอร์ม
  2. หากผู้ใช้ปิดแบนเนอร์ ให้ตั้งค่าคุกกี้ด้วยข้อมูลดังกล่าว (เช่น document.cookie = "app-install-banner=dismissed")
  3. ใช้คุกกี้อื่นเพื่อติดตามจำนวนการเข้าชมเว็บไซต์ของผู้ใช้ (เช่น document.cookie = "user-visits=1")
  4. เขียนฟังก์ชัน เช่น isPWAUser() ที่ใช้ข้อมูลที่จัดเก็บไว้ในคุกกี้ก่อนหน้านี้ร่วมกับ API ของ getInstalledRelatedApps() เพื่อพิจารณาว่าผู้ใช้ถือเป็น "ผู้ใช้ PWA" หรือไม่
  5. เมื่อผู้ใช้ดำเนินการที่มีความหมาย ให้เรียกใช้ 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 การใช้งานจริง

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 ลงในหน้าจอหลักโดยแจ้งให้ผู้ใช้ดำเนินการจากเว็บไซต์โดยตรง