Tutorial 2x Hướng dẫn cài đặt Progressive Web App (PWA) có sẵn trong XenForo 2.3

[PVS]

Xem nhanh

Ẩn Hiện

Các điều kiện tiên quyết​

Cấu hình PWA trong Admin Control Panel​

Tên và Mô tả Ứng dụng​

Kích hoạt Thông báo đẩy (Push Notifications)​

Tùy chỉnh Giao diện và Màu sắc​

Bước quan trọng nhất: Chuẩn bị và Tải lên Icons​

Bước 3.1: Chuẩn bị file Icon​

Bước 3.2: Tải Icon lên trong AdminCP​

Kiểm tra thành quả​

Kết luận​

Hướng dẫn cài đặt Progressive Web App (PWA) có sẵn trong XenForo 2.3

Hãy tưởng tượng người dùng có thể "cài đặt" diễn đàn của bạn lên màn hình chính điện thoại, nhận thông báo đẩy, và có trải nghiệm như một ứng dụng thực thụ. Đó chính là sức mạnh của Progressive Web App (PWA), một tính năng được tích hợp sẵn trong XenForo 2.3.

Việc kích hoạt PWA sẽ nâng tầm diễn đàn của bạn, mang lại trải nghiệm người dùng hiện đại và tăng cường sự gắn kết. Bài viết này sẽ hướng dẫn bạn từng bước cấu hình chính xác dựa trên các tùy chọn có sẵn trong Admin Control Panel.

Các điều kiện tiên quyết​

Trước khi bắt đầu, hãy đảm bảo diễn đàn của bạn đáp ứng các yêu cầu kỹ thuật sau:

1. HTTPS là bắt buộc: Diễn đàn của bạn phải được cài đặt và hoạt động hoàn toàn trên giao thức HTTPS.
2. Yêu cầu PHP cho Thông báo đẩy: Để tính năng thông báo đẩy (Push Notifications) hoạt động, máy chủ của bạn cần cài đặt sẵn các extension PHP: gmp, mbstring, và openssl. Hầu hết các hosting hiện đại đều có sẵn các extension này.
3. Quyền truy cập máy chủ: Bạn cần có quyền truy cập vào máy chủ qua FTP hoặc Trình quản lý File (File Manager) để có thể tải lên các file biểu tượng (icon).

Cấu hình PWA trong Admin Control Panel​

Tất cả các thiết lập chính đều nằm tại một nơi duy nhất. Hãy truy cập: AdminCP > Setup > PWA setup.

Tên và Mô tả Ứng dụng​

Các thông tin này sẽ được hiển thị khi người dùng cài đặt PWA.

• Board title: Tên này được lấy trực tiếp từ thiết lập chung của diễn đàn.
• Board short title: Nhập một tên ngắn gọn (dưới 12 ký tự) để hiển thị bên dưới biểu tượng ứng dụng trên màn hình chính (ví dụ: "VnXF").
• Board meta description: Mô tả này cũng được lấy từ thiết lập chung của diễn đàn.

Kích hoạt Thông báo đẩy (Push Notifications)​

Đây là một trong những tính năng giá trị nhất của PWA.

• Để bật, chỉ cần tick vào ô Enable push notifications.
• Lưu ý quan trọng: Như đã đề cập, bạn chỉ có thể bật tùy chọn này nếu máy chủ đã có đủ các extension PHP cần thiết. Nếu không, XenForo sẽ hiển thị cảnh báo.

Tùy chỉnh Giao diện và Màu sắc​

Các màu sắc này ảnh hưởng đến thanh tiêu đề và nền của ứng dụng khi nó được mở lên.

• Meta theme color: Mặc định lấy theo màu của header (@xf-publicHeader-background-color).
• Page background color: Mặc định lấy theo màu nền nội dung (@xf-contentBg).
  (Bạn có thể tùy chỉnh các giá trị màu này trong Style properties của style đang dùng nếu muốn thay đổi.)

Bước quan trọng nhất: Chuẩn bị và Tải lên Icons​

Đây là bước quyết định giao diện cho PWA của bạn trên thiết bị người dùng. Rất may mắn, XenForo cho phép bạn tải lên icon một cách trực tiếp.

Bước 3.1: Chuẩn bị file Icon​

1. Bạn cần tạo ra 2 file ảnh logo hình vuông, định dạng PNG:
   • Một file kích thước 192x192 pixels.
   • Một file kích thước 512x512 pixels.
2. Tùy chọn Maskable (Rất nên làm):Để logo hiển thị đẹp trên mọi hình dạng icon của Android, bạn nên thiết kế nó theo chuẩn "maskable".
   • Sử dụng công cụ Maskable.app để tải logo của bạn lên và kiểm tra xem nó có nằm gọn trong "vùng an toàn" hay không, sau đó tải về phiên bản đã được tối ưu.

Bước 3.2: Tải Icon lên trong AdminCP​

1. Quay trở lại trang PWA setup.
2. Tại các mục Icon URL (192x192) và Icon URL (512x512), bạn sẽ thấy một biểu tượng nhỏ hình mũi tên tải lên.
3. Nhấp vào biểu tượng đó, một cửa sổ sẽ hiện ra cho phép bạn chọn file ảnh có kích thước tương ứng từ máy tính của mình.
4. Thực hiện cho cả hai kích thước 192x192 và 512x512.
5. Sau khi tải lên, tick vào ô Icons are maskable nếu bạn đã chuẩn bị icon theo chuẩn này.

Kiểm tra thành quả​

Sau khi đã lưu tất cả các thiết lập:

1. Mở trình duyệt Chrome/Edge trên máy tính hoặc điện thoại Android và truy cập diễn đàn của bạn (có thể cần xóa cache trình duyệt).
2. Trên thanh địa chỉ, bạn sẽ thấy biểu tượng "Cài đặt ứng dụng". Nhấp vào đó và chọn Install.
3. Biểu tượng của diễn đàn sẽ xuất hiện trên màn hình chính của thiết bị.

Kết luận​

Với các tính năng được tích hợp sẵn, XenForo 2.3 cho phép bạn triển khai Progressive Web App một cách chuyên nghiệp và đơn giản. Bằng cách làm theo các bước trên, bạn có thể mang đến cho người dùng một trải nghiệm vượt trội, giúp tăng cường sự hiện diện của thương hiệu và sự gắn kết của thành viên.

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

VNXF.VN​