Progressive Web Apps - Liệu PWA có tương lai?

Trong một thế giới nơi hai phần ba dân số kết nối qua thiết bị di động, sự hiện diện mạnh mẽ trên di động là yếu tố không thể thiếu nếu muốn thu hút sự chú ý. Vấn đề là: làm sao có thể nhắm đến người dùng di động và desktop như nhau mà không phải phát triển và duy trì cả ứng dụng di động (iOS và Android) lẫn website responsive?

Những năm gần đây, nhiều nhà phát triển web đã tin rằng Progressive Web Apps (PWA) chính là câu trả lời tốt nhất. Trong bài viết này, chúng ta sẽ cùng xem PWA có thực sự là tương lai của thiết kế web hay không.

Progressive Web Apps (PWA) là gì

Thuật ngữ "Progressive Web App" ra đời vào năm 2015 — về cơ bản đã như một thế kỷ trước trong thế giới phát triển web — nhưng đến nay vẫn còn nhiều nhầm lẫn về cấu trúc của nó.

Về bản chất, PWA là một website mang dáng dấp của ứng dụng, sử dụng công nghệ web để kết hợp ưu điểm của cả môi trường web lẫn native. PWA được cấu thành từ 3 thành phần chính sau.

Website: về cơ bản, mọi PWA đều ít nhiều là một website thông thường được viết bằng HTML, CSS và JavaScript. Vì PWA chỉ dựa vào JavaScript để tạo tương tác, nên không cần cài đặt môi trường phát triển riêng để xây dựng PWA, và nó đã được hỗ trợ sẵn trên mọi trình duyệt web hiện đại.

Web manifest: PWA đi kèm một tệp JSON để báo cho trình duyệt và thiết bị biết rằng đây là PWA chứ không phải website thông thường. Tệp JSON này chứa thông tin như tên của PWA, biểu tượng, mô tả, và quyền truy cập cần thiết để thiết bị hoạt động bình thường.

Service worker: để tạo nền tảng kỹ thuật cho các tính năng vốn chỉ gắn liền với ứng dụng di động native — như thông báo đẩy, trải nghiệm offline phong phú, đồng bộ nền định kỳ,... — PWA sử dụng một đoạn script JavaScript chạy nền, độc lập với chính website đó.

"PWA là một bước tiến hóa tự nhiên trong cách phần mềm được phân phối và sử dụng" — các nhà phát triển web của Google và Microsoft đứng sau Progressive Web Apps chia sẻ. Đây chính là tương lai của web di động, họ nhấn mạnh, "bởi nó được xây dựng trên nền công nghệ web nên không phụ thuộc vào hệ điều hành hay môi trường phát triển nào."

PWA được cấu thành từ 3 thành phần chính

Tham khảo: PWA là gì? Giải thích Progressive Web Apps cho người mới bắt đầu

PWA có phải là tương lai của responsive web design?

Trong gần 20 năm qua (website đầu tiên áp dụng thiết kế responsive được ghi nhận là do Audi công bố vào khoảng năm 2002), các nhà phát triển web vẫn kiên trì với cách tiếp cận responsive web design, giúp website hiển thị phù hợp trên các thiết bị có kích thước màn hình lớn nhỏ khác nhau mà không cần duy trì thêm một phiên bản riêng dành cho di động.

Vấn đề của responsive web design là nó chưa đáp ứng đầy đủ kỳ vọng của người dùng truy cập từ các thiết bị có kích thước cửa sổ và màn hình khác nhau. Vì vậy, hiện nay nhiều nhà thiết kế web đặt câu hỏi "liệu PWA có phải là tương lai của responsive?"

Cụ thể, thiết kế responsive web sử dụng progressive enhancement nhưng lại không mang đến các tính năng giống native trên mọi thiết bị hiển thị. Progressive Web App giải quyết vấn đề này bằng service worker, và bên cạnh khả năng đáp ứng, PWA còn tổng hợp những nguyên tắc thiết kế cơ bản mà mọi nhà phát triển và thiết kế web cần lưu ý.

・Ứng phó với thay đổi: tính chất "tiệm tiến" của PWA nghĩa là ở những lần truy cập sau (hoặc thậm chí theo thời gian thực), sẽ có thêm nhiều tính năng được mở khóa, nên cần thông báo đầy đủ cho người dùng về mọi thay đổi thông qua trạng thái thông báo hoặc phương thức khác.

