Trong Chrome 76, bạn có thể ẩn thanh thông tin thu nhỏ Thêm vào Màn hình chính

Penny McLachlan
Penny McLachlan
X GitHub

Nền về các Ứng dụng web tiến bộ và thanh thông tin nhỏ

Ứng dụng web tiến bộ (PWA) là một mẫu để tạo các trang web giống như ứng dụng, tải tức thì, đáng tin cậy và có thể cài đặt.

Khi PWA của bạn vượt qua danh sách kiểm tra về khả năng cài đặt trên Android, một hộp thoại của hệ thống Chrome có tên là thanh thông tin nhỏ sẽ xuất hiện ở cuối cửa sổ trình duyệt.

Hiện tại, thanh thông tin nhỏ Thêm vào Màn hình chính sẽ xuất hiện cùng lúc với sự kiện beforeinstallprompt.

Các thay đổi trong Chrome 76

Chúng tôi đã lắng nghe ý kiến của cộng đồng và chia sẻ rằng các nhà phát triển muốn có thêm quyền kiểm soát đối với thời điểm yêu cầu người dùng cài đặt PWA. Chúng tôi đã nghe ý kiến của bạn!

Kể từ Chrome 76, bạn có thể ngăn thanh thông tin thu nhỏ bằng cách gọi preventDefault() trên sự kiện beforeinstallprompt.

Sự kiện beforeinstallprompt có thể giúp bạn thúc đẩy quá trình cài đặt ứng dụng web đang tiến hành, giúp người dùng dễ dàng thêm ứng dụng đó vào màn hình chính. Cộng đồng của chúng tôi đã chia sẻ rằng những người dùng cài đặt PWA vào màn hình chính sẽ có mức độ tương tác cao, số lượt truy cập lặp lại nhiều hơn, thời gian dùng ứng dụng và tỷ lệ chuyển đổi cao hơn (nếu có).

Ví dụ về Pinterest sử dụng biểu ngữ cài đặt để quảng bá khả năng cài đặt PWA của họ.
Ví dụ về Pinterest sử dụng biểu ngữ cài đặt để quảng bá khả năng cài đặt của PWA. Vui lòng xem phần Thêm vào Màn hình chính để biết toàn bộ thông tin chi tiết về quy trình thêm vào màn hình chính, bao gồm cả mã mẫu và các phương pháp hay nhất khác.

Để quảng bá ứng dụng web của bạn mà không cần thanh thông tin thu nhỏ, hãy theo dõi sự kiện beforeinstallprompt, sau đó lưu sự kiện. Tiếp theo, hãy cập nhật giao diện người dùng để cho biết PWA của bạn có thể được cài đặt, chẳng hạn như bằng cách thêm nút cài đặt, hiển thị biểu ngữ cài đặt, sử dụng quảng cáo trong nguồn cấp dữ liệu hoặc một lựa chọn trình đơn. Khi người dùng nhấp vào phần tử cài đặt, hãy gọi prompt() trên sự kiện beforeinstallprompt đã lưu để hiển thị hộp thoại phương thức thêm vào màn hình chính.

Tương lai của thanh thông tin nhỏ Thêm vào màn hình chính

Việc sử dụng thanh thông tin thêm vào màn hình chính vẫn là một biện pháp tạm thời. Chúng tôi đang thử nghiệm các mẫu giao diện người dùng mới sẽ tiếp tục cung cấp cho người dùng Ứng dụng web tiến bộ khả năng cài đặt và thực hiện điều này theo cách giảm sự lộn xộn trong trải nghiệm duyệt web.