Progressive Web App (PWA) là gì?

Progressive Web App – PWA là tổ hợp đặc tính kỹ thuật để phát triển ứng dụng web cấp tiến/hiện đại do kỹ sư của Google phát triển từ 2015, sử dụng các tính năng tiên tiến của web để xây dựng ứng dụng web giống với ứng dụng di động mà ứng dụng web thường không làm được: ví dụ gởi thông báo (push notification) mà không cần mở trình duyệt. Progressive ở đây còn được hiểu là lũy tiến (không ngừng phát triển) khi người sử dụng ứng dụng web đó càng lâu theo thời gian, thì ứng dụng web đó càng trở nên mạnh mẽ hơn.

PWA giúp tải trang web một cách nhanh chóng, thậm chí trên mạng chậm không ổn định (3G), gửi thông báo (push notification), có thể cài đặt biểu tượng lên màn hình điện thoại như một biểu tượng ứng dụng di động, có thể hoạt động ngoại tuyến (offline/không phụ thuộc mạng internet), và có thể chạy được trên mọi trình duyệt.

Đặc tính của PWA

Một trang web được gọi là PWA khi thỏa mãn các điều kiện sau đây:

• Tiến bộ (Progressive) – hoạt động đối với mọi người dùng mà không quan tâm trình duyệt được sử dụng (nói ngắn gọn là chạy được trên mọi trình duyệt) vì nó được xây dựng với nguyên lý cốt lõi là tiến bộ tăng cường.
• Responsive – phù hợp với bất kỳ kích cỡ màn hình: máy tính để bàn, điện thoại di động, máy tính bảng hay bất cứ thiết bị nào trong trong lai – có sử dụng trình duyệt web 🙂
• Khả năng kết nối độc lập (Connectivity independent) – khả năng kết nối được tăng cường bởi service-workder giúp ứng dụng web có thể hoạt động offline hoặc trên mạng chất lượng thấp.
• App-like – như một ứng dụng di động để người dùng tương tác bao gồm giao diện, tương tác và trình đơn điều hướng (người dùng sử dụng các trình đơn này để sử dụng thay cho các trình đơn điều hướng (Back/Forward) của trình duyệt)
• Làm mới (Fresh) – luôn luôn cập nhật nhờ service-worker
• An toàn (Safe) – sử dụng HTTPS để ngăn chặn snooping và đảm bảo nội dung đã không bị giả mạo.
• Dễ dàng phát hiện (Discoverable) –  là nhận biết như một “ứng dụng” nhờ W3C đăng ký kê khai và dịch vụ, cho phép công cụ tìm kiếm dễ dàng
• Re-engageable – kết nối người dùng dễ dàng hơn với tính năng.
• Installable – cho phép người dùng đánh dấu ứng dụng web lên trên màn hình điện thoại để dễ dàng truy cập lại sau đó, bỏ qua sự rắc rối của việc cài đặt ứng dụng.
• Linkable – Dễ dàng chia sẻ thông qua URL, ứng dụng di động không thể làm được điều này.

PWA đối với tương lai của lập trình web và ứng dụng di động

Có thống kê cho rằng, ứng dụng di động mất đi 20% người sử dụng tiềm năng khi phải mất nhiều thao tác (tìm kiếm trên chợ ứng dụng, cài đặt, mở ứng dụng) mới có thể dùng được thứ họ cần. Đối với PWA, chỉ cần mở đường dẫn ở trình duyệt là có thể sử dụng như 1 ứng dụng bình thường. Khi người dùng mở lại đường dẫn cũ (hay vào lại website) – “bằng trình duyệt“, trang web sẽ đề nghị người dùng cài đặt 1 biểu tượng lên màn hình điện thoại, và kể từ lúc này người dùng sử dụng biểu tượng ở màn hình điện thoại để mở “ứng dụng” mà “không cần trình duyệt“, nghĩa là sẽ không thấy khung chứa đường dẫn, không có bookmark, các nút điều hướng…, tất cả chỉ là nội dung/giao diện của ứng dụng web “phủ toàn bộ màn hình điện thoại”, như hình dưới đây:

PWA của Financial Times từ biểu tượng trên màn hình điện thoại

Hình bên trái ứng dụng PWA của Financial Times mình mở từ biểu tượng ở màn hình điện thoại, hình bên phải là mở bằng trình duyệt sẽ bao gồm những nút bấm có sẵn của trình duyệt. Như vậy, từ đây bạn có thể sử dụng như một ứng dụng trên điện thoại một cách bình thường mà không hề có sự khác biệt nào so với một ứng dụng native, vẫn có thể gởi thông báo (push notification), lưu trữ (ví dụ tin tức bạn quan tâm, hoặc hình ảnh, video…).

