Web Design

Progressive Web App – tương lai của web apps (P2)

Trong bài trước, chúng ta đã bàn luận về việc vì sao các nhà phát triển ứng dụng lại “thích” viết một web app để chạy gián tiếp trong trình duyệt trên máy tính, nhưng lại dành thời gian để dựng ứng dụng native cho thiết bị di động. Tuy nhiên, sự ra đời của Progressive Web Apps đã, hoặc chí ít là đang, bắt đầu mang web apps lên di động. Tất nhiên, sự chuyển đổi này chỉ đang ở mức vừa được khởi xướng, tuy nhiên cá nhân tôi hoàn toàn tin rằng, chuyện PWA trở nên phổ biến rộng rãi chỉ còn là vấn đề thời gian mà thôi. Ngoài Google thì Twitter là một lá cờ đầu phổ biến PWA, với phiên bản Twitter Web mới (hiện đã là mặc định trên trình duyệt di động, còn với máy tính thì vẫn trong giai đoạn thử nghiệm đại trà) là một ví dụ điển hình. Cá nhân tôi từ lâu đã không còn sử dụng ứng dụng Twitter for iOS và Twitter for Android, mà đã chuyển hẳn sang phiên bản PWA, và install trực tiếp vào thiết bị Android dưới dạng Web APK và mới đây là trên máy tính luôn. Có thể nói trải nghiệm PWA không thua kém gì so với phiên bản native, mà thậm chí còn thú vị hơn vì tôi có thể yêu cầu Twitter hiển thị giao diện tiếng Anh thay cho tiếng Việt – điều không thể đối với ứng dụng native.

Với khả năng hoạt động offline, cũng như cache lại các resources từ HTML, CSS, JS đến cả các assets như hình ảnh và âm thanh, PWA có thể không phải request tới lui các trang giao diện giống nhau, và do đó nó có thể tiết kiệm được dữ liệu phải gửi đi. Ngoài ra, vì HTML, CSS và JS là thuần text, nên tổng dung lượng bộ nhớ mà ứng dụng PWA chiếm dụng có thể thấp hơn rất nhiều so với phiên bản native tương ứng. Chẳng hạn, Twitter PWA có dung lượng chỉ hơn 200kB khi được cài đặt dưới dạng WebAPK trên Android, trong khi phiên bản được viết bằng Android Sdk có dung lượng tới 32MB, tức là chênh lệch nhau tới tận… 160 lần, mà hiệu quả là như nhau.

Ngoài ra, khi phát hành ứng dụng PWA, chúng ta chỉ tốn chi phí tạo server và phát triển một phiên bản ứng dụng duy nhất cho cả mobile và desktop. Do đó, chúng ta không cần thiết phải trả $25 cho Google một lần hay thậm chí là $99 hoặc $399 cho Apple. Và nếu có giao dịch xảy ra, thì chúng ta cũng không phải “ăn chia” lại cho hai ông lớn trên 30% số tiền. Điều khó khăn duy nhất có lẽ là chúng ta phải tự thiết lập hệ thống thanh toán. Nhưng bù lại, việc phát hành bản cập nhật mới cho ứng dụng chỉ phụ thuộc vào mỗi chúng ta, và sẽ hoạt động như nhau trên cả Android, iOS, macOS, Linux và Windows, thay vì xảy ra tình trạng “so le” tính năng.

Đúng vậy, chúng ta đang hướng đến tất cả các nền tảng. Với việc Chromium đã chính thức hỗ trợ đầy đủ PWA trên desktop từ phiên bản 65, và mới đây là hỗ trợ việc cài đặt PWA từ phiên bản 73, cộng với tính phổ biến của dự án, thì PWA càng ngày càng có nhiều đất diễn.

Do đó, trong trường hợp các bạn đang dự định làm một ứng dụng bán hàng online, hoặc ứng dụng ghi chú, hỗ trợ cả di động và máy tính, thì bạn nên bắt đầu ngay với PWA thay vì làm ứng dụng web thuần cho desktop và native apps cho mobile. Với việc các Web frameworks phổ biến hiện tại như React, Angular và Vue cùng với các bộ giao diện hỗ trợ như Materialize hay Vuetify có tính mobile-ready, thì chúng ta không có lí do gì để không cân nhắc và triển khai PWA. Về phần EitGuide, chúng tôi cũng đang cân nhắc chuyển đổi sang PWA trong tương lai.

Tuy nhiên, trước mắt, vấn đề tương thích của trình duyệt đang là một trở ngại khá lớn. Dẫu cho ba dự án lớn là Safari của Apple và Chromium của Google, bao gồm Chrome, Opera, Vivaldi và Brave, cũng như Firefox đến từ Mozilla đều ít nhiều hỗ trợ PWA, song Safari vẫn có sai khác so với hai project còn lại khi không hỗ trợ một số trường trong Manifest.json, cũng như notification bắt buộc phải thông qua APNS như native apps cho iOS và macOS thay vì trực tiếp từ server của nhà phát triển. Song, với sự phát triển nhanh của PWA thì Apple sẽ bắt buộc phải hỗ trợ đầy đủ các trường trong Manifest.json, cũng như ta có thể sử dụng gián tiếp Firebase Cloud Messaging để push notifications.

Cuối cùng, có thể bạn cũng đoán được, EitGuide sẽ có loạt bài viết hướng dẫn về PWA. Chúng tôi chưa đưa ra được thời điểm cụ thể, nhưng sẽ cố gắng tổng hợp và trình làng series mới và nóng hổi này trong thời gian sớm nhất. Còn bây giờ, xin chào tạm biệt và chúc các bạn code vui vẻ.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.