×

Cách tích hợp PWA đơn giản vào website WordPress

Đầu tiên bạn cần phải Progressive Web App (PWA) là gì?

PWA (progressive web apps) là dạng web app được xây dựng dựa trên các công nghệ của website, nhưng mang lại trải nghiệm tương tự như Native App. Nhờ vào tính năng của service worker, manifest và https, PWA có thể hoạt động offline ngay cả khi không có mạng. Khi người dùng vào website PWA thông qua trình duyệt trên mobile, họ có thể cài đặt website PWA trong điện thoại. Sau đó, họ có thể truy cập trở lại website thông qua icon ngay trên điện thoại, tương tự như khi họ click vào một icon của native app để truy cập phần mềm vậy.

Cách tích hợp PWA đơn giản vào website WordPress
Trang web được trình duyệt hiển thị thêm nút tải về để sử dụng như một ứng dụng

Ưu điểm

– Ứng dụng PWA có dung lượng nhẹ hơn nhiều so với native. Nếu native web có dung lượng lên đến 200MB thì với progressive web app, nó chỉ còn dừng lại ở mức KBs.
– Trong ứng dụng web progressive web app không cần phải có mã nguồn native.
– Thay vì việc bạn phải vào kho ứng dụng để tải và cài đặt ứng dụng vào máy thì bây giờ, với progressive web app, bạn chỉ cần mở một website là đã có được sự trải nghiệm. Điều này giúp giảm thiểu sự nỗ lực tiếp cận khách hàng một cách hiệu quả.
– Tiết kiệm lượng lớn thời gian cho việc phát triển và phát hành, cập nhật những phiên bản mới nhất.
– So với ứng dụng native thông thường thì progressive web app hỗ trợ deep links tốt hơn.
– Tính năng bảo mật tốt và có thể truy cập ngay cả khi thiết bị của bạn không kết nối internet.

Nhược điểm

– Hỗ trợ các trình duyệt và Native API access còn hạn chế.
– Không thể truy cập vào kho ứng dụng appstore.
– Khó khăn trong việc tìm kiếm và sử dụng PWA vì tuỳ từng trường hợp mà nó sẽ sử dụng từng link khác nhau cho cấu trúc page.

Cách tích hợp PWA đơn giản vào website WordPress
Biểu tượng trang web được hiển thị như một ứng dụng trên menu Windows 11

Cách tích hợp PWA vào website WordPress

Bước 1: Tạo icon cho ứng dụng web PWA

Đầu tiên các bạn cần tạo cho mình 4 icon (có thể tạo 1 hoặc 2 cũng được, nhưng 4 là đầy đủ nhất) với các kích thước 512×512 px, 384×384 px, 256×256 px, 192×192 px (icon này bạn sử dụng biểu tượng web của mình để làm, nó đảm nhận chức năng hiển thị icon lên màn hình điện thoại hay máy tính như một ứng dụng khi ta cài đặt ứng dụng web của mình lên đó, lưu ý icon được tạo phải sử dụng định dạng file là png nhé).

– Đặt tên các icon vừa tạo theo kích thước lần lượt là (512×512.png , 384×384.png , 256×256.png , 192×192.png).
– Sau khi tạo xong icon, bạn truy cập vào thư mục theme mà website của bạn đang sử dụng, trong thư mục theme, bạn tạo cho mình một thư mục mới có tên là pwa, sau đó tải lên 4 icon đã tạo vào thư mục mới này.

Bước 2: Tạo file manifest.json

Manifest.json đóng vai trò rất quan trọng trong việc tạo web PWA, nó là file hiển thị thông tin website của mình sao cho giống với một ứng dụng Native App.

– Tại thư mục theme mà bạn đang sử dụng, bạn hãy tạo cho mình một file mới có tên là Manifest.json
– Mở file Manifest.json vừa tạo lên, thêm vào nội dung code như bên dưới vào

