Progressive Web App là gì ? Cách cài PWA cho WordPress ?

bởi Nguyễn Quốc Tuấn
0 bình luận

Progressive Web App (PWA) và Service Worker là một dạng ứng dụng nền web đang rất nổi trong thời gian gần đây. Bạn cứ tưởng tượng nó giống một website bình thường nhưng hỗ trợ full cho các thao tác cảm ứng, có tất cả tính năng giống như bạn xài một app bình thường: thông báo, camera, GPS, sync dữ liệu nền, NFC, Bluetooth…

Nói cách khác, nó không khác nhiều so với app, nhưng lại không cần cài đặt, không cần chờ download, và chiếm ít dung lượng bộ nhớ hơn. Vậy có phải ngon không?

PWA là gì

PWA là gì

Progressive Web App là gì?

PWA là một ý tưởng được khuyến khích bởi Google, cụ thể là nhóm phát triển Chrome.

Năm 2015, nhà thiết kế Frances Berriman và kĩ sư Chrome Alex Russell lần đầu tiên đề cập tới cụm từ “Progressive Web App” để mô tả việc tận dụng các tính năng mới của trình duyệt để cho phép người dùng xài các web app mà xịn như native app.

Cho bạn nào chưa biết:

  • Web app về cơ bản là một website nhưng được thiết kế giống như app.
  • Native app là các ứng dụng được viết ra bằng những công cụ do Apple, Google cung cấp.
  • Web app tiện ở chỗ là bạn có thể xài nó ngay, giao diện có thể tùy biến nhanh ở phía server, và dù có thể chạy trên cả máy tính, phone, tablet với giao diện co dãn tùy màn hình.
  • Native app phải cài nhưng lại có hiệu năng cao hơn, giao diện được tối ưu tốt hơn và có thể truy cập được nhiều chức năng hơn trong hệ điều hành.

Đây là một vài ví dụ:

  • Web app: Evernote.com, Word Online, Excel Online, Google Docs.
  • Native app: app bình thường đang cài trong điện thoại.
  • PWA (nên mở trên điện thoại Android để có trải nghiệm tốt nhất): NASA Open SourcePolymailTelegram

Ưu điểm của PWA

  • 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

  • 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ọ.

Service Worker là gì?

Service Worker giống như một tiến trình chạy nền của trình duyệt và tách biệt với website, điều đó cho phép website chạy các chức năng ngay cả khi bạn đang không truy cập vào nó. Đơn giản như thế này: Chrome và Safari trên máy tính cho phép bạn đăng kí nhập thông báo của các trang thương mại điện tử như Tiki, Lazada, Adayroi.

Mỗi khi những công ty này có khuyến mãi, họ sẽ đẩy thông báo xuống Chrome / Safari cho bạn xem ngay cả khi bạn đang xem web khác (Facebook, Tinh tế, VnExpress) hay thậm chí lúc bạn không mở trình duyệt. Service Worker là cái chịu trách nhiệm lấy thông báo đó xuống cho bạn.

Mở rộng ra, Service Worker cho phép PWA thực hiện các tính năng chạy nền như native app, ví dụ như notification, sync dữ liệu mới, download file, chơi nhạc + video, sử dụng dữ liệu địa điểm thời gian thực…

Nó cũng là cái đứng ra để giúp PWA có thể chạy offline: khi có mạng, PWA sẽ tải dữ liệu mới nhất từ server, còn nếu không có Internet thì nó lấy dữ liệu, giao diện, tính năng đã từng lưu trong cache để hoạt động.

Nó hoạt động như thế này

Sơ đồ hoạt động

So với Native app, PWA giúp:

  • Chạy ngay không cần cài đặt, dung lượng download ở lần đầu tiên cũng rất ít. (down nhanh hơn)
  • Không cần phải qua App Store, Play Store mà có thể tìm ngay từ Google hoặc các trang web khác.
  • Hiệu năng tiệm cận với native app cho đa số các tác vụ.
  • Khi cần update cũng rất nhanh lẹ, thậm chí không cần update qua store luôn.
  • Có thể chia sẻ nhanh chóng tới đúng trang nội dung chỉ bằng cách copy URL.

PWA và AMP

AMP (Accelerated Mobile Pages) cũng là một dạng web đặc biệt do Google nghĩ ra. Nó giống Instant Article của Facebook, tức là trang web sẽ hiển thị nội dung theo cách riêng nhằm tập trung nhiều hơn vào nội dung chính, bỏ banner quảng cáo, bỏ đi các yếu tố đồ họa rườm rà, nhấn mạnh chữ và hình ảnh.

AMP giúp bạn đọc tin tức nhanh hơn khi đi từ Google vào, băng thông 3G cũng ít hơn.

Nhưng ngặt cái AMP lại không thể tương tác nhiều, nó là một trang HTML tĩnh và chủ yếu chỉ dành để đọc nội dung thôi chứ để comment, reply hay những tính năng khác là chuyện không thể (khi đi từ Google vào, còn nếu load riêng thì không tính), bạn buộc phải chuyển về web full mới làm được trò đó.

