Tutorial 2x Hướng dẫn kích hoạt PWA (App) cho XenForo và cách kiểm tra chuẩn nhất

[PVS]

Hướng dẫn kích hoạt PWA (App) cho XenForo và cách kiểm tra chuẩn nhất

Từ phiên bản XenForo 2.2, chúng ta đã có thể biến diễn đàn thành một ứng dụng (Progressive Web App - PWA) xịn xò. Người dùng có thể cài icon ra màn hình chính và nhận thông báo đẩy (Push Notification).

Bài viết này sẽ hướng dẫn mọi người cách setup để hiện dòng chữ "Install the app" ngay trong Menu mobile.

1. Điều kiện cần (Prerequisites)​

Vào ACP > Setup > PWA setup. Nếu thấy dòng màu xanh "Your board meets the requirements..." là Server đã đủ điều kiện:

• Đã có HTTPS (SSL).
• Đã cài PHP extensions: gmp, mbstring, openssl.

2. Cấu hình chi tiết (Setup)​

Điền đầy đủ thông tin theo hướng dẫn dưới đây:

Thông tin cơ bản​

• Board short title: Tên ngắn (dưới 12 ký tự) để hiện dưới icon app (VD: XenForo VN).
• Enable push notifications: Tích chọn (cái này quan trọng để kéo tương tác user).

Giao diện & Màu sắc​

• Meta theme color: Chọn màu thương hiệu (màu này sẽ hiện trên thanh địa chỉ trình duyệt mobile).
• Page background color: Màu nền màn hình chờ (Splash screen).

Thiết lập Icon (Quan trọng nhất)​

Để hiện nút cài đặt, bạn bắt buộc phải upload 2 file ảnh chuẩn kích thước (định dạng PNG):

1. 1 icon cỡ 192x192 px.
2. 1 icon cỡ 512x512 px.

Mẹo: Upload lên host rồi dán link vào ô tương ứng. Nếu icon hình vuông tràn viền thì tích chọn "Icons are maskable", nếu icon trong suốt thì bỏ chọn.

3. Cách kiểm tra thành quả​

Sau khi lưu lại, đây là cách để biết bạn đã làm thành công hay chưa:

Trên giao diện Mobile (Menu)​

Dùng điện thoại truy cập diễn đàn (chưa cài app), bấm vào Menu 3 gạch (Off-canvas menu) ở góc trên.

• Kéo xuống dưới cùng của Menu.
• Nếu thành công: Sẽ xuất hiện dòng chữ "Install the app" (hoặc Cài đặt ứng dụng tùy ngôn ngữ).

Lưu ý: Nút này chỉ hiện khi trình duyệt phát hiện site bạn đủ chuẩn PWA và thiết bị chưa cài App.

Hành vi trên các hệ điều hành​

• Android (Chrome): Bấm vào nút "Install the app" trong menu sẽ hiện popup cài đặt ngay lập tức. Icon sẽ ra màn hình chính như app native.
• iOS (Safari): Do cơ chế của Apple, bạn cần bấm vào nút Share (chia sẻ) -> chọn "Add to Home Screen" thủ công.
• PC (Chrome/Edge): Sẽ hiện biểu tượng cài đặt (+) trên thanh địa chỉ trình duyệt.

4. Khắc phục lỗi thường gặp​

Nếu bạn đã làm đủ bước mà vào Mobile Menu vẫn không thấy dòng "Install the app":

• Clear Cache: Xóa cache trình duyệt trên điện thoại hoặc thử bằng Tab ẩn danh.
• Check Icon: Kiểm tra lại link ảnh icon 192/512 có chết không (90% lỗi do cái này hoặc sai kích thước).
• Style Properties: Đôi khi do tùy chỉnh giao diện (Style) mà nút này bị ẩn đi (display: none). Hãy thử chuyển về giao diện Default của XenForo để test.

Chúc các bạn thành công!

 

Bài viết chỉ thể hiện quan điểm cá nhân của tác giả và mang tính tham khảo. Chúng tôi không chịu trách nhiệm cho bất kỳ rủi ro nào phát sinh từ việc sử dụng thông tin trong bài viết.