PWA là gì? Giải thích toàn diện về Progressive Web Apps cho người mới bắt đầu

Trong bài viết này, chúng tôi sẽ giới thiệu Progressive Web Apps (PWAs) là gì, các nguyên tắc cốt lõi của nó, và sự khác biệt so với web app cũng như mobile app.

Chúng tôi cũng hy vọng bài viết này sẽ là gợi ý hữu ích cho những ai đang phân vân lựa chọn giữa PWA, web responsive và native app.

Vậy hãy cùng bắt đầu nhé!

1. PWAs ra đời từ sự thay đổi của web

Web đã thay đổi rất nhiều trong những năm gần đây. Đầu những năm 2000, các trang web giống như bài báo hoặc mục từ điển bách khoa, nhưng trong 10 năm sau đó, chúng đã phát triển thành các blog, video và trang thương mại điện tử tinh vi hơn nhiều.

Sự xuất hiện của smartphone khiến ngày càng nhiều người dùng duyệt web trên thiết bị di động. Trong mảng sử dụng phương tiện số, mobile app đã nhanh chóng vượt qua website — vì app cung cấp nhiều tính năng hơn và giúp xây dựng mối quan hệ tốt hơn với người dùng, các doanh nghiệp đã chuyển sự quan tâm từ website sang app.

Mặt khác, theo US Mobile App Report 2017, một nửa số người dùng smartphone không cài thêm ứng dụng mới nào trong vòng 1 tháng.

Progressive Web Apps (PWAs) — xu hướng lớn tiếp theo của web — hướng đến mục tiêu kết hợp các tính năng của mobile app với khả năng truy cập, khả năng được tìm thấy và tính dễ sử dụng vốn là nền tảng của internet hiện đại.

2. Progressive Web Apps (PWAs) là gì?

Progressive Web Apps (PWAs)

PWA, viết tắt của Progressive Web Apps, là một loại phần mềm ứng dụng được cung cấp qua web, được xây dựng bằng các công nghệ web phổ biến như HTML, CSS, JavaScript, WebAssembly. Và nó có các đặc điểm sau.

PWA không phải là một tập hợp công nghệ cụ thể, mà là trải nghiệm người dùng tập trung vào hành vi giống native app trong khi vẫn giữ được khả năng truy cập của nền tảng web.

PWA không bị giới hạn ở một framework cụ thể nào, có thể xây dựng bằng bất kỳ framework nào, hoặc thậm chí không dùng framework nào cả. Vì vậy, thay vì băn khoăn nên dùng framework nào để phát triển PWA, tốt hơn hết nên tiếp cận từ góc độ tư duy, cách làm và thiết kế trước, rồi mới nghĩ đến framework hay API sau cùng.

Khi phát triển bằng PWA, bạn hoàn toàn có thể triển khai theo quy trình tương tự phát triển web thông thường. Thông thường, xu hướng sau đây sẽ xuất hiện.

PWA đón nhận những kỳ vọng ngày càng cao đối với nền tảng web, và cố gắng mang lại trải nghiệm tốt nhất có thể.

Với hầu hết mọi người, yêu cầu tối thiểu để một web application được xem là PWA là khả năng chạy offline (ít nhất là mở được ứng dụng khi offline) và khả năng thêm vào màn hình chính.

Tuy nhiên, cần hiểu rằng chỉ thêm các tính năng này thôi thì web app vẫn chưa trở thành PWA thực sự, vì nó có thể vẫn thiếu cảm giác của một native app.

3. Nguyên tắc cốt lõi của Progressive Web Applications (PWAs)

Nguyên tắc cốt lõi của PWA

3.1. Nguyên tắc cốt lõi của PWA, thứ 1: Độ tin cậy

3.1.1. Hỗ trợ offline

Khi được khởi chạy từ màn hình chính, PWA có thể khởi động bất kể tình trạng mạng. Điều này đạt được nhờ có một service worker chạy song song với mã JavaScript phía client. Thông thường, kịch bản sau sẽ xảy ra với PWA.

