Progressive Web Apps (PWA): Hướng Dẫn Toàn Diện Cho Bạn

Progressive Web Apps hay PWAs là gì?

Progressive Web Apps là sự kết hợp công nghệ của các ứng dụng native và các ứng dụng web dựa trên HTML5 mà chúng ta biết. PWAs đã đến để bắc cầu khoảng cách công nghệ giữa app và trang web.

Google đã là một trong những người ủng hộ chính trong việc khuyến khích phát triển loại công nghệ này. Để hiểu rõ hơn các tính năng của nó, chúng ta cần nói về các ứng dụng phải đáng tin cậy, nhanh và hấp dẫn.

Tính năng mà Progressive Web Apps phải có

Để làm cho khái niệm PWA đủ rõ ràng và được giải thích, hãy đi sâu vào các tính năng thiết yếu mà các công nghệ này phải có.

Tất nhiên, chúng tôi đang nói chung. Từ đó, mỗi mô hình kinh doanh/dịch vụ sẽ điều chỉnh các mục tiêu của mình theo nhu cầu của đối tượng riêng.

Tốc độ

Thời gian là tiền bạc, không chỉ cho Google mà cho tất cả những doanh nghiệp mà việc tải chậm các sản phẩm có thể khiến người dùng từ bỏ một mua hàng tiềm năng.

Google đã nhấn mạnh tiền đề này trong một thời gian dài. Sự ra đời của dự án AMP có mục tiêu này, và bây giờ PWA tham gia nhu cầu truy cập nhanh thông tin từ các ứng dụng.

Người dùng ngày nay không có sự kiên nhẫn; họ không chờ đợi một site tải hoàn toàn. 53% người dùng không sẽ chờ hơn 3 giây để một website tải, theo Think with Google

Đáng tin cậy

Khi chúng ta nói về độ tin cậy, chúng ta đề cập đến các đảm bảo hoạt động của site. Nhờ những gì được biết đến như là Service Workers, các vấn đề kết nối mạng không nên ngăn PWA tải.

Có thể cài đặt

PWAs có thể được cài đặt mà không cần đi đến Chrome Store, Apple Store, hoặc bất kỳ cửa hàng app nào hiện có. Hãy nhớ rằng chúng không phải là ứng dụng native, vì vậy chúng ta có thể truy cập chúng mà không qua các cửa hàng này.

Việc cài đặt hoạt động đơn giản như một shortcut; nó không cần không gian để lưu trữ các file khác nhau.

Các thiết bị khác nhau: Di động và Desktop

Cơ sở code được thống nhất giữa cả hai thiết bị, có nghĩa là các kỹ thuật thiết kế responsive áp dụng cho cả di động và desktop.

Lợi thế và nhược điểm của PWAs

Một số lợi thế đã được đề cập ở trên khi giải thích các tính năng của các ứng dụng tiến bộ. Nhưng có nhiều lý do khác để xét đến việc sử dụng công nghệ này trong doanh nghiệp của chúng ta.

• ›Tiết kiệm tài nguyên
• ›Không yêu cầu cài đặt
• ›Tốc độ tải rất cao
• ›Push notifications trực tiếp đến smartphone
• ›Chạy trên tất cả các hệ điều hành
• ›Bảo mật được cải thiện
• ›Ít công việc phát triển và bảo trì hơn so với một app native.
• ›Tiết kiệm hơn so với một app native.

Nhược điểm

• ›Yêu cầu kết nối internet.
• ›Không phải tất cả trình duyệt đều hỗ trợ PWAs.
• ›Tiêu thụ pin cao

Service Worker là gì?

Quay lại ngắn gọn về mặt kỹ thuật, chúng ta cần nói về một số khía cạnh nhất định mà nếu không có chúng các ứng dụng tiến bộ không thể hoạt động. Service workers là các script chạy ở nền, thực hiện các yêu cầu đến các ứng dụng web, cache hoặc chính mạng.

Một điều quan trọng chúng ta nên biết là Service Workers chỉ có thể hoạt động nếu bạn có chứng chỉ SSL và phục vụ chúng qua https.

Bây giờ hãy xem tất cả với một ví dụ: website BMW và PWA của họ.

Ví dụ PWA: BMW

Tôi đã cố gắng viết một bài viết mà không đi sâu vào các khía cạnh kỹ thuật, và bây giờ chúng ta sẽ thấy một ví dụ về một ứng dụng sẽ giúp hiểu rõ hơn khái niệm PWA.

Nếu chúng ta vào website BMW, chúng ta có thể thấy rằng họ có một thiết kế rất hấp dẫn, ưu tiên trực quan, nhưng ngoài việc nói về thiết kế, hãy xem chúng ta đang đối mặt với loại website nào.

Có vẻ là một website "bình thường", nhưng nếu bạn đào sâu vào code chúng ta có sự ngạc nhiên đầu tiên. Quả thật, đó là một website được phát triển hoàn toàn trong AMP, không chỉ phiên bản di động.

Nhưng hãy đến với vấn đề chính hôm nay.

Khi vào website, hãy đến thanh "tùy chỉnh và kiểm soát" của Chrome.

