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 từ trình duyệt.
- Cài đặt PWA trong 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á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 cài đặt ứng dụng web của mình?
Ứ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ể 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. Đố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ế:
- 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 cho 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 đỏ.
- 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 ứ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ệ 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 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 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ó PWA chất lượng cao, bạn nên quảng bá việc cài đặt ứng dụng đó 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 của bạn cung cấp hoặc nếu đã lâu chưa 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à phần quan trọng của mô hình kinh doanh. Trong trường hợp đó, việc thúc đẩy việc cài đặt ứng dụng dành riêng cho nền tảng của bạn là hợp lý. Tuy nhiên, một số người dùng có thể cảm thấy thoải mái hơn khi ở lại 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à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ù đ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 ả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 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. 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ữ của ứ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 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ể 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 tạo 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 trê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 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 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 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ữ lại cả phiên bản ứng dụng hàng đầu và phiên bản "rút gọn" trong cửa hàng, cung cấp lựa chọn cho người dùng của họ.
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 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à 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 ý 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 để ánh xạ 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 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. 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, trong đó có việc mang đến 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.