Ngày xuất bản: 12 tháng 5 năm 2020
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 mang đến trải nghiệm có thể cài đặt, cung cấp cùng mức độ tích hợp và độ tin cậy như 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 tuyệt vời để tiếp cận một cơ sở người dùng rộng lớn. Tuy nhiên, việc chọn chiến lược phù hợp để quảng bá việc 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 và tránh cạnh tranh cũng như trùng lặp nền tảng. Các sản phẩm 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 cho phép cài đặt ứng dụng web?
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 thẻ trình duyệt. Người dùng có thể chạy các ứng dụng này trên màn hình chính, thanh công cụ, thanh tác vụ hoặc giá đỡ. 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, khiến chúng có cảm giác như là một phần của thiết bị mà chúng được 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ể 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 dùng khác, ứng dụng này có thể có một số nhược điểm:
- 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 bạn phải 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 một ứng dụng xuống có thể là một quy 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 có kết nối chậm và gói dữ liệu đắt tiền.
- Rào cản: việc rời khỏi một trang web và chuyển sang cửa hàng để tải ứng dụng xuống sẽ tạo thêm rào cản và trì hoãn hành động của người dùng có thể được thực hiện trực tiếp trên web.
- Chu kỳ cập nhật: Việc thực hiện các 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 quy trình đánh giá ứng dụng. Điều này có thể làm chậm quá trình thực hiện các thay đổi và thử nghiệm (chẳng hạn như thử nghiệm A/B).
Trong một số trường hợp, tỷ lệ phần trăm 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, ví dụ: những người 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 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 Analytics để theo dõi tỷ lệ phần trăm người dùng "chỉ sử dụng web di động".
Nếu kích thước 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 khác cho trải nghiệm của mình.
Quảng bá việc cài đặt PWA trong trình duyệt
Nếu 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 của bạn cung cấp hoặc nếu ứng dụng đó chưa được cập nhật trong một thời gian. Bạn cũng có thể 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 trong mô hình kinh doanh. Trong trường hợp đó, việc quảng bá lượt cài đặt ứng dụng dành riêng cho nền tảng của bạn sẽ có ý nghĩa kinh doanh. 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 phân khúc đó, thì lời nhắc PWA chỉ có thể hiển thị cho họ. Chúng tôi gọi đây là PWA làm phương án dự phòng.
PWA là trải nghiệm chính có thể cài đặt
Sau khi 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 cho biết rằng PWA có thể cài đặt. Ví dụ: Chrome trên máy tính hiển thị một 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ị một thanh thông tin thu nhỏ:
Mặc dù điều đó có thể đủ cho 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, thì bạn nên lắng nghe BeforeInstallPromptEvent và làm theo các mẫu để quảng bá việc cài đặt 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, bạn vẫn nên cung cấp một 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ó được trải nghiệm tương tự như khi đã 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 thời điểm bạn sẽ cho người dùng thấy thông báo khuyến khích cài đặt cho PWA của bạn.
Ví dụ: người dùng PWA có thể là người dùng đã thấy lời nhắc cài đặt cho ứng dụng dành riêng cho nền tảng của bạn nhưng chưa cài đặt ứng dụng đó. Họ có thể quay lại trang web của bạn từ 5 lần trở lên, nhấp vào biểu ngữ ứng dụng nhưng vẫn tiếp tục sử dụng trang web.
Bạn có thể triển khai phương pháp phỏng đoán theo cách sau:
- Hiện 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 một cookie có thông tin đó (chẳng hạn như
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 (chẳng hạn như
document.cookie = "user-visits=1"). - Viết một hàm (chẳng hạn như
isPWAUser()) sử dụng thông tin đã được 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ề giá trị true và lời nhắc cài đặt PWA đã được lưu trước đó, bạn có thể hiện nút cài đặt PWA.
Thúc đẩy việc cài đặt PWA của bạn trong một cửa hàng ứng dụng
Bạn có thể tạo ứng dụng cửa hàng ứng dụng bằng nhiều công nghệ, bao gồm 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ể tìm thấy thông tin tóm tắt về các công nghệ có thể dùng cho mục đích đó.
Các ứng dụng trên Cửa hàng Play có thể được phân loại thành 2 nhóm:
- Ứng dụng dành riêng cho nền tảng: Hầu hết các ứng dụng này đều được tạo bằng mã dành riêng cho nền tảng. Kích thước ứng dụng tuỳ 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 có thể muố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ó một bộ tính năng đầy đủ hơn.
- Ứng dụng có dung lượ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 chúng thường đượ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 PWA đầy đủ lên cửa hàng. Một số công ty chọn cung cấp những trải nghiệm này dưới dạng "lite" 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 hàng đầu (cốt lõi) của họ.
Quảng bá ứng dụng có kích thước nhỏ
Theo một nghiên cứu của Google Play, cứ mỗi 6 MB tăng lên kích thước của một 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 thành 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 gọn nhẹ của ứng dụng trong Cửa hàng Play bằng cách sử dụng Trusted Web Activities (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 kết quả thường chỉ vài megabyte.
Oyo, một trong những công ty khách sạn lớn nhất ở Ấn Độ, đã tạo ra phiên bản Lite của ứng dụng và cung cấp phiên bản này trong Cửa hàng Play bằng cách sử dụng TWA. Tính đến tháng 5 năm 2020, ứng dụng Oyo chỉ có kích thước 850 KB, tức là chỉ bằng 7% kích thước của ứng dụng Android. Sau khi cài đặt, ứng dụng này không khác gì ứng dụng Android của họ:
Oyo vẫn giữ cả phiên bản ứng dụng chính và phiên bản "lite" trong cửa hàng, mang đến cho người dùng lựa chọn.
Mang đến trải nghiệm web gọn nhẹ
Theo trực giác, người dùng trên các thiết bị cấp thấp có thể có xu hướng tải các phiên bản ứng dụng có dung lượng 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 có dung lượng lớn 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 đó với danh mục thiết bị (chẳng hạn như "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 ý về ứng dụng.
Sử dụng JavaScript
Với các thuộc tính JavaScript, chẳng hạn như navigator.hardwareConcurrency, navigator.deviceMemory và navigator.connection, bạn có thể lần lượt nhận thông tin 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 thông tin mô tả của ứ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 ý của ứng dụng. Sau đây là cách bạn có thể triển khai mã trước đó cho bộ nhớ thiết bị bằng gợi ý cho ứng dụng khách.
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-MemoryBạn sẽ bắt đầu nhận thông tin
Device-Memorytrong tiêu đề yêu cầu của các yêu cầu HTTP:GET /main.js HTTP/1.1 Device-Memory: 0.5Sử dụng thông tin này trong các phần phụ trợ để lưu trữ một cookie có 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); … });Tạo logic riêng để liên kết thông tin này với các danh mục thiết bị và hiện lời nhắc cài đặt ứng dụng tương ứng trong mỗi trường hợp:
if (isDeviceMidOrLowEnd()) { // show "Lite app" install banner or PWA A2HS prompt } else { // show "Core app" install banner }
Cho phép người dùng cài đặt ứng dụng của bạn, bất kể họ dùng nền tảng nào
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. Vì trước đây, điều này chỉ có thể thực hiện đối 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ể nghĩ rằng việc hiển thị biểu ngữ cài đặt 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ọ.
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ác 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 việc này ngay từ trang web.