Thông Báo Đẩy (Push Notifications)

Gửi thông báo Web Push đến người dùng của bạn, và để AI kết nối mọi thứ lại.

Mọi ứng dụng Proyecta đều có thể gửi thông báo đẩy cho trình duyệt và PWA đến người dùng. Proyecta xử lý việc tạo khóa VAPID, lưu trữ subscription, quản lý topic và gửi thông báo — không cần tài khoản bên thứ ba.

Cách hoạt động

Thông báo đẩy trong Proyecta tuân theo vòng đời Web Push chuẩn với bốn bước:

Enable — khóa VAPID được tạo cho ứng dụng của bạn ngay lần đầu tiên cần đến
Subscribe — đăng ký thiết bị của khách truy cập để nhận thông báo
Identify — liên kết một subscription ẩn danh với người dùng đã đăng nhập
Send — gửi thông báo đến người dùng cụ thể, topic, hoặc tất cả mọi người

Ba bước đầu diễn ra tự động bên trong hook usePush(); bước thứ tư bạn thực hiện từ trang quản trị của mình.

Đăng ký thiết bị của người dùng

Ứng dụng của bạn đi kèm hook usePush() xử lý toàn bộ luồng phía trình duyệt — lấy khóa VAPID, đăng ký service worker, tạo Web Push subscription, lưu secret, và liên kết subscription ẩn danh với người dùng ngay khi họ đăng nhập. Bạn không phải tự làm bất kỳ bước nào:

import { usePush } from '@/hooks/usePush.ts';

function NotifyMeButton() {
    const { supported, subscribed, subscribe, unsubscribe, isPending } = usePush();

    // `supported: false` means this browser cannot do push at all — hide the CTA.
    if (!supported) return null;

    return (
        <button onClick={subscribed ? unsubscribe : subscribe} disabled={isPending}>
            {subscribed ? 'Turn off notifications' : 'Notify me'}
        </button>
    );
}

Ngoài ra còn có sẵn một block dựng sẵn nếu bạn chỉ cần lời mời đăng ký:

import { PushOptInButton } from '@/components/blocks/PushOptInButton.tsx';

<PushOptInButton description="Get told the moment a new drop lands." />;

Hỏi AI: "Add a 'Notify me' button to the header that opts the visitor into push."

Khách truy cập ẩn danh cũng được hỗ trợ — hook đăng ký họ với một id được tạo tự động và tự liên kết lại subscription đó với tài khoản của họ khi họ đăng nhập, nên thông báo bạn gửi về sau đều đến được họ trong cả hai trường hợp.

Gửi thông báo

Việc gửi là hành động của chủ ứng dụng, không phải điều mà các trang công khai làm — trình duyệt của một khách truy cập tuyệt đối không được phép đẩy thông báo tới toàn bộ người dùng của bạn. Hằng ngày, bạn gửi từ mục Push trong trang quản trị: viết tiêu đề và nội dung, chọn một topic hoặc broadcast cho tất cả, và gửi thử tới thiết bị của chính bạn trước.

Bạn có thể nhắm đến tất cả mọi người, hoặc chỉ những khách truy cập đã đăng ký một topic cụ thể. Một thông báo gồm tiêu đề, nội dung, và tùy chọn thêm icon cùng hình ảnh.

Sau khi gửi, bạn nhận được số lượng thiết bị đã nhận và số lượng thất bại. Một lưu ý: các con số này chỉ phản ánh thông báo thực sự đến trình duyệt khi adapter gửi web-push được bật. Khi tắt, con số phản ánh số subscription được nhắm đến chứ không phải số thông báo thực sự được gửi — đừng đọc nó như xác nhận gửi thành công trong trường hợp đó.

Topics

Khách truy cập có thể đăng ký các topic theo tên (ví dụ: product-updates, weekly-digest) thay vì một danh sách được-ăn-cả-ngã-về-không. Đây là cách được khuyến nghị để quản lý danh sách opt-in — bạn không cần tự theo dõi visitor ID cho các cập nhật kiểu broadcast. Các topic xuất hiện dưới dạng bộ chọn đối tượng nhận trong mục Push của trang quản trị.

Hủy đăng ký

Gọi unsubscribe từ chính hook usePush() — nó đã giữ sẵn secret của subscription, nên bạn không cần lưu hay truyền gì cả:

const { subscribed, unsubscribe } = usePush();

{
    subscribed && <button onClick={unsubscribe}>Turn off notifications</button>;
}

Để AI kết nối mọi thứ

Bạn không cần tự viết bất kỳ đoạn code nào trong số này. Hỏi AI:

"Add a 'Notify me' button to the header that opts the visitor into push notifications."
"Put a push opt-in prompt on the product page, but only show it to visitors who haven't already subscribed."
"Add a topic called 'breaking-news' that visitors can opt into from the footer."

Lưu ý quan trọng

Preview không gửi thông báo thực sự. Thông báo đẩy chỉ hoạt động trên phiên bản đã được publish của ứng dụng vì trình duyệt yêu cầu HTTPS trên một origin thực.
iOS yêu cầu PWA. Trên iOS 16.4 trở lên, Web Push chỉ hoạt động từ một Progressive Web App đã được cài đặt (thêm vào màn hình chính), không hoạt động trực tiếp từ Safari.
Quyền thông báo chỉ có thể yêu cầu một lần. Nếu người dùng từ chối quyền thông báo, trình duyệt sẽ không cho phép bạn nhắc lại theo chương trình. Bạn phải hướng dẫn họ vào cài đặt trình duyệt hoặc thiết bị của mình.

Sắp ra mắt

Gửi theo lịch và theo sự kiện — tự động gửi thông báo dựa trên các sự kiện trong ứng dụng hoặc theo lịch trình
Deep linking — mở một màn hình cụ thể trong ứng dụng khi người dùng nhấn vào thông báo