Còn nhớ một vài năm trước đây, khi mà mọi người thường nói chủ website nên ứng dụng việc thiết kế website responsive dành cho người sử dụng smartphone hay không? Chính vì thế mà có quá nhiều trang web đang xây dựng PWA. Vậy PWA là gì? Website sử dụng WordPress Hosting của chúng ta có cần sử dụng một PWA không? Hãy tham khảo ngay bài viết dưới đây để giải đáp thắc mắc này nhé!
PWA là gì? Bạn có cần xây dựng PWA cho website của mình không?
Mục lục
PWA là gì?
Để hiểu rõ về PWA, chúng tôi so sánh tương đối với cả website và ứng dụng di động để hiểu rõ hơn. Trong bảng dưới đây, một vài (chứ không phải tất cả) tính năng chú ý được thể hiện tương quan với PWA ở giữa (phần nào tượng trưng cho khả năng kéo web và ứng dụng lại với nhau của PWA).
| Tính năng | Website | Progressive Web App | Mobile App |
| Offline | NO | YES | YES |
| App Stores | NO | NO | YES |
| Responsive | YES | YES | YES |
| Searchable | YES | YES | NO |
| Local notifications | NO | YES | YES |
| Push notifications | NO | YES | YES |
| Download to install | NO | NO | YES |
| Fast updates | YES | YES | NO |
Về cơ bản, có 4 yêu cầu như sau xác định một PWA, hiện được Google Chrome, Opera và Samsung Internet hỗ trợ. Đó là:
- Một site phải được visit hai lần với 5 phút tạm nghỉ để đạt yêu cầu
- Đạt chuẩn kết nối HTTPS bảo mật
- Có cài đặt JSON Manifest
- Có cài đặt Service Worker
Khi 4 điều kiện này được thỏa mãn, developer có thể thoải mái tùy chỉnh các tính năng theo ý muốn, từ đó chúng ta có thể thấy cả offline error page, và duyệt hoàn chỉnh offline trên project và site nào ta đang truy cập.
Như vậy, các bạn có thể thấy PWA là ứng dụng có thể cung cấp những tính năng bổ sung dựa trên các thiết bị hỗ trợ, cung cấp khả năng ngoại tuyến, đẩy thông báo, có giao diện và tốc độ tương đương với ứng dụng Native và lưu trữ cục bộ các tài nguyên. Ứng dụng được ra đời để mang lại thật nhiều lợi ích cho cả người dùng và nhà phát triển.
Ưu điểm của PWA là gì?
Progressive Web Apps có thể mang lại lợi ích cho nhà bán lẻ, nhà cung cấp thông tin, tổ chức phi chính phủ và người dùng của họ như:
- Khả năng offline
- Tốc độ và hiệu năng tốt hơn nhiều so với website
- Bảo mật tốt
- Thêm vào Home Screen
- Push notifications
- Bounce rates tốt hơn
- Lắp đầy khoản cách giữa ứng dụng di động và website
- Cảm giác giống ứng dụng
- Không submissions/rejections từ App Store
Nhược điểm của PWA
Bên cạnh những ưu điểm vượt trội kể trên thì PWA cũng có những khuyết điểm như sau:
- Hỗ trợ trình duyệt hạn chế
- Native API access hạn chế
- Không vào App Store được
- Không phải mọi PWA hiện nay đều dùng link cho cấu trúc page của họ, xây dựng PWA với tabs không link được, và như vậy không thể được search engine tìm ra
Làm thế nào bạn có thể xây dựng một PWA cho website của bạn?
Một tin vui cho những người quản trị website mà không am hiểu nhiều về code là đã có một plugin WordPress dành cho PWA. Đó là WordPress Mobile Pack
Sau khi kích hoạt plugin và chọn phiên bản mới nhất của chủ đề Obliq, website trên máy tính của bạn vẫn hiển thị với chủ đề doanh nghiệp trước đó. Trong khi đó, chủ đề Obliq được hiển thị trên trình duyệt của điện thoại. Trong menu bắt đầu của plugin trên WordPress dashboard, đặt PWA để chỉ hiển thị chỉ mình tôi. Sau đó bạn đã có tùy chọn tải lên biểu tượng cho màn hình chính của người dùng và bạn chỉ cần chọn một bảng màu mà bạn thích.
Điều gì sẽ xảy ra nếu bạn muốn xây dựng PWA của riêng mình mà không cần sử dụng WordPress plug-in?
- Google Codelab có hướng dẫn gồm 8 bước để hướng dẫn các nhà phát triển thông qua các khái niệm cơ bản về việc chuyển đổi website dành cho máy tính để bàn sang PWA.
- Danh sách kiểm tra ứng dụng web cơ bản của Google bao gồm một số yếu tố mà ngay cả những người không giỏi lập trình có thể giải quyết, như kiểm tra tính thân thiện với thiết bị di động của PWA và xác minh rằng website được phục vụ qua HTTPS, cùng với các tác vụ nâng cao hơn như cài đặt dịch vụ và tệp kê khai ứng dụng web.
- Khi bạn đã đáp ứng các yêu cầu cơ sở, có hơn 20 thành phần trong Danh sách kiểm tra PWA, bao gồm đánh dấu lược đồ, mạng bộ nhớ cache đầu tiên, quản lý thông tin xác thực cho các website yêu cầu người dùng đăng nhập và rất nhiều các yếu tố UI / UX.
- Sau khi hoàn tất, bạn có thể kiểm tra PWA của mình bằng Lighthouse trong Chrome DevTools để xem những gì hoạt động và những gì cần phải được tùy chỉnh.
Kết luận
Qua bài viết trên, có lẽ các bạn đã hiểu thế nào là PWA cũng như cách xây dựng PWA cho website của mình như thế nào. Dù bằng cách nào, thời gian đầu tư có thể mang lại doanh thu cao hơn, khả năng tiếp cận tốt hơn cho người dùng có kết nối chậm hoặc chậm và trải nghiệm người dùng di động tốt hơn.
XEM THÊM:
Phần mềm quản trị cPanel và những điều bạn cần biết
Nằm lòng 5 nguyên tắc VÀNG giúp kinh doanh online HIỆU QUẢ nhất
