12.04.18

PWA Progressive Web App – Tương lai của lập trình ứng dụng di động?

5/5 - (3 bình chọn)

Progressive Web Apps hay còn gọi là PWA được nhắc đến liên tục trong thời gian gần đây. Liệu đây là xu hướng nhất thời hay PWA sẽ là tương lai mới cho website và mCommerce (thương mại điện tử trên di động)?

PWA là gì?

Progressive Web Apps (PWA) là sự kết hợp các ưu điểm tốt nhất của web và các ứng dụng trong điện thoại (native app) trên máy tính bảng và điện thoại thông minh.

Thông thường, doanh nghiệp muốn bán hàng trên website, và họ cũng muốn người dùng di động tiện hơn khi mua hàng qua điện thoại với các chức năng như push notification (gửi thông báo qua điện thoại), nhắc nhở. lưu trữ bộ sưu tập. Khi đó họ phải chi trả cho việc làm một website, và cũng là thêm 1 native app trên Google Play Store hoặc Apple Store.

PWA sinh ra để giúp website của bạn có những chức năng và tương tác trong di động người dùng như một native app. Nhưng cùng lúc đó, lại giúp bạn không cần phải làm thêm IOS App hay Android App.

PWA cho phép bạn duyệt 1 web trên trình duyệt di động bình thường. Tuy vậy, trang web này có thể biến thành một ứng dụng di động/tablet ngay trong máy tùy vào nhu cầu sử dụng.  Khi người dùng truy cập vào web, họ sẽ nhận được lời mời cài đặt trang web đó vào điện thoại của họ. Nếu người dùng chấp nhận, họ có thể mở và duyệt website tương tự 1 ứng dụng trên điện thoại của mình.

Morzilla Firefox định nghĩa PWA như sau: eveloper.mozilla.org/en-US/Apps/Progressive. Cụ thể với các định nghĩa dưới đây”

  • Discoverable: Được xác định là một ứng dụng, có thể được tìm thấy bởi các công cụ tìm kiếm.
  • Installable: Có sẵn trên thiết bị, màn hình chính, mà không cần đến sự can thiệp của chợ ứng dụng (app-stores)
  • Shareable: Dễ dàng chia sẻ thông qua URL, không cần quy trình cài đặt phức tạp.
  • Independent network: Có thể sử dụng được độc lập khi không có mạng hoặc mạng yếu
  • Progressive: Tất cả người dùng đều có thể sử dụng được, bất kể trình duyệt họ sử dụng là gì.
  • Re-engageable: Giúp người dùng dễ dàng sử dụng, kể cả khi họ không dùng thiết bị của chính mình.
  • Adaptive: Thích hợp cho tất cả các định dạng: máy tính bàn, máy tính bảng, di động, v…v
  • Safe: Cơ chế phân phối tránh được gián điệp, và đảm bảo rằng nội dụng không bị giả mạo.

Hiệu quả trực tuyến? Nó hoạt động ra sao? 

Một trong số những lí do chính khiến người dùng thích sử dụng ứng dụng di động (native app): Bất kể bạn dùng mạng gì (Wifi, 4G, 3G, v…v), thì bạn cũng có thể truy cập vào cơ sở dữ liệu có sẵn trong đó dễ dàng. Và PWA cũng có được điều này, nó chứa các tập lệnh chạy ẩn tách biệt khỏi trang web, cho phép bạn lưu trữ nội dung, cập nhật, nhận thông báo và chạy PWA mà không cần đến kết nối internet.

Trong hầu hết các trường hợp, các PWA sẽ là những trang đơn, và khi nó được tải lên lần đầu tiên, Shell sẽ được lưu trữ.

Ứng dụng Shell là gì?

Ứng dụng Shell là phần tĩnh của trang, với số lượng HTML/CSS  tối thiểu vừa đủ để hiển thị giao diện người dùng của trang web. Nó chỉ bao gồm UI chứ không chứa dữ liệu động.

Làm thế nào để cài đặt PWA?

Bạn không cần phải cài đặt PWA. Tính năng ‘Thêm vào màn hình chính’ cho phép khách truy cập web thêm biểu tượng shortcut vào điện thoại. Một khi người dùng mở biểu tượng, hiệu ứng động sẽ được tải về,  và giờ không còn giao diện của trình duyệt web (như thanh URL, icon điều  hướng của trình duyệt) mà hiển thị tương tự một ứng dụng ta tải về máy .

Để có thêm được chức năng ‘ Thêm vào màn hình chính’, bạn cần Manifest App.

Manifest App là gì?

Manifest App là 1 tệp JSON cho phép bạn có thể kiểm soát việc hiển thị ứng dụng của bạn trên màn hình di động của người dùng.  Nó bao gồm: tên của ứng dụng, kích thước của biểu tượng, màn hình khởi động chờ (splash screen)

PWA không hoạt động trên Apple?

Service worker và Manifest App hiện tại chưa thể hoạt động với Safari, nhưng chúng cũng vẫn được nghiên cứu để đưa vào sử dụng. Do đó, PWA được kỳ vọng là sẽ sớm có mặt trên tất cả các trình duyệt, và hệ điều hàng (Android và iOS). Chúng ta hãy cùng hy vọng là nó sẽ thành công để có thể chứng minh được rằng PWA thực sự hiệu quả, ngay cả trên iPhone.

PWA và Magento

Magento team hiện đang nghiên cứu trên PWA Studio của họ (Magento PWA Studio) sẽ có sẵn từ phiên bản 2.3 trở lên vào năm 2018. Tất cả các phiên bản đều dựa trên React và Redux.

Với bạn và Sutunam?

Chúng tôi tin tưởng vào sự thành công của các website sử dụng PWA khi đã làm với vài responsive website các năm trước. Chúng tôi đã sẵn sàng cùng bạn đồng hành trong quá bước phát triển mới này. Chúng tôi đã nghiên cứu về PWA từ khi nó mới ra đời, và chúng tôi hoàn toàn tự tin rằng mình có thể hỗ trợ bạn nếu bạn muốn vượt qua được đối thủ cạnh tranh.

Do đó, đừng ngần ngại, hãy liên hệ với chúng tôi để được hỗ trợ và giải đáp mọi thắc mắc sớm nhất!

Về Kieu Anh Ngo

Production Coordinator tại Sutunam