• Người dùng mở ứng dụng lần đầu tiên.
• Mã JavaScript phía client đăng ký một Service Worker.
• Service Worker tải về và cache các tài nguyên cần thiết để hiển thị web application.
• Lần tiếp theo ứng dụng được mở, Service Worker sẽ chặn các yêu cầu mạng mà trình duyệt thực hiện để tải tài nguyên cần thiết hiển thị trang (bao gồm cả lệnh gọi server đầu tiên cho file HTML), và có thể phản hồi bằng phiên bản đã cache khi cần thiết.

PWA không cần hiển thị toàn bộ thông tin khi người dùng offline — chỉ cần hiển thị thông báo mạng đang bị gián đoạn là đủ. Tuy nhiên, tuỳ vào ứng dụng, hỗ trợ offline có thể mang ý nghĩa lớn hơn thế.

Ví dụ,

• Một app tin tức có thể cache những bài viết quan trọng nhất hoặc liên quan đến người dùng mỗi khi app được mở, để người dùng có thể đọc chúng bất cứ khi nào mất kết nối.
• Một app nhắn tin có thể lưu lại các tin nhắn gần nhất khi chúng đến, để người dùng có thể xem khi offline.
• Một app bảng tính cộng tác có thể lưu lại các tài liệu gần đây và đồng bộ khi kết nối của người dùng trở lại online.

Ngoài ra, hỗ trợ offline không chỉ giới hạn ở việc dùng Service Worker, mà bắt đầu từ việc nhà thiết kế và chủ sản phẩm suy nghĩ xem ứng dụng nên làm gì khi offline.

3.1.2. Tình trạng mạng chậm

PWA cần hoạt động được ngay cả trong điều kiện mạng chậm. Giống như mobile app, việc điều hướng trong app cần mượt mà bất kể độ trễ do băng thông.

Một lần nữa, Service Worker có thể xử lý các kịch bản như vậy bằng cách cache các route được tải chậm (lazy-loaded).

Hơn nữa, khi cần dùng mạng để hiển thị tài nguyên, có thể dùng skeleton screen để thể hiện tiến trình.

3.2. Nguyên tắc cốt lõi của PWA, thứ 2: Hiệu năng

Hiệu năng là một chỉ số cực kỳ quan trọng với mọi web application. Google đã báo cáo như sau.

• Khi trang tải quá 3 giây, 53% người dùng sẽ rời bỏ trang.
• Khi thời gian tải trang tăng từ 1 giây lên 3 giây, tỷ lệ thoát trang tăng 32%.
• Khi thời gian tải trang tăng từ 1 giây lên 5 giây, tỷ lệ thoát trang tăng 90%.

3.2.1. Mô hình RAIL

Các kỹ sư hiệu năng của Google đã phát triển một mô hình phổ quát để đo lường hiệu năng, gọi là RAIL.

RAIL là mô hình lấy người dùng làm trung tâm, được tạo ra thông qua nghiên cứu về sự tương tác giữa chương trình máy tính và con người. Các mục tiêu mà mô hình RAIL đặt ra có thể áp dụng cho mọi chương trình phần mềm hướng đến người dùng, như website, ứng dụng di động và desktop, hay video game.

RAIL là từ viết tắt đại diện cho các chỉ số hiệu năng chính.

• Respond: Phản hồi thao tác của người dùng trong 100 mili giây.
• Animate: Animation cần chạy ở 60fps.
• Idle: Tối đa hoá thời gian rảnh.
• Load: Hiển thị nội dung cho người dùng trong dưới 1 giây và trở nên tương tác được trong dưới 5 giây.

3.2.2. Mẫu hình PRPL

Áp dụng mẫu hình PRPL sẽ giúp ích rất nhiều trong việc đạt được các mục tiêu nói trên. PRPL là viết tắt của những từ sau.

