Ứng dụng thống trị điện thoại của bạn. Lâu nay, app không ảnh hưởng đến máy tính để bàn hay trình duyệt theo cùng một cách. Điều đó đã thay đổi trong những năm gần đây. Progressive Web Apps (PWA) đang tăng trưởng và thay đổi cách chúng ta tương tác với mọi loại trang web.
Nhưng Progressive Web App chính xác là gì? PWA làm gì mà trang web thường không làm? Đây là những gì bạn cần biết về Progressive Web Apps.
Progressive Web App Là Gì?
Progressive Web Apps là các ứng dụng web cung cấp trang web thông thường cho người dùng nhưng xuất hiện như một ứng dụng mobile native (nguyên sinh). PWA cố gắng mang lại khả năng sử dụng của app mobile native cho tập tính năng trình duyệt hiện đại, tận dụng tối đa tiến bộ trong cả hai lĩnh vực phát triển.
Vậy điều gì định nghĩa một PWA?
- Universal (Toàn cầu): PWA phải hoạt động liền mạch (gần như) cho mọi người dùng, bất kể trình duyệt của họ.
- Responsive (Phản hồi/Đáp ứng): PWA nên hoạt động với mọi thiết bị, như laptop, tablet, smartphone, v.v.
- Design (Thiết kế): Thiết kế nên mô phỏng app mobile native, nghĩa là menu gọn gàng, dễ tìm, với tương tác đơn giản cho tính năng nâng cao.
- Safe (An toàn): PWA nên dùng HTTPS để bảo mật dữ liệu người dùng.
- Discoverable (Khám phá được): Người dùng có thể tìm thấy PWA, và chúng dễ dàng nhận diện là ứng dụng (thay vì "trang web").
- Engagement (Gắn kết): PWA phải có quyền truy cập tính năng gắn kết native như push notification.
- Updates (Cập nhật): PWA luôn cập nhật, phục vụ phiên bản mới nhất của dịch vụ hoặc trang web.
- Installation (Cài đặt): Cho phép người dùng dễ dàng "cài đặt" PWA lên màn hình chính mà không cần app store.
- Sharing (Chia sẻ): PWA chỉ cần một URL duy nhất để chia sẻ, không cần cài đặt.
Như bạn thấy, PWA nhằm cung cấp trải nghiệm trang web đầy đủ với tính năng gọn gàng và thiết kế giao diện của app native.
Progressive Web App Hoạt Động Như Thế Nào?
Chìa khóa của Progressive Web Apps là service worker (công nhân dịch vụ) của trình duyệt.
Service worker là script chạy ngầm trong trình duyệt, "tách biệt từ trang web, mở cửa cho các tính năng không cần trang web hoặc tương tác người dùng". Bạn có thể đang dùng service worker cho push notification và background sync, nhưng tương lai PWA gần đây trao quyền lớn hơn cho các script này.
Vì vậy, service worker hình thành nền tảng của tiêu chuẩn PWA, sử dụng web cache cho kết quả gần như tức thì.
Trước service worker, script cache trình duyệt chủ đạo là Application Cache (App Cache). App Cache xuất hiện trong nhiều dịch vụ offline-first nhưng hơi dễ lỗi. Hơn nữa, App Cache có một vài hạn chế nổi tiếng, như A List Apart giải thích.
Nhưng vấn đề chính cho nhà phát triển là thiếu tương tác trực tiếp với chính xác cách AppCache hoạt động, ngăn nhà phát triển sửa lỗi chính xác khi chúng nảy sinh. Lần lượt, các trang web và dịch vụ với chức năng offline đầy đủ là lựa chọn rủi ro.
Service worker, tuy nhiên, chỉ tồn tại selama hành động của nó được yêu cầu. Trong PWA, khi bạn nhấp vào cái gì hoặc dùng tính năng, service worker bật lên hoạt động. Service worker (nhớ là một script) xử lý sự kiện, quyết định xem offline cache có thể hoàn thành yêu cầu không. Ý tưởng là có nhiều offline cache để PWA lựa chọn, cho phạm vi chức năng offline rộng hơn nhiều.
Ngoài ra, cache không chỉ để tăng tốc offline. Ví dụ, bạn truy cập PWA nhưng kết nối rất không ổn định. Service worker phục vụ cache trước đó, hoạt động đầy đủ, không làm gián đoạn trải nghiệm của bạn.
Hỗ Trợ Trình Duyệt Cho Progressive Web App
Có hai yêu cầu để dùng Progressive Web App: trình duyệt tương thích và dịch vụ bật PWA.
Trước, xem trình duyệt. Bạn có hai cách kiểm tra hỗ trợ PWA của trình duyệt. Cách đầu là "Is Service Worker Ready?" của Jake Archibald, hiển thị trạng thái PWA-ready của các trình duyệt chính, cộng Samsung Internet.
Để xem tổng quan chi tiết hơn, hãy xem Can I Use, trang web chuyên liệt kê việc triển khai các công nghệ web và trình duyệt theo phiên bản. Ví dụ, nếu nhập "service workers" vào thanh tìm kiếm, bạn thấy bảng hiển thị số phiên bản mà mỗi trình duyệt triển khai PWA service workers.
Bảng Service Workers của Can I Use xác nhận các trình duyệt chính đều hỗ trợ PWA. Nó cũng minh họa hỗ trợ PWA cho một vài trình duyệt desktop thay thế và mobile browser.
Phân tích thêm một chút:
- Desktop browser (Full Support - Hỗ trợ đầy đủ): Chrome, Firefox, Opera, Edge, Safari
- Desktop browser (Partial Support/Outdated Version - Hỗ trợ một phần/Phiên bản cũ): QQ Browser, Baidu Browser
- Mobile browser (Full Support): Chrome, Firefox, Safari, UC Browser, Samsung Internet, Mint Browser, Wechat
- Mobile browser (Partial Support/Outdated Version): QQ Browser, Android Browser, Opera Mobile
Vậy các trình duyệt chính đều hỗ trợ PWA. Microsoft Edge và Safari là những bổ sung gần đây nhất vào danh sách hỗ trợ đầy đủ. Ngược lại, cả QQ Browser và Baidu Browser giờ dùng phiên bản cũ và đã rơi xuống cấp hai.
Cách Tìm Và Cài Đặt Progressive Web App
Bây giờ bạn biết dùng trình duyệt nào, hãy nghĩ về tìm và cài PWA. Ví dụ này dùng Samsung Galaxy S8 với Google Chrome.
Progressive Web Apps ở khắp nơi. Nhiều công ty đã điều chỉnh trang web và dịch vụ để cung cấp phiên bản PWA. Trong nhiều trường hợp, bạn đầu tiên gặp PWA khi truy cập trang chủ hoặc trang mobile của dịch vụ, kích hoạt hộp thoại Add to Home Screen (Thêm vào màn hình chính).
Xem video dưới để thấy chuyện gì xảy ra khi truy cập trang mobile của Twitter.
Tất nhiên, truy cập vô số trang hy vọng thấy trigger màn hình chính không hữu ích. Thực tế, đó là tốn thời gian cực kỳ. May mắn là bạn không phải làm vậy vì có vài trang chuyên catalog PWA.
Thử outweb trước. Nó liệt kê một loạt PWA khá tốt, với lựa chọn mới thường xuyên xuất hiện. Tiếp theo, thử pwa.rocks. Nó có lựa chọn nhỏ hơn, nhưng một vài PWA tiện lợi bạn muốn thêm vào thiết bị.
Hơn nữa, tháng 1 năm 2019, Chrome 72 cho Android ra mắt với Trusted Web Activity (TWA). TWA cho phép tab Chrome mở ở chế độ standalone. Nhờ đó, PWA có thể xuất hiện trên Google Play Store. Những PWA đầu tiên xuất hiện trên Google Play là Twitter Lite, Instagram Lite, và Google Maps Go, với nhiều cái khác dự kiến xuất hiện theo thời gian.
Progressive Web Apps Có Thay Thế Được Native Apps Không?
Progressive Web Apps là bước tiến hybrid tuyệt vời giữa trình duyệt và app mobile native. PWA có thay thế hoàn toàn native apps không? Câu trả lời khó khăn là không. PWA tuyệt vời như một lựa chọn nhẹ, nhưng vì chúng hiện chủ yếu tập trung vào sao chép các trang web và dịch vụ hiện có, chúng sẽ không thay thế native apps.
Ít nhất, không trong thời gian tới.
PWA hoạt động tuyệt vời. Dữ liệu tại PWA Stats cũng ủng hộ điều này. Đây là một vài con số thú vị minh họa cách PWA thay đổi tương tác của chúng ta với các trang web phổ biến:
- Trivago thấy tăng 150% engagement (sự tương tác) cho người dùng thêm PWA vào màn hình chính.
- Trang chủ PWA của Forbes "tải hoàn toàn chỉ trong 0.8 giây", trong khi lượt hiển thị mỗi lần truy cập tăng 10%. Độ dài phiên người dùng của Forbes PWA cũng tăng gấp đôi.
- Twitter Lite thấy tăng 65% trang mỗi phiên, với tăng khổng lồ 75% tweet. Cũng tương tác "dưới 5 giây qua 3G".
- Alibaba thấy tăng 76% chuyển đổi mobile.
PWA chưa thực sự phổ biến. Nhưng với lợi ích khổng lồ chúng cung cấp, như tiết kiệm dung lượng thiết bị, bạn sẽ nghe về chúng nhiều hơn trong tương lai.