ขอขอบคุณที่ติดตาม Google I/O ดูเนื้อหาตามคำขอ

หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Demián Renzulli

Pete LePage

เผยแพร่: 12 พฤษภาคม 2020

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

คุณทำได้หลายวิธี ดังนี้

การติดตั้ง PWA จากเบราว์เซอร์
การติดตั้ง PWA จาก App Store

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

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

เหตุผลที่ควรทำให้เว็บแอปติดตั้งได้

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

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

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

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

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

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

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

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

PWA เป็นประสบการณ์การใช้งานหลักที่ติดตั้งได้

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

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

แม้ว่าการดำเนินการดังกล่าวอาจเพียงพอสำหรับประสบการณ์การใช้งานบางอย่าง แต่หากเป้าหมายของคุณคือการกระตุ้นการติดตั้ง 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 แบบเต็ม ไปยัง Store ได้ด้วย บางบริษัทเลือกที่จะให้บริการเหล่านี้เป็นประสบการณ์ "Lite" และบางบริษัทก็ใช้วิธีนี้กับแอปเรือธง (หลัก) ด้วยเช่นกัน

โปรโมตแอปที่มีน้ำหนักเบา

การศึกษาของ Google Play ระบุว่า ทุกๆ 6 MB ที่เพิ่มขึ้นในขนาดของ APK อัตรา Conversion การติดตั้งจะลดลง 1% ซึ่งหมายความว่าอัตราการดาวน์โหลดแอปขนาด 10 MB จนเสร็จอาจสูงกว่าแอปขนาด 100 MB ประมาณ 30%

เพื่อแก้ไขปัญหานี้ บางบริษัทจึงใช้ประโยชน์จาก PWA เพื่อให้บริการแอปเวอร์ชันที่มีขนาดเล็กใน Play Store โดยใช้กิจกรรมบนเว็บที่เชื่อถือได้ (TWA) TWA จะห่อหุ้ม PWA ของคุณในคอมโพเนนต์ WebView และโดยปกติแล้วขนาดแอปที่ได้จะมีขนาดเพียงไม่กี่เมกะไบต์

Oyo ซึ่งเป็นหนึ่งในบริษัทด้านการบริการที่ใหญ่ที่สุดในอินเดียได้สร้างแอปเวอร์ชัน Lite และเผยแพร่ใน Play Store โดยใช้ TWA ณ เดือนพฤษภาคม 2020 แอป Oyo มีขนาดเพียง 850 KB ซึ่งคิดเป็น 7% ของขนาดแอป Android และเมื่อติดตั้งแล้ว แอปนี้จะดูเหมือนแอป Android ทุกประการ

OYO Lite ในการใช้งาน

Oyo ยังคงมีทั้งแอปเวอร์ชันหลักและเวอร์ชัน "Lite" ในร้านค้าเพื่อให้ผู้ใช้มีตัวเลือก

มอบประสบการณ์การใช้งานเว็บที่รวดเร็ว

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

บนเว็บ คุณสามารถรับสัญญาณอุปกรณ์และแมปสัญญาณเหล่านั้นโดยประมาณกับ หมวดหมู่อุปกรณ์ (เช่น "สูง" "ปานกลาง" หรือ "ต่ำ") คุณดูข้อมูลนี้ได้หลายวิธี ไม่ว่าจะใช้ 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 ลงใน หน้าจอหลักโดยการแจ้งให้ผู้ใช้ดำเนินการจากเว็บไซต์โดยตรง