Trước đây, bạn chỉ có thể cài đặt ứng dụng trong bối cảnh của 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 cung cấp trải nghiệm có thể cài đặt, mang lại mức độ tích hợp và độ tin cậy tương đương với các ứng dụng dành riêng cho nền tảng.
Bạn có thể thực hiện việc này theo nhiều cách:
- Cài đặt PWA từ trình duyệt.
- Cài đặt PWA từ cửa hàng ứng dụng.
Việc có 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, nhưng việc chọn chiến lược phù hợp để quảng bá lượt cài đặt PWA có thể là một thách thức.
Hướng dẫn này trình bày các phương pháp hay nhất để kết hợp nhiều lựa chọn cài đặt nhằm tăng tỷ lệ cài đặt, tránh tình trạng cạnh tranh và tự cạnh tranh trên nền tảng. Các dịch vụ cài đặt được đề cập bao gồm cả 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 tạo ứng dụng web có thể cài đặt?
Ứng dụng web tiến bộ đã cài đặt chạy trong một cửa sổ độc lập thay vì thẻ trình duyệt. Người dùng có thể 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 họ. Bạn có thể tìm kiếm các ứng dụng này 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 người dùng cảm thấy như các ứng dụng này là một phần của thiết bị mà họ cài đặt.
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. Đối với một số người dùng, ứng dụng dành riêng cho nền tả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, ứng dụng này có thể có một số hạn chế:
- Hạn chế về bộ nhớ: việc cài đặt một ứng dụng mới có thể đồng nghĩa với việc xoá các ứ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 cho người dùng trên các thiết bị cấp thấp.
- Băng thông có sẵn: việc tải ứng dụng xuống có thể tốn kém và chậm, đặc biệt là đối với những người dùng có kết nối chậm và gói dữ liệu đắt đỏ.
- Mức độ phiền hà: việc rời khỏi trang web và chuyển sang cửa hàng để tải ứng dụng xuống sẽ gây ra thêm sự phiền hà và trì hoãn 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 các ứng dụng dành riêng cho nền tảng có thể yêu cầu phải trải qua quy trình xem xét ứng dụng. Điều này có thể làm chậm quá trình thay đổi và thử nghiệm (ví dụ: thử nghiệm A/B).
Trong một số trường hợp, tỷ lệ phần trăm người dùng sẽ không tải ứng dụng dành riêng cho nền tảng của bạn có thể rất lớn, chẳng hạn như những người dùng cho rằng họ sẽ không sử dụng ứng dụng thường xuyên hoặc không thể biện minh cho việc sử dụng vài megabyte dung lượng lưu trữ hoặc dữ liệu. Bạn có thể xác định quy mô của phân khúc này theo một số cách, chẳng hạn như sử dụng chế độ thiết lập phân tích để theo dõi tỷ lệ phần trăm người dùng "chỉ sử dụng web dành cho thiết bị di động".
Nếu quy mô của phân khúc này đáng kể, thì đó là dấu hiệu cho thấy bạn cần cung cấp các cách cài đặt trải nghiệm thay thế.
Quảng bá việc cài đặt PWA thông qua trình duyệt
Nếu bạn có một PWA chất lượng cao, thì bạn nên quảng bá việc cài đặt PWA đó thay vì ứng dụng dành riêng cho nền tảng. Ví dụ: nếu ứng dụng dành riêng cho nền tảng thiếu chức năng mà PWA cung cấp hoặc nếu ứng dụng đó đã lâu không được cập nhật. Việc này cũng có thể hữu ích trong việc thúc đẩy việc cài đặt PWA nếu ứng dụng dành riêng cho nền tảng không đượ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 trong mô hình kinh doanh. Trong trường hợp đó, bạn nên quảng bá việc cài đặt ứng dụng dành riêng cho nền tảng của mình. Tuy nhiên, một số người dùng có thể cảm thấy thoải mái hơn khi ở trên web. Nếu có thể xác định được phân khúc đó, thì lời nhắc về PWA chỉ có thể hiển thị cho họ (chúng tôi gọi là "PWA làm dự phòng").
PWA là trải nghiệm cài đặt chính
Khi một PWA đáp ứng tiêu chí về khả năng cài đặt, hầu hết các trình duyệt sẽ cho biết rằng PWA đó có thể cài đặt. Ví dụ: Chrome trên máy tính hiển thị biểu tượng có thể cài đặt trong thanh địa chỉ, còn trên thiết bị di động, Chrome sẽ hiển thị một thanh thông tin thu nhỏ:
Mặc dù điều đó có thể là đủ đối với một số trải nghiệm, nhưng nếu mục tiêu của bạn là thúc đẩy lượt cài đặt PWA, bạn nên theo dõi BeforeInstallPromptEvent và làm theo các mẫu để quảng bá lượt cài đặt của PWA.
Ngăn PWA làm giảm tỷ lệ cài đặt ứng dụng dành riêng cho 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 thay vì PWA. Tuy nhiên, trong trường hợp này, bạn vẫn nên cung cấp một cơ chế cho phép người dùng cài đặt PWA. Tuỳ 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ể trải nghiệm một ứng dụng tương tự đã cài đặt.
Bước đầu tiên để triển khai chiến lược này là xác định một phương pháp phỏng đoán cho thời điểm bạn sẽ hiển thị cho người dùng một quảng cáo cài đặt cho PWA của mình.
Ví dụ: Người dùng PWA là người dùng đã thấy lời nhắc cài đặt ứng dụng dành riêng cho nền tảng nhưng không 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 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 dành riêng cho nền tảng.
- Nếu người dùng đóng biểu ngữ, hãy đặt cookie có 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 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 đó, bạn có thể hiển thị 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ể tạo ứng dụng cho Cửa hàng ứng dụng bằng nhiều công nghệ, bao gồm cả kỹ thuật PWA. Trong phần Hòa trộn PWA vào môi trường gốc, bạn có thể tìm thấy bản tóm tắt về các công nghệ có thể dùng cho mục đích đó.
Trong phần này, chúng ta sẽ phân loại các ứng dụng trong cửa hàng thành 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 tạo bằng mã dành riêng cho nền tảng. Kích thước của 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 có bộ tính năng hoàn chỉnh hơn.
- Ứng dụng gọn 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 thì các ứng dụng này được tạo 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 các PWA đầy đủ lên các cửa hàng. (Chúng ta sẽ thảo luận về vấn đề này sau trong bài viết này.) Một số công ty chọn cung cấp các phiên bản này dưới dạng trải nghiệm "rút gọn", còn một số công ty khác cũng sử dụng phương pháp này cho các ứng dụng hàng đầu (cốt lõi) của họ.
Quảng bá ứng dụng gọn nhẹ
Theo một nghiên cứu của Google Play, cứ mỗi 6 MB tăng lên trong kích thước tệp APK, tỷ lệ chuyển đổi cài đặt sẽ giảm 1%. Điều này có nghĩa là tỷ lệ hoàn tất tải xuống của một ứng dụng có kích thước 10 MB có thể cao hơn khoảng 30% so với một ứ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 ứng dụng gọn nhẹ trong Cửa hàng Play bằng cách sử dụng Hoạt động web đáng tin cậy (TWA). TWA gói PWA của bạn trong một thành phần giống 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 Lite của ứng dụng và cung cấp ứng dụng đó trong Cửa hàng Play bằng TWA. Tại thời điểm viết bài này, ứng dụng Oyo chỉ có kích thước 850 KB, chỉ bằng 7% kích thước ứng dụng Android của họ. Sau khi cài đặt, ứng dụng này không thể phân biệt được với ứng dụng Android:
Oyo giữ cả phiên bản ứng dụng hàng đầu và "rút gọn" 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 trên thiết bị cấp thấp có thể có xu hướng tải các phiên bản ứng dụng gọn nhẹ hơn so với người dùng trên đ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 so với phiên bản ứng dụng dành riêng cho nền tảng nặng hơn.
Trên web, bạn có thể thu thập tín hiệu thiết bị và ánh xạ gần đúng các tín hiệu đó đến 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, bằng cách sử dụng API JavaScript hoặc gợi ý ứng dụng.
Sử dụng JavaScript
Bằng cách 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ề CPU, bộ nhớ và trạng thái mạng của thiết bị. Ví dụ:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
Sử dụng gợi ý ứng dụng
Bạn cũng có thể suy luận tín hiệu thiết bị trong tiêu đề yêu cầu HTTP thông qua gợi ý cho ứ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 ý về 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 được thông tin Device-Memory trong tiêu đề yêu cầ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ợ để 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 để liên kết thông tin này với 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 trong 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 có 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 ứng dụng. Trước đây, việc này chỉ có thể thực hiện được đối với những ứng dụng được cài đặt từ cửa hàng ứng dụng. Do đó, các công ty có thể nghĩ rằng việc 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 ứng dụng 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, bao gồm 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ọ thực hiện trực tiếp trên trang web.