Progressive Web Apps: Lắp đầy khoảng cách giữa Web và Mobile

Trong bài viết này, chúng ta sẽ tìm hiểu cơ bản về progressive web app (PWA), xem xét một vài trường hợp thực tế, và khám phá cách cách dùng và tính huống có thể áp dụng hiệu quả PWA.

Ngày nay, đa phần chúng ta đều kết nối đến internet khi ta đi bất cứ đâu. Tuy vậy, vẫn có một lượng lớn người dùng vẫn có kết nối khá gián đoạn (đặc biệt là những ai dùng mạng di động là chính, dùng kết nối internet chung,…). Và để phục vụ những người dùng này, yêu cầu chúng ta phải có dòng thông tin khác đi.

Chúng ta có thể thu hút và núi giữ người dùng có internet gián đoạn bằng cách cho phép họ tiếp tục lướt offline với những trang họ đã và thường hay truy cập.

Ta còn có thể dùng dữ liệu cached và hàm chương trình cho mục đích này, cho ra tương tác tương tự như ứng dụng di động, nhưng lại không cần người dùng tải ứng dụng qua app store, và như vậy, cũng không cần phải summit luôn.

Progressive Web App là gì?

Để hiểu rõ về PWA, chúng ta nên 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ó bốn yêu cầu (được giải thích rõ bên dưới) xác định một PWA, hiện được Google Chrome, Opera và Samsung Internet hỗ trợ.

Khi bốn đ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.

Becoming Progressive

Để một site online được công nhận là có cài đặt progressive web app trên server (và như thế sẽ hiện yêu cầu “Add To Home Screen” cho người dùng) cần bốn yêu cầu sau theo như Google đặt ra:

  • 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

Một site phải được visit hai lần với 5 phút tạm nghỉ để đạt yêu cầu

Trong Google Chrome, người dùng cần phải truy cập site host PWA hai lần trước khi trình duyệt hiện đề nghị cài đặt PWA.

Đây không phải là hình thái xác minh chuẩn nhất, nhưng có vẻ vẫn làm việc khá tốt, vì lượt truy cập đầu tiên người dùng sẽ không bị oan tạc ngay với hộp yêu cầu chiếm đến 25% màn hình di động, và hơn nữa, nó đảm bảo người dùng phải thích trang đó, vì họ cũng đã truy cập đến hai lần rồi.

Tuy nhiên, đây vẫn là phương pháp đơn giản nhằm xác định độ liên quan và thích thú của người dùng. Hiện nay Google vẫn khá hài lòng với phương pháp giải quyết “thô sơ” này, nhưng có thể sẽ được cải thiện trong tương lai không xa.

Chuẩn kết nối HTTPS đạt chuẩn

Với kết nối bảo mật đến PWA, người dùng có thể cảm thấy an toàn hơn khi cấp quyền cho chúng.

Vì network request được định tuyết qua service worket script, thêm https vào server có thể giúp chống lại một số khuyết điểm nhất định như snooping.

Kết nối bảo mật còn giúp xây dựng niềm tin nơi người dùng. Và vì PWA có thể được search engine index, nên ta có thể serve trên TLS để tận dụng một chút lợi thế về SEO.

Có cài đặt JSON Manifest

Với việc cung cấp data extract ở dạng JSON, hoàn toàn có thể cached thông tin này với sự trợ giúp của service worker, và rồi sử dụng app shell để load CSS rute để deliver phiên bản offline có đầy đủ chức năng UI.

Mỗi khi người truy cập load một page mới, service worker sẽ cache JSON extract, và lưu trữ (vật lý) nó trong app shell. App shell này là self-contained wrapper có tất cả style sheet, script, image, font và HTML output cần thiết để người dùng render cả page mà không phải load bất cứ thứ gì khác.

So với website, PWA có khả năng hiện data ngay cả khi người dùng không còn kết nối vào internet.

Có cài đặt Service Worker

Đây là phần cốt lõi của bất kỳ PWA hiện đại nào. Service worker chịu trách nhiệm cache tất cả file, serve push notifications, content update, data manipulation,…

Cần nhớ rằng script này làm việc độc lập khỏi bất kỳ ứng dụng hoặc website nào đã có trên web server, làm việc với event listener và các lệnh như “fetch” (giống với lệnh “Get/Post/Set”).