Như bạn có thể thấy, một cửa sổ đã mở với nội dung của website BMW. So sánh cả hai nội dung, chúng ta thấy rằng chúng thực tế giống hệt nhau.

Hình ảnh website trong trình duyệt (Chrome)

Hình ảnh website trong PWA desktop

Các nhà phát triển của BMW đã quản lý duy trì một bề ngoài trực quan giống hệt nhau. Khi chúng ta chấp nhận "cài đặt" PWA trong thư mục ứng dụng Chrome của chúng ta hoặc thậm chí trên desktop (tùy thuộc vào OS, tôi hiện đang sử dụng MacOS), một shortcut đến PWA đã được tải xuống.

Nếu chúng ta bị quá tải bởi việc cài đặt apps và muốn gỡ cài đặt, chúng ta chỉ cần đi đến cửa sổ phiên bản PWA của chúng ta, nhấp vào bên phải giống như trong Chrome, và chọn gỡ cài đặt.

Trong phiên bản di động, nó thực tế tương tự. Khi chúng ta vào website với phiên bản PWA, chúng ta nhận được một thông báo để "tạo một shortcut".

Khi vào một website với PWA; chúng ta sẽ thấy một tùy chọn để tạo một shortcut.

Nếu chúng ta chấp nhận, chúng ta sẽ thấy một biểu tượng PWA trên desktop di động của chúng ta.

DevTools để học thêm về PWAs

Tại thời điểm này, tôi muốn đi sâu vào các ví dụ để giải thích các khái niệm và tính năng của loại ứng dụng này.

Đối với điều này chúng tôi sẽ sử dụng công cụ developer mà Chrome cung cấp (DevTools). Chúng tôi mở inspector với nút phải và đi đến Application.

Chrome Devtools

App Manifest (Web Application Manifest)

Manifest là một file JSON nhỏ với các khía cạnh kiểu cơ bản mà nó cung cấp cho trình duyệt để tránh các thay đổi đột ngột.

Ví dụ về Manifest (JSON)

Service Workers

Như chúng tôi đã giải thích trước đây, bây giờ chúng ta có thể thấy nó là gì. Chúng ta thấy file JS và trong đó các script nó sử dụng. Service Worker được cài đặt trong trình duyệt. Chúng ta sẽ có một số từ các ứng dụng web khác.

Một trong các chức năng chính của loại code này là đảm bảo rằng cùng một phiên bản luôn được phục vụ (nó kiểm soát cache) ngay cả khi chúng ta mở một tab khác.

Cách triển khai PWA trong WordPress?

Mặc dù nếu chúng ta đã phát triển website với code riêng của chúng ta, chúng ta sẽ phải làm khá nhiều công việc thủ công, tình hình sẽ rất khác nếu chúng ta đã phát triển website của chúng ta trong WordPress. Nếu đây là trường hợp, chúng ta sẽ có một số plugin có sẵn cho phép chúng ta kích hoạt công nghệ PWA chỉ với vài cú nhấp chuột. Phiên bản PWA của SEO Alive, thực tế, là kết quả của plugin này mà chúng tôi khuyến nghị.

Các plugin phổ biến nhất để triển khai PWA trong WordPress.

PWAs trong Marketing

Đối với những người chúng ta làm việc trong marketing, Progressive Web Apps có thể giúp chúng ta đạt được các mục tiêu mà mọi phòng marketing đều có trong tâm trí để phát triển một thương hiệu.

Lòng trung thành và Bán hàng

Một trong những mục tiêu được làm tệ nhất bởi một số thương hiệu. Tất cả chúng ta đều biết sự tham gia thấp mà các thương hiệu điện thoại di động có khi đối xử với khách hàng của họ, để cho một ví dụ.

Push notifications trong PWAs là một trong các hành động đang hoạt động tốt nhất và đóng góp vào việc tạo ra bán hàng.

Một nghiên cứu được thực hiện bởi Gartner về PWAs cho chúng ta một loạt các thống kê rất thú vị về Lancome và Alibaba; Lancome báo cáo tăng 17% chuyển đổi, 51% trong các phiên từ thiết bị di động, và 52% trên iOS. Alibaba (tập đoàn mà Aliexpress thuộc về) đã cải thiện tỷ lệ chuyển đổi của mình lên 76%.

Mặc dù chúng ta đã nói về 2 gã khổng lồ toàn cầu, có một app trên di động của bạn nơi thời gian tải và thực thi không phải là một sự kéo lùi, cộng với việc tôn trọng thiết kế tốt, đã được chứng minh tăng tỷ lệ chuyển đổi.

Tóm lại, chúng ta có thể nói rằng PWAs ngày càng lan rộng, chủ yếu giữa các thương hiệu lớn. Ở Tây Ban Nha, có thể chúng ta sẽ mất một chút thời gian để nhận ra tiềm năng to lớn của công nghệ này, nhưng sớm hay muộn nó sẽ được triển khai.

Bất kỳ công nghệ nào tạo điều kiện cho việc điều hướng di động đều có tầm quan trọng lớn; chúng ta dành nhiều giờ với smartphone của mình, và cuối cùng, truy cập vào cả nội dung và sản phẩm là kinh doanh.

Tài Liệu Tham Khảo

• ›Tài liệu Google về PWAs