Trang ngoại tuyến cơ bản cho ứng dụng web trên Chrome Android

Bạn có thể chạy các ứng dụng nền tảng đã cài đặt ngay cả khi không có mạng. Trong trường hợp này, chúng thường bao gồm một trang cho người dùng biết không có quyền truy cập Internet. Một số nhà phát triển thậm chí tạo ra một bộ tính năng đầy đủ có thể sử dụng khi không có mạng.

Với các ứng dụng web, khả năng làm việc khi không có mạng trở nên gần đây hơn; điều này trở nên khả thi nhờ sự ra mắt của Service Worker API. Ngoài ra, khi các trang web có thể cài đặt được, PWA đã thêm một yêu cầu là đăng ký trình chạy dịch vụ và triển khai phương thức fetch() của trình chạy dịch vụ đó để có thể cài đặt một ứng dụng web. Ý tưởng là để khuyến khích các nhà phát triển thông báo cho người dùng của họ ít nhất là ứng dụng hiện không thể sử dụng được.

Giờ đây, nhà phát triển không cần phải làm gì để có trang ngoại tuyến mặc định. Từ Chrome 109 trên Android, trình duyệt sẽ tự động tạo một trang cho người dùng biết khi họ không kết nối mạng.

Nếu ứng dụng không triển khai trải nghiệm ngoại tuyến tuỳ chỉnh, thì khi người dùng không có kết nối mạng, trang ngoại tuyến mặc định sẽ sử dụng biểu tượng của ứng dụng và thông báo Bạn đang ngoại tuyến đơn giản. Hãy làm như ví dụ dưới đây.

Trang ngoại tuyến mặc định cho một ứng dụng web mẫu, trong đó biểu trưng là một vòng tròn màu hồng và hai dấu cộng, đồng thời có thông báo "bạn đang ngoại tuyến".

Hãy truy cập sự cố này để xem ví dụ trước trong thực tế.

Bạn vẫn có thể tạo trang ngoại tuyến tuỳ chỉnh của riêng mình. Video sau đây minh hoạ cách phân phát trang tuỳ chỉnh bằng cách sử dụng Workbox với một dòng mã duy nhất.

Tính năng này hoạt động trên môi trường Android (Chrome 109) và máy tính (Chrome 110). Nếu bạn có bất kỳ phản hồi nào, hãy gửi cho chúng tôi thông qua biểu mẫu này

Ảnh của Sten Ritterfeld trên Unsplash