Buzz
Chúng ta thường nghe về PWA, hay còn gọi là Progressive Web App, một cách nói đơn giản là ứng dụng web. Vậy PWA là gì và những lợi ích của nó so với ứng dụng native là gì, tại sao không dùng PWA mà lại cần ứng dụng native song song, và làm thế nào để sử dụng PWA trên Windows hoặc macOS? Có rất nhiều câu hỏi được đề cập trong bài viết này.
PWA hay ứng dụng web tiến tiến, kết hợp tính năng của trang web thông thường và ứng dụng native, mang lại trải nghiệm mượt mà mà không tốn nhiều bộ nhớ, không cần thời gian tải xuống, không cần cập nhật và độ bảo mật cao như ứng dụng native.
PWA cũng hoạt động offline, tương thích với mọi thiết bị, và có thể cài đặt trực tiếp từ trình duyệt, có dung lượng nhẹ, tải nhanh, hỗ trợ liên kết sâu.
Khi sử dụng PWA, có một số công nghệ quan trọng như sau:
Ứng dụng PWA là gì?
PWA hay ứng dụng web tiến tiến, kết hợp tính năng của trang web thông thường và ứng dụng native, mang lại trải nghiệm mượt mà mà không tốn nhiều bộ nhớ, không cần thời gian tải xuống, không cần cập nhật và độ bảo mật cao như ứng dụng native.
PWA cũng hoạt động offline, tương thích với mọi thiết bị, và có thể cài đặt trực tiếp từ trình duyệt, có dung lượng nhẹ, tải nhanh, hỗ trợ liên kết sâu.
Khi sử dụng PWA, có một số công nghệ quan trọng như sau:
- Service workers: là thành phần quan trọng giúp PWA hoạt động offline hoặc trên mạng với tốc độ chậm. Service workers cũng đóng vai trò quan trọng trong hoạt động của PWA.
- Manifest: là một tệp JSON để trình duyệt nhận diện ứng dụng: biểu tượng, tên, màu sắc chủ đạo, các tùy chọn nâng cao như hướng mong muốn và các lối tắt ứng dụng… Manifest là một phần quan trọng để PWA hoạt động tốt.
- WebAssembly: là một công nghệ cho phép chạy mã máy ảo, giúp PWA hoạt động mượt mà và nhanh chóng hơn. PWA cũng sử dụng WebAssembly để tương tác với phần cứng, giúp nhà phát triển xây dựng ứng dụng một lần và chạy trên nhiều nền tảng.
- Web Push Notifications: cho phép gửi thông báo đẩy từ PWA đến người dùng.
- Background Sync: cho phép thực hiện các tác vụ đồng bộ khi PWA không hoạt động.
- Caching: cung cấp khả năng lưu trữ tài nguyên cục bộ để PWA hoạt động tốt khi không có kết nối mạng.
Ngoài ra, có nhiều công nghệ khác cũng hỗ trợ PWA hoạt động gần như không khác biệt so với một ứng dụng native trên di động.
PWA có ưu điểm gì so với ứng dụng native?
Đơn giản nhất là về chi phí và thời gian so với việc phát triển một ứng dụng native. Thứ hai là cài đặt dễ dàng hơn so với ứng dụng native, chỉ cần mở trình duyệt và làm theo một số bước là có thể sử dụng ngay một ứng dụng web.
Thứ ba là tính đồng bộ, khi sử dụng PWA trên bất kỳ thiết bị nào thì giao diện cũng giống nhau.
Thứ tư là vì tính đồng bộ nên PWA hoạt động trên mọi trình duyệt và thiết bị. Thứ năm là hiệu suất của PWA không khác biệt nhiều so với ứng dụng native, thậm chí có thể hoạt động tốt hơn trên những thiết bị cũ, yếu hơn mà ứng dụng native không còn hỗ trợ.
Hiện nay, có rất nhiều ví dụ về PWA như Twitter, Pinterest, Starbucks, Flipboard, Spotify... có lẽ bạn cũng không nhận ra nếu không được nói ra.
PWA có những hạn chế gì so với ứng dụng native?
Có ưu điểm thì cũng phải có nhược điểm, nếu không thì tất cả đã sử dụng PWA rồi đúng không? Nhược điểm lớn nhất và khiến PWA chưa thể thay thế hoàn toàn ứng dụng native là khả năng tương tác với phần cứng, một số ứng dụng PWA không thể kích hoạt các cảm biến như vân tay, máy ảnh, microphone… Đồng thời, khả năng tương tác với hệ thống cũng bị hạn chế, đặc biệt là khả năng đồng bộ và các tác vụ nền giống như ứng dụng native.
Dù hiệu suất có tốt đến đâu, PWA cũng khó sánh bằng với ứng dụng native, có thể mượt mà, có thể nhanh chóng nhưng so với một ứng dụng native thì chưa chắc đã nhanh bằng.
Tiếp theo, dù PWA có thể hoạt động trên mọi trình duyệt nhưng không phải tất cả các tính năng đều được hỗ trợ trên những trình duyệt đó.
Ở phía phát triển, việc quyết định phát triển PWA cũng cần chú ý đến những điểm này, vì nếu muốn có trải nghiệm tốt nhất, ứng dụng native vẫn là sự lựa chọn an toàn và tối ưu nhất.
AMP là gì, khác biệt so với PWA?
AMP hay Accelerated Mobile Page được sử dụng phổ biến và giúp giảm thời gian tải trang web, về cơ bản, nó khác biệt so với PWA như thế nào? AMP hoạt động dựa trên phiên bản HTML và CSS đơn giản, hạn chế sử dụng JavaScript và từ đó, trang web sẽ tải nhanh hơn, mặc dù giao diện vẫn giữ nguyên. AMP loại bỏ các yếu tố không cần thiết như đồ hoạ, ảnh động, banner... để tập trung vào nội dung của trang web.
Tuy nhiên, AMP không có khả năng hoạt động offline như PWA. Trong việc tối ưu hóa SEO, Google ưu tiên AMP hơn PWA, nhưng về trải nghiệm người dùng, PWA vẫn tốt hơn, nên về lâu dài, hiệu suất SEO của PWA cũng tương tự như AMP.
Windows 11 sử dụng PWA như thế nào?
Dù bạn sử dụng trình duyệt nào, khả năng lớn là nó đều hỗ trợ PWA. Vậy với máy tính Windows, làm thế nào để cài đặt PWA?
Hãy xem ví dụ của trình duyệt Edge, đang hỗ trợ PWA rất tốt. Gần như mọi trang web đều có thể được đóng gói thành PWA, như Mytour, YouTube, Instagram…
Để cài đặt ứng dụng PWA trên Windows, trước tiên hãy mở một trang web, sau đó chọn dấu “…” ở góc phải phía trên của trình duyệt.
Chọn tiếp Apps → chọn Install this site as an app. Sau đó, bạn đặt tên cho ứng dụng PWA đó. Một cửa sổ mới sẽ hiện ra và đó là PWA của trang web bạn vừa tạo.
Bây giờ bạn có thể sử dụng PWA giống như một ứng dụng native trên máy tính, bao gồm việc ghim nó vào thanh taskbar, tìm kiếm trong menu Start của Windows, và tạo shortcut trên Desktop…
Ngoài ra, đối với PWA trên Windows, có một số tuỳ chỉnh bổ sung. Ví dụ, bạn có thể nhấn Ctrl + R để tải lại trang, vẫn có thể sử dụng các tiện ích mở rộng có sẵn trên trình duyệt, và cấp quyền cho PWA truy cập vào các thành phần khác của máy tính…
macOS sử dụng PWA như thế nào?
Tương tự như Windows, trên macOS cũng hỗ trợ PWA với các trình duyệt như Safari, Edge, Chrome, Firefox…
Trên Windows, bạn có thể thực hiện các bước tương tự với trình duyệt Edge, và cách quản lý cũng tương tự như vậy.
PWA trên iOS và Android hiện tại thì ra sao?
Đối với Android, PWA gần như không bị hạn chế gì. Người dùng có thể sử dụng PWA giống như trên máy tính. Tuy nhiên, trên iOS và iPadOS, mặc dù đã có nhiều cải tiến như hỗ trợ Chế độ tối, hỗ trợ API cảm biến chuyển động, nhưng PWA trên nền tảng của Apple vẫn chưa hỗ trợ thông báo đẩy, không hỗ trợ đồng bộ nền, và giới hạn bộ nhớ cache của service workers là 50MB. Tổng quan, PWA trên nền tảng di động của Apple vẫn chưa được hỗ trợ một cách rộng rãi như trên Android.
Nên dùng PWA hay không?
Câu hỏi này khá là khó trả lời vì nó phụ thuộc vào nhu cầu cá nhân của mỗi người. Ví dụ, tôi vẫn sử dụng PWA cho một số ứng dụng mà tôi sử dụng thường xuyên nhất, như ChatGPT, Mytour và Messenger. PWA là một lựa chọn nhanh chóng, tiện lợi và hiệu quả để trải nghiệm một trang web nào đó. Khi Mytour chuyển sang dạng PWA, tôi nhận thấy hiệu suất cuộn trang mượt mà hơn rất nhiều so với việc sử dụng trên trình duyệt thông thường. Hy vọng những thông tin này sẽ giúp bạn hiểu rõ hơn về PWA và lợi ích của nó.
