OneSignal với Nextjs 14 website

1. Cài đặt gói
   yarn add react-onesignal
   với version 3.0.1

2. Mở quyền thông báo

• Mở quyền cho ứng dụng trong Cài đặt của máy tính
• Cấp quyền thông báo cho website
• xem thêm hướng dẫn ở đây : https://documentation.onesignal.com/docs/notifications-not-shown-web-push

3. Code OneSignal

• kiểm tra cấp quyền chưa, chưa cấp thì mình enable init, có rồi thì thôi
• login tự mình cấp , nó có thêm tham số thứ 2 là token , có sài thì thêm vô, hông thì thôi , thêm vô thì nó ghi nhận lại trong Audience - Subscriptions trên dashboard.onesignal.com

await OneSignal.login('huyi_abi');
await OneSignal.User.addAlias('myAlias', 'huyi');

'use client'; import { PropsWithChildren, createContext, useContext, useEffect, useState,
} from 'react';
import OneSignal from 'react-onesignal'; const useLogic = () => { const appId = '9dcb4b67-6e24-4eb5-9be6-a8e19b71f63d'; // muốn có cái này thì đăng ký app là có const [enable, setEnable] = useState(false); useEffect(() => { const init = async () => { try { if (!enable) { await OneSignal.init({ appId, notifyButton: { enable: true, }, autoResubscribe: true, // tự động theo đõi autoRegister: true, serviceWorkerPath: '/OneSignalSDKWorker.js', allowLocalhostAsSecureOrigin: true, }); } setEnable(OneSignal.Notifications.permission); await OneSignal.Notifications.requestPermission(); await OneSignal.Slidedown.promptPush(); await OneSignal.login('huyi_abi'); await OneSignal.User.addAlias('myAlias', 'huyi'); await OneSignal.Debug.setLogLevel('trace'); // này để log, hông muốn log thì để "" } catch (error) { console.log('error :>> ', error); } }; init(); }, [enable]); return {};
}; type Extra = {}; type ValueCtx = ReturnType<typeof useLogic> & Extra; export const AppCtx = createContext({} as ValueCtx); export const AppProvider = ({ ...props }: PropsWithChildren<Extra>) => { const valueCtx = useLogic(); return ( <AppCtx.Provider value={{ ...valueCtx, ...props }}> <>{props.children}</> </AppCtx.Provider> );
}; export const useAppCtx = () => useContext(AppCtx); 

mình tạo cái OneSignalSDKWorker trong public : /public/OneSignalSDKWorker.js

importScripts('https://onesignal.com/sdks/web/v16/OneSignalSDK.sw.js');

4. hướng dẫn đăng ký App

Cái này quan trọng : Mình sài package nên khỏi dùng cái này

Chạy không ra thông báo thì cmt ở dưới nha!