Thông tin cơ bản về Ứng dụng web tiến bộ và thanh thông tin thu nhỏ
Ứng dụng web tiến bộ (PWA) là một mẫu để tạo các trang web giống ứ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 khả năng cài đặt trên Android, một hộp thoại hệ thống Chrome có tên là thanh thông tin thu nhỏ sẽ xuất hiện ở cuối cửa sổ trình duyệt.
Hôm nay, thanh thông tin nhỏ Thêm vào màn hình chính sẽ hiển thị cùng lúc với sự kiện beforeinstallprompt.
Thay đổi trong Chrome 76
Chúng tôi đã lắng nghe cộng đồng và nhận thấy 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 quảng bá việc cài đặt ứng dụng web tiến bộ, 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 có mức độ tương tác cao, với nhiều lượt truy cập lại hơn, thời gian dành cho ứng dụng và khi có thể, tỷ lệ chuyển đổi cao hơn.
Để quảng bá ứng dụng web 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 người dùng có thể cài đặt PWA, 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 tuỳ 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 thông tin bổ sung về việc thêm vào màn hình chính vẫn là 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 để tiếp tục cho phép người dùng Ứng dụng web tăng tiến cài đặt, đồng thời làm việc này theo cách giảm bớt sự lộn xộn trong trải nghiệm duyệt web.