• Push: Đẩy trước các tài nguyên quan trọng của route URL.
• Render: Render route ban đầu.
• Pre-cache: Cache trước các route còn lại.
• Lazy-load: Tải chậm (lazy-load) và tạo các route còn lại khi cần thiết.

3.2.3. Công cụ đo hiệu năng

Công cụ đo thủ công

• Dev tools của trình duyệt: hiện tại Google Chrome có bộ công cụ đo hiệu năng tốt nhất.
• Các benchmark như JSPerf.com, ESBench, Speedracer for Chrome
• Analytics giúp theo dõi hiệu năng thực tế của người dùng, cả trên website lẫn web application, trên nhiều nền tảng khác nhau.

Công cụ đo tự động

• Lighthouse tự động hoá quy trình kiểm tra hiệu năng, và cũng có thể chạy trên máy chủ CI.

3.3. Nguyên tắc cốt lõi của PWA, thứ 3: Tương tác người dùng

PWA cần mang lại cảm giác giống native app và có đầy đủ tính năng như một native app.

Trên tất cả các nền tảng di động chính, PWA có thể được cài vào màn hình chính của người dùng và mở lên mà không hiển thị thanh điều khiển của trình duyệt. Trên các nền tảng desktop, PWA có thể được thêm vào thanh tác vụ hoặc dock, hoặc thêm shortcut ra desktop, nhưng hiện tại vẫn có thể mở trong trình duyệt.

Nền tảng web đã phát triển rất mạnh, và hiện cung cấp API cho các tính năng như sau.

• Định vị (Geolocation)
• Camera
• Thông báo đẩy (Push notification)
• Thanh toán nền tảng native (Apple Pay, G Pay, v.v.)
• Rung
• Bluetooth
• USB, v.v.

4. Ví dụ triển khai PWA

PWA có thể cải thiện đáng kể mức độ tương tác và tỷ lệ chuyển đổi của người dùng. Thời gian tải rút ngắn và giao diện nhanh hơn tạo ra các tương tác dài hơn, hấp dẫn hơn, từ đó tác động đến các chỉ số quan trọng.

Số trang mỗi phiên, độ dài phiên:

• Với Twitter, số trang mỗi phiên tăng 65%, số tweet gửi đi tăng 75%.
• Với AliExpress, số trang được truy cập tăng 100%, thời gian ở lại mỗi phiên tăng 74%.

Tốc độ chuyển đổi:

• AliExpress tăng tỷ lệ chuyển đổi của người dùng mới thêm 104%.
• Trivago cải thiện tỷ lệ click vào ưu đãi khách sạn thêm 97%.
• OLX cải thiện tỷ lệ click quảng cáo thêm 146%. Nhờ dùng push notification, mức độ tương tác lại của người dùng tăng 250%.
• Treebo tăng tỷ lệ chuyển đổi lên gấp 4 lần,
• Alibaba tăng tỷ lệ chuyển đổi thêm 76%.

Tỷ lệ thoát trang:

• OLX giảm tỷ lệ thoát trang 80%.
• Housing.com giảm tỷ lệ thoát trang 40%.

Tham khảo: Giới thiệu chi tiết 12 ví dụ triển khai PWA

5. So sánh tính năng PWA trên các nền tảng

Dù nền tảng web đã phát triển rất mạnh, một số thiết bị vẫn chưa hỗ trợ đầy đủ các tính năng cơ bản của mobile app.

• Push notification được hỗ trợ đầy đủ trên Android, nghĩa là ngay cả khi đóng app và trình duyệt, thiết bị vẫn có thể tiếp tục nhận thông báo. Trên thiết bị desktop, thông báo chỉ được nhận khi trình duyệt đang mở (có thể đóng website, nhưng trình duyệt phải đang chạy). Trên thiết bị iOS, push notification trên trình duyệt hoàn toàn không được hỗ trợ.
• Dịch vụ định vị nền (background location) không khả dụng trên trình duyệt, nghĩa là bạn không thể tạo app tự động hoá một số tác vụ dựa trên vị trí (như hệ thống điều khiển nhà thông minh).
• Bluetooth, USB, NFC chỉ được hỗ trợ trên trình duyệt Chrome.
• Xác thực thiết bị vẫn đang trong quá trình phát triển, hiện chưa có cách nào để xác thực và/hoặc uỷ quyền người dùng trên web dựa trên vân tay, Touch ID hay Face ID.

