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

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.
Ư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.
  • Cảm giác giống ứng dụng.
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.

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

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.