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

Các ứng dụng nền tảng đã cài đặt có thể chạy ngay cả khi không có mạng. Trong trường hợp này, quảng cáo thường đưa vào một trang cho người dùng biết rằng họ không có kết nối Internet. Một số nhà phát triển thậm chí còn tạo ra một bộ tính năng đầy đủ để sử dụng khi không có mạng.

Với các ứng dụng web, khả năng làm việc ngoại tuyến mới hơn; điều đó trở nên khả thi nhờ sự ra mắt của API Service Worker. Ngoài ra, khi các trang web có thể cài đặt, PWA đã thêm yêu cầu phải đă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. Mục đích của ý tưởng này là khuyến khích nhà phát triển gửi cho người dùng thông báo ít nhất là họ không thể sử dụng ứng dụng.

Giờ đây, các nhà phát triển sẽ không cần phải làm gì để có đượ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 nào 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 đang ngoại tuyến, 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 đơn giản Bạn đang ngoại tuyến. Hãy xem 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 và có thông báo "bạn đang ngoại tuyến".

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

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

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

Ảnh của Sten Ritterfeld trên Unsplash