{
"background_color": "#fffff",
"description": "Nội dung giới thiệu về web của bạn",
"dir": "ltr",
"display": "standalone",
"name": "Tên ứng dụng",
"orientation": "any",
"scope": "/",
"short_name": "Tên ứng dụng",
"start_url": "/",
"theme_color": "#ffffff",
"icons": [
{
"src": "/pwa/192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/pwa/256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/pwa/384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/pwa/512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

Thêm nội dung giới thiệu về web của bạn vào code trên, và thay tên 2 vị trí tên ứng dụng mà bạn muốn đặt vào, có 2 phần #fffff (mã màu) bạn có thể thay mã màu tuỳ thích của bạn vào. Sau khi thêm vào nội dung xong thì lưu file lại.

Bước 3: Thêm 2 file pwabuilder-sw-register.js và pwabuilder-sw.js vào website

Hai 2 file này được cung cấp bởi pwabuilder, có vai trò cực kỳ quan trọng, nó giúp website của bạn trở thành một web PWA thục thụ, mình không am hiểu để có thể diễn ta được cơ chế rõ ràng của nó, nhưng rõ ràng là 2 file này có file trò kết nối website của bạn làm việc với trình duyệt, từ đó những trình duyệt nào được tích hợp công nghệ PWA sẽ hiểu và tạo không gian để lưu trữ nội dung website như một ứng dụng.

Tải file pwabuilder-sw-register.js, pwabuilder-sw.js

Sau khi tải và giải nén 2 file trên, bạn mở thư mục góc chứa mã nguồn website của bạn lên, đối với VPS thường là thư mục html, đối với hosting thường là thư mục public_html. upload 2 file vừa tải về lên đó, ngang hàng với mã nguồn website của bạn.

Bước 4: Nhúng Manifest.json vào header.php

Bước này là bước cuối cùng để hoàn thiện website của bạn trở thành một web PWA .
– Trong thư mục theme mà bạn đang sử dụng, mở file header.php lên, và thêm vào code bên dưới sao cho nằm trên thẻ đóng </head>.

<!-- PWA cho web -->
<link rel="manifest" href="<?php echo get_template_directory_uri() ?>/manifest.json" />
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
const el = document.createElement('pwa-update');
document.body.appendChild(el);
</script>

Cách kiểm tra xem web đã được tích hợp PWA chưa?

Cách 1: Truy cập vào trang web: https://www.pwabuilder.com

Cách tích hợp PWA đơn giản vào website WordPress
Bạn nhập địa chỉ web của mình vào ô bên dưới, sau đó nhấn Start để kiểm tra
Cách tích hợp PWA đơn giản vào website WordPress
Nếu hiển thị đầy đủ các thông tin như hình trên, thì xin chúc mừng bạn, trang web của bạn đã được tích hợp PWA

Cách 2: Sử dụng công cụ F12 huyền thoại trên trình duyệt Google Chrome

Cách tích hợp PWA đơn giản vào website WordPress
Vào tab Application > Manifest để xem trình duyệt hiển thị thông tin về trang web của bạn
Cách tích hợp PWA đơn giản vào website WordPress
Xem qua phần Service Workers xem nó có hoạt động không nhé
Cách tích hợp PWA đơn giản vào website WordPress
Ở phần Storage này là trình duyệt đang lưu trữ trang web của bạn như một ứng dụng

Kết luận

– Việc tích hợp PWA vào website WordPress được cung cấp bởi pwabuilder.com, các bạn có thể truy cập vào trang web này để tham khảo thêm. ở đây mình chỉ làm theo và chia sẻ cho các bạn dễ hiểu, khách quan mà nói thì sau khi được tích hợp vào web, nó cũng giúp cho trang web chạy nhanh hơn vì đã được trình duyệt lưu trữ nội dung ở lần truy cập trước đó.
– Mình khuyến khích anh em nên làm thử để trãi nghiệm, nếu cảm thấy không thích thì có thể xoá đi là xong. 
– Sau một thời gian sử dụng PWA, thì mình nhận thấy là trang web không được làm tươi ngay tức thì, điều này khiến cho trãi nghiệm người dùng trên trang web của bạn trở nên tệ đi.
Chúc các bạn thành công!

951
"Nếu bạn cảm thấy bài viết này hữu ích, bạn có thể ủng hộ cho tác giả một tách Cafe"
THANH TOÁN ỦNG HỘ
Sacombank
NGUYEN NGOC HOAN
040086597979
Đọc thêm bài khác
×
Chia sẻ trang này tới
QR:  Cách tích hợp PWA đơn giản vào website WordPress