Tích hợp Progressive Web Apps vào website WordPress

Progressive Web Apps là gì? Hướng dẫn tích hợp Progressive Web Apps vào website WordPress.

Bạn đã kiểm tra hiệu suất website của mình với Google Lighthouse theo hướng dẫn của tôi trong bài viết hôm trước chưa? Nếu rồi thì chắc hẳn bạn đã nhìn thấy rất nhiều thông báo lỗi trong mục Progressive Web Apps (PWA) phải không nào? Vậy thì Progressive Web Apps là gì? Tại sao bạn nên tích hợp nó vào website của mình? Làm thế nào để tích hợp PWA vào website WordPress? Bài viết hôm nay sẽ cho bạn câu trả lời đầy đủ và chi tiết nhất.

Tham khảo thêm:

• Đánh giá hiệu suất website với Google Lighthouse
• Trang dành cho thiết bị di động được tăng tốc (AMP)

Progressive Web Apps là gì?

PWA hay ứng dụng web tiến bộ, là một ý tưởng được cổ vũ và khuyến khích bởi Google, cụ thể là nhóm phát triển trình duyệt Google 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 Apps” để 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. Nói một cách dễ hiểu, nó có thể xem là con lai giữa web app và 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ế giao diện giống như app. Web app tiện ở chỗ bạn có thể dùng nó ngay mà không cần cài đặt, giao diện có thể tùy biến nhanh ở phía server lưu trữ. Nó có thể chạy trên cả máy tính, điện thoại di động, máy tính bảng với giao diện co dãn tùy theo kích thước màn hình (responsive).
• Native app là các ứng dụng được viết ra bằng những công cụ do Apple, Google hay Microsoft cung cấp. Native app buộc bạn phải cài đặt mới sử dụng được. Nhưng bù lại nó 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.

Progressive Web Apps bao gồm những gì?

Theo Google, PWA bao gồm các đặc tính như sau:

• Progessive: phải sử dụng được với tất cả mọi người, không quan trọng họ đang dùng trình duyệt web gì.
• Responsive: dùng được với mọi thiết bị (desktop, mobile, tablet) và mọi kích thước màn hình.
• Không phụ thuộc vào kết nối internet: Service Worker cho phép chạy offline hoặc trên các kết nối internet rất chậm.
• App-like: cảm thấy giống như đang xài native app, từ cách điều hướng cho đến giao diện. Độ mượt, độ phản hồi cũng phải nhanh tương ứng.
• Fresh: luôn cập nhật nhanh nhờ Service Worker.
• Safe: sử dụng HTTPS để tăng tính an toàn, tránh bị đánh cắp thông tin dọc đường.
• Discoverable: khi người dùng truy cập vào PWA, nó sẽ được xác định như là một ứng dụng (app). Lúc đó, trình duyệt web sẽ tự ẩn thanh địa chỉ và các thành phần khác của trình duyệt web truyền thống, chỉ để lại một mình app với giao diện của nó. Đây là thứ mà web app bình thường không thể làm được.
• Re-engageable: sử dụng notification và các phương tiện khác để thu hút người dùng quay lại app.
• Installable: có thể “cài” app lên máy và hiện lên home screen để mở app dễ dàng hơn.
• Linkable: có thể chia sẻ nhanh nội dung bằng URL mà không đòi hỏi các cài đặt phức tạp.

Một ví dụ về PWA:

Thông tin chi tiết về Progressive Web Apps, các bạn có thể tham khảo thêm tại đây.

Progressive Web Apps cần những gì để hoạt động?

Về cơ bản, PWA sẽ cần 3 thành phần sau:

• Service Workers
• Web App Manifest
• HTTPS

Trong đó Service Workers 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. Nó cho phép website chạy các chức năng ngay cả khi bạn đang không truy cập. 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ư: tải thông báo, đồng bộ dữ liệu mới, download file, chơi nhạc và 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ó kết nối internet, PWA sẽ tải dữ liệu mới nhất từ server. Khi không có kết nối internet thì nó sẽ lấy dữ liệu, giao diện, tính năng đã từng lưu trong cache để hoạt động.

Web App Manifest cho phép trang web có thể được cài đặt trên màn hình chính của thiết bị mà không cần cửa hàng ứng dụng cùng với các tính năng khác như làm việc ngoại tuyến và nhận thông báo đẩy (push notification). Web App Manifest được triển khai trong các website bằng cách sử dụng phần tử liên kết trong phần đầu của tài liệu:

<link rel="manifest" href="/manifest.webmanifest">

Nội dung của nó sẽ tương tự như thế này:

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

Còn HTTPS, không cần nói chắc nhiều bạn ở đây cũng đã biết, sẽ giúp mã hóa dữ liệu, đảm bảo an toàn cho kết nối giữa server với thiết bị của người dùng. Cho nên, nếu bạn muốn xây dựng Progressive Web Apps, trước tiên hãy cài SSL cho website của mình đi nhé.

Tham khảo thêm:

• Cài SSL cho WordPress trong nháy mắt với plugin Really Simple SSL
• Hướng dẫn chuyển từ HTTP sang HTTPS không bị mất thứ hạng

Tích hợp Progressive Web Apps cho WordPress

Trong WordPress, các bạn có thể tích hợp PWA cho website một cách dễ dàng thông qua các plugin có sẵn như Minimum Configuration WordPress PWA hay Smart PWA. Cách cài đặt và cấu hình chúng cũng khá đơn giản nên tôi sẽ không hướng dẫn thêm.

Tuy nhiên, plugin mà tôi muốn khuyên dùng trong bài viết này không nằm trong số kể trên mà là PWA được phát triển bởi chính Google và Automattic (đơn vị chủ quản của WordPress). Mặc dù nó chỉ mới ở giai đoạn sơ khai và chưa thể hoạt động offline được nhưng xài hàng chính chủ thì vẫn yên tâm hơn phải không nào.

Tất cả những gì mà bạn phải làm hiện giờ là cài đặt và kích hoạt plugin PWA.

Sau đó, truy cập vào Appearance => Customize => Site Identity => Site Icon và thiết lập site icon cho website nếu bạn chưa làm trước đó. Kích thước được khuyến cáo là tối 512 x 512 pixel.

Kiểm tra lại website với Google Lighthouse, bạn sẽ thấy phần lớn các vấn đề với Progressive Web Apps đã được giải quyết. Việc của chúng ta là chờ các nhà phát triển tích hợp nốt Service Workers vào mà thôi.

Thật đơn giản phải không nào? Chúc các bạn thành công!

Bạn có đang tích hợp Progressive Web Apps trên website của mình? Bạn đã sử dụng cách gì để làm điều đó? Hãy chia sẻ với chúng tôi những kinh nghiệm quý giá của bạn trong khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)