Google nhận biết rõ điều đó, và họ có một cách khá thông minh để giải quyết vụ này: lần đầu web load lên sẽ là AMP, nhưng lần sau sẽ chuyển sang dùng PWA với Service Worker. Developer nào quan tâm thì hãy vào link này để xem thêm.

Vẫn còn phải một thời gian nữa PWA mới có thể được áp dụng rộng rãi, và cũng còn rất lâu nữa PWA mới thay được hoàn toàn cho web app truyền thống hoặc native app.

Cài đặt PWA và Service Worker cho WordPress

Ok văn vở nãy giờ đủ rồi, bây giờ Hướng dẫn WordPress cơ bản sẽ hướng dẫn các bạn cách cài đặt PWA và Service Worker cho website WordPress của mình.

Lợi ích:

  • Có thể chạy offline được khi không có mạng.
  • Biến website thành một web app trên Hệ điều hành Android.
  • Load cái vèo.

Bước 1: cài đặt plugin PWA

Vào mục plugin và tải plugin PWA về.

Progressive Web App

Cài đặt và kích hoạt plugin Progressive Web App

Bước 2: Cấu hình tab Dashboard

Sau khi đã cài đặt xong plugin thì vào Dashboard của PWA tiến hành cấu hình như sau:

Giao diện Dashboard của PWA và Service Worker

Nếu muốn PWA và Service Worker xuất hiện ở phiên bản AMP hoặc non AMP thì bạn click vào dấu x màu đỏ là xong.

Dashboard PWA và Service Worker

Sau khi click thì sẽ được như thế này

Bước 3: Cấu hình tab Setup

 setup tab

Ở tab này các bạn cần phải điền đầy đủ thông tin như:

App Name / App Short Name: tên hiển thị của app khi xuất hiện trên di động.

App Description: mô tả cho app.

App icon: icon hình ảnh của app. (kích thước: 192 x 192 nhé)

App Splash Screen Icon: đây là hiệu ứng hiển thị hình ảnh trước khi mà app bắt đầu hoạt động. Để dễ hiểu hơn mình sẽ giải thích rõ 1 tí như thế này:

  • Splash Screen là một màn hình đặc biệt, màn hình này được hiển thị đầu tiên nhất khi bạn mở một ứng dụng.
  • Splash Screen Icon thường có kích thước 512 x 512 trở lên.
  • Thông thường thì Splash Screen sẽ hiển thị logo của ứng dụng, nhiều app còn để câu slogan lên đó, có khi còn có thông tin version của ứng dụng đó nữa, vân vân…
  • Splash Screen thường chỉ xuất hiện rất nhanh, dài lắm cũng chỉ khoảng vài giây. Ví dụ như của anh Youtube:

Bạn có thể thấy icon Youtube xuất hiện trước khi hiển thị các video bên trong. Thì đây gọi là icon Splash Screen.

Offline page: là trang thông tin mà app sẽ hiển thị khi thiết bị không có kết nối tới internet. Thường thì mình sẽ cho trang landing page hoặc trang blog.

404 page: là trang sẽ hiển thị khi hiển thị một địa chỉ không tồn tại trên website.

Start page: là trang sẽ hiển thị đầu tiên khi bạn mở app lên. Thường thì mình sẽ cho trang landing page hoặc trang blog.

Orientation: kích thước khổ hiển thị. Bạn có thể chọn Portrait (chân dung) cũng được. Không có sao cả.

Display: các bạn cứ để mặc định là standalone nhé.

Như vậy là mình đã hướng dẫn các bạn cài đặt PWA & Service Worker xong rồi đấy.

Nếu muốn xem cấu hình của mình đã hoạt động được trên website hay chưa thì các bạn vào trang WebPagetest Lighthouse Test và nhập tên miền website của mình vào.

Test PWA trên trình duyệt

Kết quả xanh lè như hình là đã cấu hình ok rồi nhé:

Test Progressive Web App và Service Worker

Test Progressive Web App nhìn xanh lè thích nhỉ ?

Để website hiển thị thành app trên điện thoại thì các bạn làm theo cách sau:

  • Bước 1: vào trình duyệt gõ tên domain website của mình vào đó.
  • Bước 2: đợi load hoàn tất toàn bộ trang chủ.
  • Bước 3: nhấn vào menu của trình duyệt và chọn “Thêm vào màn hình chính”
  • Bước 4: nhập tên cho app.
  • Bước 5: ra màn hình chính coi có chưa nha.

Các bạn làm thử xem có được không. Hãy để lại 1 comment hoặc thấy hay thì cho Cuồng Team 1 share nhé.

Cuồng Team cảm ơn mọi người rất nhiều !

(Visited 417 times, 1 visits today)
5 1 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x