Trước đây, bạn chỉ có thể cài đặt ứng dụng trong các ứng dụng dành riêng cho nền tảng. Ngày nay, các ứng dụng web hiện đại mang đến trải nghiệm dễ cài đặt, mang đến mức độ tích hợp và độ tin cậy giống như các ứng dụng dành riêng cho nền tảng.
Bạn có thể thực hiện điều này theo nhiều cách:
- Cài đặt PWA trong trình duyệt.
- Cài đặt PWA trong cửa hàng ứng dụng.
Việc sử dụng nhiều kênh phân phối là một cách hiệu quả để tiếp cận nhiều người dùng. Tuy nhiên, bạn có thể gặp khó khăn trong việc chọn chiến lược phù hợp để quảng bá việc cài đặt PWA của mình.
Hướng dẫn này khám phá các phương pháp hay nhất để kết hợp các tuỳ chọn cài đặt khác nhau nhằm tăng tỷ lệ cài đặt và tránh sự cạnh tranh cũng như tình trạng tự tước đoạt doanh thu của nền tảng. Các dịch vụ cài đặt bao gồm PWA được cài đặt từ cả trình duyệt và App Store, cũng như các ứng dụng dành riêng cho nền tảng.
Tại sao bạn nên cài đặt ứng dụng web của mình?
Các ứng dụng web tiến bộ đã cài đặt sẽ chạy trong một cửa sổ độc lập thay vì trong một thẻ trình duyệt. Người dùng có thể khởi chạy các ứng dụng này từ màn hình chính, thanh dock, thanh tác vụ hoặc kệ của người dùng. Bạn có thể tìm kiếm ứng dụng trên một thiết bị và chuyển đổi giữa các ứng dụng đó bằng trình chuyển đổi ứng dụng, giúp trẻ cảm thấy giống như một phần của thiết bị đã cài đặt ứng dụng.
Tuy nhiên, việc có cả ứng dụng web có thể cài đặt và ứng dụng dành riêng cho nền tảng có thể gây nhầm lẫn cho người dùng. Các ứng dụng dành riêng cho nền tảng của một số người dùng có thể là lựa chọn tốt nhất, nhưng đối với những người dùng khác, chúng có thể có một số hạn chế:
- Những hạn chế về bộ nhớ: việc cài đặt ứng dụng mới có thể bao gồm việc xoá những ứng dụng khác hoặc dọn dẹp bộ nhớ bằng cách xoá nội dung có giá trị. Điều này đặc biệt bất lợi đối với người dùng trên các thiết bị cấp thấp.
- Băng thông có sẵn: tải xuống ứng dụng có thể là một quá trình tốn kém và chậm, thậm chí còn nhiều hơn nữa đối với người dùng kết nối chậm và gói dữ liệu đắt đỏ.
- Hành vi lừa đảo: việc rời khỏi một trang web rồi chuyển đến một cửa hàng để tải ứng dụng xuống sẽ tạo ra thêm phiền hà và trì hoãn một hành động mà người dùng có thể thực hiện trực tiếp trên web.
- Chu kỳ cập nhật: Việc thực hiện thay đổi trong ứng dụng dành riêng cho nền tảng có thể yêu cầu bạn phải trải qua một quy trình xem xét ứng dụng. Quy trình này có thể làm chậm các thay đổi và thử nghiệm (ví dụ: thử nghiệm A/B).
Trong một số trường hợp, tỷ lệ người dùng không tải ứng dụng dành riêng cho nền tảng của bạn có thể lớn, ví dụ: những người cho rằng mình sẽ không sử dụng ứng dụng thường xuyên hoặc không thể chứng minh được việc chi tiêu vài megabyte bộ nhớ hoặc dữ liệu. Bạn có thể xác định quy mô của phân khúc này theo nhiều cách, chẳng hạn như bằng cách sử dụng chế độ thiết lập số liệu phân tích để theo dõi tỷ lệ phần trăm "chỉ web dành cho thiết bị di động" người dùng.
Nếu quy mô của phân khúc này lớn, thì đó là một dấu hiệu tốt cho thấy bạn cần cung cấp các cách khác để cài đặt trải nghiệm của mình.
Quảng bá việc cài đặt PWA thông qua trình duyệt
Nếu có một PWA chất lượng cao, bạn nên quảng bá việc cài đặt ứng dụng đó qua ứng dụng dành riêng cho nền tảng của mình. Ví dụ: nếu ứng dụng dành riêng cho nền tảng thiếu chức năng mà PWA của bạn cung cấp hoặc nếu đã lâu ứng dụng chưa được cập nhật. Bạn cũng nên quảng bá việc cài đặt PWA nếu ứng dụng dành riêng cho nền tảng chưa được tối ưu hoá cho màn hình lớn hơn, chẳng hạn như trên ChromeOS.
Đối với một số ứng dụng, việc thúc đẩy lượt cài đặt ứng dụng dành riêng cho nền tảng là một phần quan trọng của mô hình kinh doanh. Trong trường hợp đó, việc thúc đẩy lượt cài đặt ứng dụng dành riêng cho nền tảng là hợp lý. Tuy nhiên, một số người dùng có thể thấy thoải mái hơn khi ở lại web. Nếu xác định được phân khúc đó, thì chỉ họ mới có thể xem lời nhắc PWA (cách chúng tôi gọi "PWA là ứng dụng dự phòng").
PWA làm trải nghiệm có thể cài đặt chính
Sau khi PWA đáp ứng tiêu chí về khả năng cài đặt, hầu hết các trình duyệt đều cho biết rằng PWA có thể cài đặt. Ví dụ: Chrome dành cho máy tính hiển thị biểu tượng có thể cài đặt trên thanh địa chỉ và trên thiết bị di động, Chrome sẽ hiển thị thanh thông tin thu nhỏ:
Mặc dù việc đó có thể là đủ cho một số trải nghiệm, nhưng nếu mục tiêu của bạn là tăng số lượt cài đặt PWA, bạn nên nghe BeforeInstallPromptEvent và làm theo các mẫu để quảng bá việc cài đặt PWA của bạn.
Ngăn PWA ảnh hưởng đến tỷ lệ cài đặt ứng dụng của riêng bạn trên từng nền tảng
Trong một số trường hợp, bạn có thể chọn quảng bá việc cài đặt ứng dụng dành riêng cho nền tảng qua PWA. Tuy nhiên, trong trường hợp này, bạn vẫn nên cung cấp cơ chế cho phép người dùng cài đặt PWA của bạn. Lựa chọn dự phòng này giúp những người dùng không thể hoặc không muốn cài đặt ứng dụng dành riêng cho nền tảng của bạn có thể nhận được trải nghiệm đã cài đặt tương tự.
Bước đầu tiên để triển khai chiến lược này là xác định phương pháp phỏng đoán cho thời điểm bạn sẽ hiển thị cho người dùng quảng cáo cài đặt cho PWA của bạn.
Ví dụ: Người dùng PWA là người dùng đã nhìn thấy lời nhắc cài đặt ứng dụng dành riêng cho nền tảng nhưng chưa cài đặt ứng dụng dành riêng cho nền tảng đó. Họ đã quay lại trang web ít nhất 5 lần hoặc đã nhấp vào biểu ngữ ứng dụng nhưng vẫn tiếp tục sử dụng trang web.
Sau đó, bạn có thể triển khai phương pháp phỏng đoán theo cách sau:
- Hiển thị biểu ngữ cài đặt ứng dụng theo nền tảng cụ thể.
- Nếu người dùng đóng biểu ngữ, hãy đặt một cookie cùng với thông tin đó (ví dụ:
document.cookie = "app-install-banner=dismissed"). - Sử dụng một cookie khác để theo dõi số lượt truy cập của người dùng vào trang web (ví dụ:
document.cookie = "user-visits=1"). - Viết một hàm (chẳng hạn như
isPWAUser()) sử dụng thông tin đã lưu trữ trước đó trong cookie cùng với APIgetInstalledRelatedApps()để xác định xem một người dùng có được coi là "người dùng PWA hay không". - Khi người dùng thực hiện một hành động có ý nghĩa, hãy gọi
isPWAUser(). Nếu hàm trả về true và lời nhắc cài đặt PWA đã được lưu trước đó, thì bạn có thể hiện nút cài đặt PWA.
Quảng bá việc cài đặt PWA thông qua cửa hàng ứng dụng
Bạn có thể xây dựng ứng dụng cho Cửa hàng ứng dụng bằng nhiều công nghệ, trong đó có kỹ thuật PWA. Trong bài viết Kết hợp PWA vào môi trường gốc, bạn có thể xem thông tin tóm tắt về các công nghệ có thể dùng để đạt được mục tiêu đó.
Trong phần này, chúng ta sẽ phân loại các ứng dụng trong cửa hàng theo hai nhóm:
- Ứng dụng dành riêng cho nền tảng: các ứng dụng này chủ yếu được xây dựng bằng mã dành riêng cho nền tảng. Kích thước của các tệp này phụ thuộc vào nền tảng, nhưng thường lớn hơn 10 MB trên Android và 30 MB trên iOS. Bạn nên quảng bá ứng dụng dành riêng cho nền tảng nếu không có PWA hoặc nếu ứng dụng dành riêng cho nền tảng giới thiệu một bộ tính năng hoàn chỉnh hơn.
- Ứng dụng nhẹ: bạn cũng có thể tạo các ứng dụng này bằng mã dành riêng cho nền tảng, nhưng thường được xây dựng bằng công nghệ web, được đóng gói trong một trình bao bọc dành riêng cho nền tảng. Bạn cũng có thể tải PWA đầy đủ lên cửa hàng. (Vấn đề này sẽ được thảo luận sau trong bài viết này.) Một số công ty chọn cung cấp những số liệu này dưới dạng "rút gọn" và những người khác cũng đã sử dụng phương pháp này cho các ứng dụng chủ chốt (chính).
Quảng bá ứng dụng nhẹ
Theo một nghiên cứu của Google Play, cứ tăng kích thước tệp APK thêm 6 MB thì tỷ lệ chuyển đổi lượt cài đặt sẽ giảm đi 1%. Điều này có nghĩa là tỷ lệ hoàn thành tải xuống của ứng dụng có kích thước 10 MB có thể cao hơn khoảng 30% so với ứng dụng có kích thước 100 MB!
Để giải quyết vấn đề này, một số công ty đang tận dụng PWA để cung cấp phiên bản nhẹ hơn của ứng dụng trong Cửa hàng Play thông qua Hoạt động đáng tin cậy trên web (TWA). TWA bao bọc PWA của bạn trong một thành phần tương tự như webview và kích thước ứng dụng thu được thường chỉ vài megabyte.
Oyo, một trong những công ty khách sạn lớn nhất Ấn Độ, đã xây dựng phiên bản ứng dụng Lite và đưa ứng dụng này lên Cửa hàng Play bằng TWA. Tại thời điểm bài viết này được viết, ứng dụng Oyo chỉ có 850 KB, chỉ bằng 7% kích thước ứng dụng Android của họ. Sau khi cài đặt, người dùng không thể phân biệt được ứng dụng này với ứng dụng Android của họ:
Oyo giữ cả phiên bản hàng đầu và "lite" các phiên bản ứng dụng khác trong cửa hàng, cung cấp lựa chọn cho người dùng.
Cung cấp trải nghiệm web gọn nhẹ
Theo trực giác, người dùng sử dụng các thiết bị cấp thấp có nhiều khả năng tải các phiên bản ứng dụng nhẹ hơn so với người dùng điện thoại cao cấp. Do đó, nếu có thể xác định thiết bị của người dùng, bạn có thể ưu tiên biểu ngữ cài đặt ứng dụng gọn nhẹ hơn phiên bản ứng dụng nặng hơn dành riêng cho nền tảng.
Trên web, bạn có thể thu thập tín hiệu thiết bị và liên kết gần đúng các tín hiệu đó với các danh mục thiết bị (ví dụ: "cao", "trung bình" hoặc "thấp"). Bạn có thể lấy thông tin này theo nhiều cách, sử dụng API JavaScript hoặc gợi ý ứng dụng.
Sử dụng JavaScript
Khi sử dụng các thuộc tính JavaScript như navigator.hardwareConcurrency, navigator.deviceMemory và navigator.connection, bạn có thể nhận được thông tin tương ứng về trạng thái CPU, bộ nhớ và mạng của thiết bị. Ví dụ:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
Sử dụng gợi ý từ ứng dụng
Bạn cũng có thể suy ra tín hiệu thiết bị trong tiêu đề của yêu cầu HTTP, thông qua gợi ý ứng dụng. Dưới đây là cách bạn có thể triển khai mã trước đó cho bộ nhớ thiết bị bằng gợi ý ứng dụng:
Trước tiên, hãy cho trình duyệt biết rằng bạn muốn nhận gợi ý bộ nhớ thiết bị trong tiêu đề của phản hồi HTTP cho mọi yêu cầu của bên thứ nhất:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
Sau đó, bạn sẽ bắt đầu nhận thông tin Device-Memory trong tiêu đề của các yêu cầu HTTP:
GET /main.js HTTP/1.1
Device-Memory: 0.5
Bạn có thể sử dụng thông tin này trong phần phụ trợ của mình để lưu trữ cookie theo danh mục thiết bị của người dùng:
app.get('/route', (req, res) => {
// Determine device category
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Set cookie
res.setCookie('Device-Category', deviceCategory);
…
});
Cuối cùng, hãy tạo logic của riêng bạn để ánh xạ thông tin này đến các danh mục thiết bị và hiển thị lời nhắc cài đặt ứng dụng tương ứng trên từng trường hợp:
if (isDeviceMidOrLowEnd()) {
// show "Lite app" install banner or PWA A2HS prompt
} else {
// show "Core app" install banner
}
Kết luận
Khả năng hiển thị biểu tượng trên màn hình chính của người dùng là một trong những tính năng hấp dẫn nhất của các ứng dụng. Do trước đây, điều này chỉ có thể xảy ra với các ứng dụng được cài đặt từ cửa hàng ứng dụng, nên các công ty có thể cho rằng hiển thị biểu ngữ cài đặt trên cửa hàng ứng dụng là đủ để thuyết phục người dùng cài đặt trải nghiệm của họ. Hiện tại, có nhiều lựa chọn hơn để cho phép người dùng cài đặt ứng dụng, trong đó có việc cung cấp trải nghiệm ứng dụng gọn nhẹ trong cửa hàng, và cho phép người dùng thêm PWA vào màn hình chính bằng cách nhắc họ cài đặt ngay trên trang web.