Thông qua việc listen theo bất cứ network request nào trên server, nhưng được đặt dưới dạng file .js trên thiết bị của người dùng, service worker sau đó sẽ thao túng những event này với phản hồi phù hợp (tùy vào việc có internet hay không), tạo điều khiện cho offline page tùy chỉnh.

Hơn nữa, ta còn có thể hiển thị nội dung tùy chỉnh ngay cả khi người dùng offline, dựa trên cache data đã có của họ. Bộ data này còn chi phối được, có nghĩa là chúng ta có thể code functions dùng cache data làm biến và tham số — tất nhiên, nếu áp dụng được với các dự án tương ứng.

Điều này đồng nghĩa, tuy lần load đầu tiên có thể mất vài giây, những lần load tiếp theo tận dụng service worker sẽ nhanh hơn rất nhiều.

Một khi bốn yêu cầu này được kết hợp đúng cách, người dùng trên điện thoại Android và các thiết bị được hỗ trợ khác sẽ được đề nghị thêm PWA đó vào home screen của họ, tại đó nó sẽ có icon trong giống như ứng dụng thông thường và sẽ mở lên trong trình duyệt.

Developer có trách nhiệm đảm bảo UI thân thuộc với website và ứng dụng đã có, hoặc có thể phát triển một UI hoàn toàn mới cho người dùng PWA. Sự tự do trong lựa chọn cũng là một điểm thu hút lập trình viên quna tâm đến xu hướng mới này.

Progressive Web Apps: Được và Mất

Progressive web apps mang trong mình những thế mạnh:

  • Tốc độ và hiệu năng tốt hơn so với website
  • Bảo mật
  • Khả năng offline
  • 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

Tuy vậy, vẫn có một số khuyết điểm:

  • 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

Các trường hợp sử dụng

Với một số kiểu website và ứng dụng di động, thông thường PWA được phát triển khi cả hai không thỏa mãn được người dùng.

Một điều cần lưu ý nữa, tuy người dùng vẫn có thể đọc, thêm hàng vào giỏ,… trong offline mode, họ sẽ vẫn cần kết nối internet để lấy thêm dữ liệu mới, update thông tin profile hoặc thêm đơn hàng.

PWA có thể giúp lưu trữ dữ liệu trong lúc người dùng được kết nối trở lại, nhưng trong một số trường hợp cụ thể, như paywall news sites. site này thường sẽ không có ý muốn hiển thị dữ liệu này khi người dùng không cách nào click quảng cáo, hoặc tham gia đăng ký,…

Hiện nay có nhiều loại PWA trên web. Một số kiểu hoạt động giống như ứng dụng hoàn toàn độc lập không khác gì native app, như RioRun của Guardian.

Các kiểu khác tích hợp service worker vào các website đã có của họ, thêm khả năng hoạt động offline thông qua các lớp website đã có (như The Washington Post), tại đây nếu bạn lướt web của họ và mất kết nối, bạn vẫn có thể đọc vài viết, và được đưa đến một page offline được code đặc biệt, bạn sẽ chơi tạm vài game crossword trong khi chờ online trở lại.

FlipKart báo cáo tăng chuyển đổi hơn 70%, AliExpress tăng hơn 104% chuyển đổi với người dùng mới so với website.

Konga (trang bán lẻ Nigeria) cũng cho biết họ giảm được lượng data sử dụng đến 92%, đồng nghĩa với cải tiến mạnh trong thời gian load của page. Với userbase của họ (với một lượng lớn vẫn dùng mạng 2G), PWA có tiêm năng cách mạng hóa web trong các quốc gia có data đắt đỏ và chậm chạp.

Tóm lại

Đến nay, PWA cho thấy kết quả khá ấn tượng, với thành công to lớn về tỷ lệ chuyển đổi, bounce rate, và tăng hiệu năng ấn tượng.Kết hợp với mong muốn của chủ website và doanh nghiệp trước trải nghiệm giống-ứng dụng mà không cần native development, tương lai của PWA tỏ ra khá lạc quan.

Hầu như bất kỳ kiểu kinh doanh nào cũng được lợi từ service worker vì nó giúp giảm load time mạnh mẽ. Không phải website nào cũng cần tính năng offline, và không phải website nào cũng chú tâm đến conversion hay bounce rate. Tuy nhiên, với những lợi ích chỉ từ một hệ thống đơn giản, những công nghệ như thế này không bổ ngang cũng bổ dọc.

Techtalk via sitepoint