Bạn có thể phát hiện xem người dùng đang sử dụng PWA trong trình duyệt hay ở chế độ độc lập. Trên các trình duyệt dựa trên Chromium (Android và máy tính), bạn cũng có thể phát hiện các sự kiện sau:
- Trạng thái và kết quả của hộp thoại lời mời cài đặt.
- Đã cài đặt xong.
- Thao tác chuyển từ trình duyệt sang cửa sổ PWA và ngược lại.
- Trạng thái cài đặt PWA.
- Ứng dụng có liên quan được cài đặt từ một cửa hàng ứng dụng.
Bạn có thể sử dụng dữ liệu này cho mục đích phân tích, tìm hiểu lựa chọn ưu tiên của người dùng và tuỳ chỉnh trải nghiệm của họ. Để ghi lại những sự kiện này, bạn có thể dùng các công cụ như truy vấn nội dung nghe nhìn, sự kiện từ window hoặc sử dụng các API chức năng mà bạn có thể tìm thấy liệt kê tại đây.
Phát hiện chế độ hiển thị
Để theo dõi cách người dùng chạy PWA, bạn có thể sử dụng matchMedia() để kiểm tra truy vấn phương tiện display-mode.
window.addEventListener('DOMContentLoaded', () => {
let displayMode = 'browser tab';
if (window.matchMedia('(display-mode: standalone)').matches) {
displayMode = 'standalone';
}
// Log launch display mode to analytics
console.log('DISPLAY_MODE_LAUNCH:', displayMode);
});
Nếu bạn dùng ví dụ này, hãy nhớ so khớp với chế độ hiển thị trong tệp kê khai ứng dụng web (ví dụ: standalone, minimal-ui hoặc fullscreen). Bạn cũng có thể so khớp nhiều truy vấn trong chuỗi truy vấn đa phương tiện bằng các điều kiện được phân tách bằng dấu phẩy.
Bạn cũng có thể thêm tham số truy vấn vào start_url của tệp kê khai. Bạn có thể thu thập tham số này thông qua Analytics để theo dõi số liệu thống kê về thời điểm, cách thức và mức độ sử dụng PWA của bạn.
Cài đặt ứng dụng
Khi người dùng chấp nhận lời nhắc cài đặt trong trình duyệt, sự kiện appinstalled sẽ kích hoạt trên các trình duyệt dựa trên Chromium. Một cách sử dụng tuyệt vời cho trình xử lý sự kiện này là xóa bất kỳ quảng cáo cài đặt trong ứng dụng nào mà bạn đã thêm.
window.addEventListener('appinstalled', () => {
// If visible, hide the install promotion
hideInAppInstallPromotion();
// Log install to analytics
console.log('INSTALL: Success');
});
Hãy nhớ rằng, trên thiết bị Android có WebAPK, sự kiện được kích hoạt khi người dùng chấp nhận hộp thoại chứ không phải sau khi WebAPK được đúc và cài đặt. Có thể mất vài giây trước khi ứng dụng được cài đặt hoàn toàn.
Chương Lời nhắc cài đặt giải thích cách phát hiện xem có lời nhắc cài đặt hay không và lựa chọn của người dùng.
Chuyển phiên
Người dùng có thể sử dụng PWA của bạn trong trình duyệt và ở dạng độc lập đã cài đặt. Trên trình duyệt dành cho máy tính, bạn có thể chuyển điều hướng hiện tại giữa các ngữ cảnh này bằng huy hiệu hoặc các mục trong trình đơn, như trong hình sau.
Trên Android, có một mục trong trình đơn tương tự như mục trên máy tính để chuyển hướng điều hướng sang ứng dụng. Trong trường hợp này, URL hiện tại sẽ được mở ra nhưng đó sẽ là một mục điều hướng trang mới trong ứng dụng.
Trong hình sau đây, bạn có thể thấy mục trong trình đơn trong Android khi ứng dụng đã được cài đặt.
Chuyển nội dung sau khi cài đặt
Từ trình duyệt dành cho máy tính, thao tác điều hướng hiện tại được chuyển ngay sang ứng dụng khi cài đặt. Thẻ của trình duyệt đóng, và ứng dụng mới cài đặt mở ra, tiếp tục thực hiện công việc của người dùng.
Trên trình duyệt dành cho thiết bị di động, thao tác điều hướng hiện tại vẫn nằm trong trình duyệt khi bạn cài đặt ứng dụng. Nếu muốn chuyển sang ứng dụng, người dùng cần mở ứng dụng theo cách thủ công và đó sẽ là một thao tác mới.
Phát hiện yêu cầu chuyển
Để phát hiện trạng thái chuyển giữa trình duyệt và cửa sổ, bạn có thể sử dụng truy vấn nội dung nghe nhìn:
window.addEventListener('DOMContentLoaded', () => {
// replace standalone with your display used in manifest
window.matchMedia('(display-mode: standalone)')
.addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
});
Tách biệt bộ nhớ iOS và iPadOS
Trên iOS và iPadOS, không có tính năng điều hướng hoặc chuyển URL giữa trình duyệt và biểu tượng đã cài đặt. Ngay cả khi là cùng một PWA, mỗi biểu tượng PWA mà người dùng cài đặt sẽ có bộ nhớ riêng, tách biệt với thẻ của Safari và các biểu tượng khác. Khi người dùng mở biểu tượng đã cài đặt, bộ nhớ sẽ không được chia sẻ với Safari. Nếu PWA của bạn cần đăng nhập, người dùng sẽ phải đăng nhập lại. Nếu ứng dụng được thêm vào màn hình chính nhiều lần, thì người dùng sẽ có một phiên hoạt động riêng đối với mỗi phiên bản PWA.
Ứng dụng có liên quan
Trang web chỉ ra mối quan hệ với ứng dụng thông qua tệp kê khai. Để thực hiện việc này, hãy sử dụng thành viên related_applications trong thông số kỹ thuật của Tệp kê khai ứng dụng web.
Khoá related_applications là một mảng các đối tượng đại diện cho từng ứng dụng có liên quan. Mỗi mục nhập chứa platform, url và một id không bắt buộc.
Sau đây là các giá trị nền tảng có thể có:
chrome_web_store: Cửa hàng Google Chrome trực tuyến.play: Ứng dụng trên Google Play (Android và ChromeOS).chromeos_play: Chơi trên ChromeOS.webapp: Ứng dụng web.windows: Microsoft Store (Windows 10 và 11).f-droid: Chú F-droid.amazon: Amazon AppStore (FireOS).
Ưu tiên một ứng dụng có liên quan
Khi người dùng cài đặt một ứng dụng, bạn có thể chuyển hướng người dùng đó đến một ứng dụng có liên quan nếu đặt trường prefer_related_applications thành true trong tệp kê khai. Với cách thiết lập này, trên các trình duyệt tương thích, quy trình cài đặt sẽ không cài đặt PWA; thay vào đó, các quy trình cài đặt sẽ kích hoạt quá trình cài đặt cửa hàng qua url hoặc id mà bạn đã chỉ định trong mục related_applications.
Ứng dụng có liên quan có thể là PWA của bạn và sẽ được cài đặt thông qua một cửa hàng ứng dụng. Một ưu điểm của cấu hình này là hiện tại, chỉ những ứng dụng được cài đặt qua cửa hàng ứng dụng mới được khôi phục bằng bản sao lưu hoặc khi bạn chuyển sang thiết bị mới.
{
...
"related_applications:" [
{
"platform": "play",
"url": "https://play.google.com/..."
}
],
"prefer_related_applications": true
}
Biểu ngữ ứng dụng thông minh của Apple
Safari không hỗ trợ thành phần related_applications nhưng cung cấp Biểu ngữ ứng dụng thông minh cho các ứng dụng trong App Store. Vì vậy, nếu muốn quảng bá một PWA hoặc ứng dụng khác mà bạn đã xuất bản trong App Store, bạn có thể thêm thẻ meta vào HTML của PWA để mời người dùng cài đặt ứng dụng (xem đường liên kết vừa được cung cấp) hoặc chuyển thông tin điều hướng nếu đã cài đặt ứng dụng đó.
Phát hiện các ứng dụng đã cài đặt có liên quan
Phương thức getInstalledRelatedApps() cho phép trang web của bạn kiểm tra xem ứng dụng PWA hoặc ứng dụng web tiến bộ (PWA) dành cho iOS/Android/máy tính của bạn đã được cài đặt trên thiết bị của người dùng hay chưa.
Khi kiểm tra xem một ứng dụng liên quan đã được cài đặt hay chưa, bạn có thể triển khai các tính năng như ẩn lời nhắc tuỳ chỉnh đã cài đặt hoặc chuyển hướng người dùng đến thẳng ứng dụng đã cài đặt, thay vì truy cập vào một trang web phục vụ mục đích chung.
Để sử dụng phương thức getInstalledRelatedApps(), cả ứng dụng đã cài đặt và trang web đều cần phải định cấu hình kết nối với nhau. Mỗi ứng dụng (tuỳ thuộc vào nền tảng của ứng dụng) sẽ có siêu dữ liệu để nhận dạng trang web và trang web đó sẽ có ứng dụng cần cài đặt trong trường related_applications của tệp kê khai.
Các công cụ như BubbleWrap hoặc Trình tạo PWA (cho phép bạn xuất bản PWA lên cửa hàng ứng dụng) đã thêm siêu dữ liệu cần thiết để trang web của bạn có thể sử dụng getInstalledRelatedApps() ngay lập tức.
Để phát hiện xem một PWA đã được cài đặt hay chưa bằng getInstalledRelatedApps(), hãy xác định webapp trong trường related_applications của tệp kê khai với URL dẫn đến tệp kê khai của bạn:
...
"related_applications": [{
"platform": "webapp",
"url": "https://example.com/manifest.json",
}],
...
getInstalledRelatedApps() trả về một mảng các đối tượng ứng dụng. Nếu mảng trống thì ứng dụng liên quan chưa được cài đặt.
const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;
Phát hiện hoạt động cài đặt từ bên ngoài phạm vi của PWA
Trong Chrome trên Android 89, bạn có thể phát hiện xem PWA đã được cài đặt hay chưa, ngay cả từ bên ngoài phạm vi của PWA. PWA phải đặt một tệp JSON trong thư mục /.well-known/, cấp quyền cho phạm vi khác, như mô tả trong bài viết này.