PWA kết hợp những ưu điểm của web và ứng dụng di động để tạo ra web thế hệ mới mạnh mẽ, đặc biệt nhất là đối với những trang web cung cấp thông tin. Mình sử dụng thường xuyên các ứng dụng sau để đọc tin: Thanh Niên, Tuổi Trẻ, Dân Trí, VNExpress, trong các ứng dụng này thì VNExpress có thao tác mượt và giao diện tốt nhất, sau đó là ứng dụng của báo Tuổi Trẻ, còn ứng dụng của báo Thanh Niên thì mình không thể xem được nội dung bài viết – có lẽ bị một đoạn mã quảng cáo nào đó cấm truy cập từ nước ngoài, báo Dân Trí thì giao diện không được chuyên nghiệp, bắt mắt cho lắm…và điều mình muốn nói ở đây là họ đã sử dụng một nguồn lực có thể nói là lớn để xây dựng ứng dụng di động (mình theo dõi báo Thanh Niên từ lâu và thấy không dưới 3 lần thay đổi/cập nhật lớn ứng dụng – nhưng tác dụng thì không cảm thấy tăng mấy), và theo mình là lãng phí hơn so với việc xây dựng ứng dụng web PWA. Hầu hết các chức năng của HTML5 hiện nay, đều đáp ứng các chức năng mức cần thiết cho một ứng dụng trên điện thoại di động, do vậy việc xây dựng 1 ứng dụng di động là cần xem xét kỹ.

Mình từng suy đoán “React Native là tương lai của lập trình ứng dụng di động“, nhưng với sự mạnh mẽ của PWA có thể sẽ chiếm 1 thị phần không nhỏ trong thời gian tới trong lĩnh vực lập trình ứng dụng di động, mặc dù PWA vẫn có một số yếu điểm khi so với ứng dụng native:

• Tài nguyên trong ứng dụng di động được đóng gói sẵn, do vậy sẽ ít tốn thời gian hơn với PWA, nên sẽ chạy nhanh hơn
• Thiếu các chức năng đặc trưng của thiết bị như NFC, Bluetooth, Gia tốc kế, con quay hồi chuyển…
• Không được phép truy cập danh bạ, mở khóa màn hình điện thoại…

Các ông lớn trình duyệt web, họ nghĩ gì?

Đối với Safari/iOS thì hạn chế còn nhiều hơn (thanks to whatwebcando.today):

Tuy nhiên, Apple cũng đang suy nghĩ về kế hoạch để có thể đưa Service Worker vào lõi của trình duyệt Safari, nhưng như bạn có thể thấy với PWA của Financial Times , trên iOS vẫn sử dụng được một cách bình thường (họ không sử dụng Service Worker, họ đã sử dụng AppCache từ lâu, nên mình nghĩ họ đang tiếp tục sử dụng AppCache), do vậy không cần thiết phải lo là bạn sử dụng PWA có chạy được trên iOS hay không, vấn đề là phải cần nhiều nguồn lực hơn một chút – nhưng so với việc  xây dựng ứng dụng di động thì không là gì cả. Còn đối với Chrome, bạn không cần phải lo nghĩ, luôn luôn đáp ứng PWA 100%!

Đối với ứng dụng Hybrid

Đối với những tính năng mà PWA đang có, nếu bạn đang có kế hoạch xây dựng ứng dụng di động hybrid (dựa trên Cordova/Phonegap chẳng hạn) thì bạn cần dừng lại, hãy xem bạn đang xây dựng ứng dụng gì, PWA có đáp ứng được không? Về cơ bản, ứng dụng Hybrid được bao bọc bởi trình duyệt web, và được cung cấp thêm các API để tương tác với hệ điều hành mà web không làm được, nhưng thực tế là hầu hết ứng dụng sử dụng các API đó không nhiều, trong khi đó việc build ra ứng dụng hybrid thực tế cũng không hề dễ dàng, bạn phải biết build, code signing, cửa hàng ứng dụng, xây dựng hệ thống gởi thông báo (push notification)…

Cá nhân mình cho rằng, thời của ứng dụng Hybrid sắp qua, nếu muốn lập trình:

• ứng dụng di động sử dụng chung mã nguồn: PWA
• ứng dụng di động Native chủ yếu là javascript: React Native (Xem thêm: Javascript làm được gì, 30 ngày ví dụ thực tế của React Native)
• ứng dụng phức tạp: thuần native (Swift/iOS, Java/Android, C#(Xamarin)/Window)

Fullstack Station Tips

Với những tính năng mạnh mẽ và tiện lợi mà PWA mang lại, cùng với sự hỗ trợ tích cực từ Google, cũng như động thái đáng ghi nhận từ Apple sức mạnh của Trình duyệt web ngày càng tăng, thì PWA sẽ mang lại tương lai tươi sáng cho những trang web cung cấp thông tin lớn, và đó chính là cơ hội cho lập trình viên web biết nắm bắt cơ hội này. Mình tin chắc rằng, khi bạn nắm được những kiến thức, kinh nghiệm mà PWA yêu cầu, thì sẽ có cơ hội để gia nhập những công ty lớn, vì chỉ họ mới có nhu cầu, nguồn lực để làm ứng dụng theo PWA được mà thôi.

Tham khảo

https://medium.com/dev-channel/why-progressive-web-apps-vs-native-is-the-wrong-question-to-ask-fb8555addcbb

https://ada.is/blog/2016/06/01/yet-another-progressive-webapp-post/

https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/

Comments