Vậy Progressive Web App là gì?

[phanhao]

Mình cũng hơi khó để giải thích cho các bạn nghĩa của 3 từ Progressive Web App là gì!!! Và tốt nhất thì mình nghĩ bạn đừng nên cố gắng giải nghĩa nó làm gì! Thực ra nó chỉ là một thuật ngữ để ám chỉ tới một vài tính năng mà bạn có thể thêm vào bất kỳ ứng dụng web nào, bất kỳ trang web nào, miễn là nó đang chạy trên trình duyệt để làm gia tăng khả năng của bản thân website (thêm nhiều cái mới mà trước đây website không làm được), đồng thời cũng tăng khả năng tiếp cận tới người dùng.

PWA hoạt động như nào?

Để dễ hình dung hơn, hãy hiểu PWA là một website được tích hợp các chức năng ở trên. Kịch bản sẽ như sau:

• Người dùng tiếp cận với hệ thống của chúng ta thông qua website
• Trình duyệt sẽ detect được PWA và hiện thông báo nhắc cài PWA vào điện thoại
• Nếu người dùng đồng ý, icon của app sẽ hiển thị ra Homescreen và họ có thể sử dụng như dùng một app thông thường. (dù vẫn chạy trên web browser nhưng app sẽ không còn address bar của browser nữa, tất nhiên vẫn có thể show nếu muốn)
• Nếu người dùng không đồng ý thì họ sẽ tiếp tục sử dụng trên nền tảng web cùng với những trải nghiệm dùng web tốt hơn trước.

Mục đích sử dụng

Mục đích cuối cùng khi cải tiến web sang Progressive Web App là để mang lại cho người dùng sự trải nghiệm mới có cách thức hoạt động giống như là một ứng dụng native trên điện thoại mà bạn cài từ AppStore hay PlayStore về.

Có thể tạm phân chia ứng dụng bạn dùng trên điện thoại thành ba loại theo cách thức nó được triển khai:

• Native app: Các app viết theo ngôn ngữ riêng của từng nên tảng điện thoại như Java/Android, Swift/IOS..
• Web app: Chính là các hệ thống website truy cập thông qua browser
• Hybrid app: Là các app viết bằng các ngôn ngữ sử dụng trên web (Javascript) nhưng lại build thành kiểu native app để upload lên store. => PWA, React Native sẽ nằm thuộc nhóm app loại này.

Nếu nói tới đây có thể các bạn đã liên tưởng luôn tới web app có hỗ trợ responsive - co giãn được theo màn hình điện thoại. Cái này chúng ta đã làm dăm bảy năm nay rồi nhưng nó lại không phải là progressive web app. Xin anh em đừng hiểu nhầm nhé! Một số bạn khác có thể nghĩ tới dạng web theo kiểu universal giống như Viblo là PWA. =)) Sự thật, nó cũng chưa phải là progressive web app đâu nha!

Một vài tính năng mà mình đề cập tới ở phần trước để làm giàu thêm khả năng làm việc của cái web, mang tới trải nghiệm như dùng native mobile app bao gồm:

• App vẫn hoạt động khi bạn ở trạng thái offline - không có mạng
• Có Icon của app trên màn hình home
• Truy cập và sử dụng camera trên điện thoại
• Sử dụng được location
• Đồng bộ dữ liệu khi app ở trạng thái background

Mấy cái này thì chúng ta khó lòng mà thực hiện được với kiểu web thông thường. Nhưng bây giờ khi hầu hết các trình duyệt phổ biến đều hỗ trợ nên chúng ta có thể sử dụng chúng.

PWA sẽ chỉ hỗ trợ các trình duyệt mới??

Nếu bạn để ý mình có đề cập ở phần trên đó là chúng ta sẽ thêm các tính năng mới trên vào một website của bạn để nó trở thành Progressive Web App, nghĩa là bạn mang thêm điều mới chứ không phải là xóa bỏ các cái đã có. Tất nhiên không phải là chúng ta sẽ cần phải thay đổi tất cả code cũ, cũng không phải là sẽ không sửa đổi gì ở code cũ nhưng một vài điều quan trọng chúng ta cần hiểu đó là:

• Website của bạn, nó vẫn hoạt động trên các trình duyệt cũ, thật đấy!
• Nó sẽ mang lại trải nghiệm tốt hơn nếu người dùng sử dụng các trình duyệt hiện đại với các tính năng mới
• Tất nhiên, có thể một số tính năng sẽ không khả dụng với trình duyệt cũ, nhưng mà cái web của bạn thì chắc chắn là nó vẫn sẽ hoạt động. Na ná tương tự như web kiểu universal thì nếu bạn dùng một trình duyệt mới, khi click link chuyển sang một trang khác, website sẽ không tải lại mà nó chỉ render lại những phần cần thay đổi; ngược lại nếu bạn dùng trình duyệt cũ, khi nhấn link thì browser cũ vẫn sẽ load lại cả trang và điều này không hề ảnh hướng tới những user dùng loại trình duyệt này. Chỉ là nhưng ai mà dùng trình duyệt support PWA thì lúc đó, họ sẽ có những trải nghiệm tốt hơn mà thôi.