・Thông báo đẩy: thông báo đẩy là một trong những tính năng quan trọng của PWA. Khả năng thúc đẩy mức độ tương tác của người dùng nhờ thông báo đẩy đã được chứng minh rõ ràng, nhưng nếu xử lý không khéo, thông báo đẩy cũng có thể khiến người dùng rời bỏ.

・Xử lý các trạng thái khác nhau: PWA cần được thiết kế để tính đến nhiều trạng thái khác nhau, hoạt động tốt cả khi offline lẫn online. Các trạng thái khác bao gồm sự cố mạng, nội dung đang tải, hoặc nội dung mới chỉ tải một phần.

・Hiệu năng cảm nhận: đặc biệt ở các thị trường đang phát triển như Ấn Độ, nơi phần lớn người dùng truy cập web từ thiết bị cấu hình thấp, việc sử dụng màn hình loading-skeleton và hiệu ứng chuyển cảnh để cho người dùng thấy tiến trình đang diễn ra là rất quan trọng, giúp cải thiện hiệu năng cảm nhận.

・Khả năng tiếp cận (Accessibility): không cần nói cũng biết, PWA cũng phải tuân thủ Web Content Accessibility Guidelines (WCAG) 2.0.

Đặc điểm nổi bật của ứng dụng PWA

Ứng dụng PWA mang lại nhiều lợi ích

Nhiều tập đoàn lớn, trong đó có Twitter và Alibaba, đã có câu trả lời cho câu hỏi "PWA có phải là tương lai của thiết kế web?" Họ đã áp dụng PWA vào chiến lược số của mình và gặt hái nhiều lợi ích từ chương tiếp theo của thiết kế web này.

Nhờ Progressive Web App Twitter Lite, gã khổng lồ mạng xã hội này đã mang đến trải nghiệm web di động nhanh hơn, ổn định hơn và hấp dẫn hơn — giúp số trang xem mỗi phiên tăng 65%, số tweet gửi đi tăng 75%, và tỷ lệ thoát trang giảm 20%.

AliExpress, dịch vụ bán lẻ trực tuyến của Alibaba, cho biết sau khi ra mắt PWA, thời gian trung bình mỗi phiên truy cập tăng 74% trên tất cả trình duyệt, và người dùng xem số trang mỗi phiên nhiều gấp đôi. Điều tương tự cũng xảy ra khi Alibaba ra mắt PWA cho nền tảng giao dịch B2B — cho thấy lợi ích của PWA không bị giới hạn ở một lĩnh vực thị trường cụ thể nào.

Tham khảo: Giải thích ưu điểm và nhược điểm của Progressive Web Apps (PWA)

Tham khảo: Giới thiệu chi tiết 12 case study triển khai ứng dụng PWA

Tương lai rộng mở của PWA

Ứng dụng PWA chính là tương lai của thiết kế web, giúp các nhà phát triển ứng dụng web tạo ra trải nghiệm người dùng có độ phủ rộng như web nhưng vẫn giữ được tính năng như ứng dụng native. Cũng như mọi công nghệ mới khác, PWA có những nguyên tắc thiết kế cơ bản riêng, nhưng với hàng loạt lợi ích mang lại, đây hoàn toàn xứng đáng để đầu tư.

Miichisoft sở hữu đội ngũ phát triển có thể đảm nhận cả ứng dụng di động và hệ thống web (bao gồm cả PWA). Ngoài ra, từ năm 2020, chúng tôi đã xây dựng đội ngũ tư vấn IT tại Nhật Bản, cung cấp dịch vụ trọn gói từ định nghĩa yêu cầu đến thiết kế, phát triển và vận hành cho bất kỳ hệ thống, ứng dụng nào quý vị mong muốn.

Nếu quý vị có nhu cầu phát triển ứng dụng PWA, hệ thống web hay ứng dụng di động, xin vui lòng liên hệ với chúng tôi.
Chúng tôi sẽ tư vấn chi tiết cho quý vị.
Rất mong nhận được liên hệ từ quý vị.
Xin chân thành cảm ơn.

Nguồn: BrainHub (Progressive Web Apps: Is PWA the Future of Web Design?)