Benefit of offline

TLDR: Khi người dùng offline, việc giữ họ ở lại web của bạn sẽ giữ trải nghiệm liền mạch hơn so với việc quay về trang offline mặc định của trình duyệt.

Sự kiện gì xảy ra làm mọi người để ý tới Offline

Ngày 02/03/2021, trong thông báo về những thay đổi trong bản cập nhập Chrome 89 của mình, Google đã nhắc tới việc sẽ thay đổi PWA installability criteria changes (opens new window). Hiểu ngắn gọn là tiêu chuẩn để Google Chrome gợi ý cho người dùng của bạn về việc web app của bạn được install hay không sẽ thay đổi. Vậy là nếu Progressive Web App(PWA) nào chưa có trang dành riêng cho khi offline mà trả về con khủng long quen thuộc sẽ không được gợi ý để 'Install'. Từ Chrome 89, sẽ có cảnh báo khi bạn bật devtool, nhưng đây sẽ là yêu cầu bắt buộc từ Chrome 93 sẽ release vào cuối năm 2021.

Điều này sẽ ảnh hưởng tới kha khá web app hiện tại, vậy sao Google lại đưa ra thay đổi này? Điều gì sẽ thay đổi với các web app và chủ sở hữu các web app? Việc phục vụ người dùng khi Offline có tác dụng gì mà được coi trọng đến vậy?

Offline mang lại benefit gì

Thử đặt vào tình huống bạn đang đi chơi xa thì chợt nhớ ra hôm nay đúng ngày sale rất lớn, mà bạn còn đang muốn mua đồ ăn cho con mèo ở nhà. Ngay lập tức bạn mở điện thoại ra, mở browser và tìm 1 trang thương mại điện tử nào đó và bắt đầu công cuộc săn sale. Nhưng không may, bạn đang đi trên đường, và không phải ở đâu cũng có sóng điện thoại. Đây là lúc các web app sẽ phải cạnh tranh về trải nghiệm offline. Chúng ta cùng mô tả về trang web chúng ta mong muốn thấy khi mất mạng tạm thời nhé.

• Khi chúng ta đang ở trang chủ và bấm vào hộp pate mèo, đúng lúc đó mất mạng. Trang offline quen thuộc của browser sẽ đập ngay vào mắt chúng ta hay một trang thông báo thế này sẽ tốt hơn:

Tất nhiên là một trang 404 mang phong cách riêng của trang online trước đó chúng ta đang xem sẽ đem lại cảm giác tốt hơn rồi.

• Sau khi vào và đang xem sản phẩm và bấm "Mua ngay", lúc này lại mất mạng lần nữa. Chúng ta sẽ lại quay về với 404 Not found quen thuộc hay một thông báo nhỏ nhỏ như "Bạn đang mất kết nối, chúng tôi sẽ thêm sản phẩm vào giỏ hàng ngay sau khi có mạng"? Sau khi có mạng trở lại, chúng ta sẽ phải load lại trang sản phẩm, và mong chờ mọi thứ load thật nhanh để kịp đặt hàng hay là bạn được chuyển sang giỏ hàng với sản phẩm lúc nãy đã nằm sẵn trong đó? Câu trả lời của chúng ta quá rõ rồi đúng không?

Việc cung cấp trải nghiệm khi offline không những làm cho trải nghiệm của khách hàng được xuyên suốt hơn mà còn làm trang web của bạn đáng tin tưởng hơn, mọi thứ diễn ra nhanh hơn ngay cả khi người dùng đang offline. Nhờ đó giữ khách hàng ở trang của bạn lâu hơn, tỉ lệ quay lại cũng cao hơn. Việc sử dụng được trang web khi offline còn hỗ trợ chúng ta rất nhiều. Thử tượng tượng người dùng là những người ở các nước có internet chưa phát triển, hay những hướng dẫn viên du lịch thường xuyên phải đi đến các vùng sóng điện thoại còn chưa ổn định,... sử dụng được trang web kể cả khi offline đem lại một lợi ích rất lớn. Vậy làm thể nào để mang trải nghiệm offline lên trang web của bạn?

Cách giải quyết

Nếu là lập trình viên

Đầu tiên, bạn cần biến trang web của bạn thành PWA. Trong sự kiện service worker install, lưu trang offline page đã được custom của riêng trang web của bạn vào cache. Khi user offline, hiển thị trang offline page bạn đã cache trước đó. Và sau đó hãy để ý tới tất cả các tính năng cần có kết nối mạng và cung cấp trải nghiệm hợp lý cho người dùng theo từng feature.

Nếu không phải lập trình viên

Hãy thuê những đội ngũ có kinh nghiệm về PWA giúp là cách nhanh nhất. Bạn cũng có thể tự học, tìm cách cài thêm plugin(với những trang như wordpress, wix,...) nhưng sẽ khá tốn thời gian.