Dù có thể thiếu một số tính năng quan trọng, điều đó không có nghĩa là các nguyên tắc mà PWA cần tuân theo không thể áp dụng cho native app (đặc biệt là những app được xây dựng bằng công nghệ web như React Native).

Vì PWA tập trung vào việc mang lại trải nghiệm người dùng tuyệt vời, nên bất kỳ app nào cũng có thể theo đuổi mục tiêu đã đặt ra và vẫn thu hút được người dùng.

Tham khảo: So sánh PWA và native app, tiêu chí lựa chọn

6. Tổng quan yêu cầu để bắt đầu phát triển PWA

Bắt đầu xây dựng PWA không mất nhiều thời gian. Chỉ cần chuẩn bị một vài thứ cần thiết là đã sẵn sàng.

Công cụ: Công nghệ được biết đến nhiều nhất để phát triển PWA là AngularJS. Ngoài ra còn có ReactJS và Polymer.

HTTPS: Bạn cần một máy chủ có kết nối HTTPS. Điều này đảm bảo dữ liệu người dùng được bảo vệ, đồng thời thêm một lớp bảo mật cho trang web.

Application Shell: Đây là thứ tạo ấn tượng đầu tiên khi app được tải. Nói đơn giản, đây là những gì người dùng thấy ngay lần đầu tiên tương tác với app.

Service Workers: Một trong những công nghệ cốt lõi đứng sau PWA. Hỗ trợ ứng dụng hoạt động offline, thực hiện caching nâng cao, và chạy các tác vụ nền.

File Manifest: Đây là file JSON được tạo bằng công cụ tạo sinh (generator). File này chứa thông tin về cách PWA hiển thị và hoạt động. Bạn có thể xác định tên, mô tả, icon, màu sắc và các tính năng khác của PWA.

Kiểm định app (App auditing): Có thể thực hiện bằng công cụ Google Lighthouse. Vì Lighthouse là phần mềm mã nguồn mở, bất kỳ ai cũng có thể dùng nó cho bất kỳ trang web nào. Google là bên ủng hộ mạnh mẽ cho PWA và đang thúc đẩy PWA như tương lai của web. Với Lighthouse, bạn có thể kiểm tra tốc độ, khả năng truy cập (accessibility) và mức độ sẵn sàng cho SEO của PWA.

7. Tổng kết

Bài viết này đã giới thiệu sơ lược về Progressive Web Apps (PWAs).

Tại Mỹ, ngày càng nhiều doanh nghiệp (kể cả các nhà phát triển) cân nhắc và triển khai PWA, nhưng ở thị trường Nhật Bản thì vẫn còn một chặng đường khá xa.

Vì vậy, đôi khi nguồn lực cấp senior có khả năng phát triển PWA vẫn còn thiếu. Không chỉ dừng lại ở khâu phát triển, sau khi ra mắt còn cần cải tiến và bổ sung tính năng, nên hãy chú trọng xây dựng một đội ngũ vững chắc.

Miichisoft có cả đội ngũ phát triển web và đội ngũ có thể xử lý PWA, vì vậy nếu có bất kỳ điều gì cần hỗ trợ, xin đừng ngần ngại liên hệ với chúng tôi.

Chúng tôi rất mong nhận được liên hệ từ quý vị.

Xin cảm ơn quý vị.

Nguồn:
　　　freeCodeCamp (What is a PWA? Progressive Web Apps for Beginners)
　　　BrainHub (Progressive Web Application (PWA) – Beginners' Guide)