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