이 기사에서는 Firebase 클라우드 메시징을 사용하여 푸시 알림을 사용하여 웹 애플리케이션 또는 웹사이트를 PWA로 변환하는 방법을 살펴봅니다.
현대 세계에서 대부분의 웹 애플리케이션은 오프라인 지원, 푸시 알림, 백그라운드 동기화와 같은 기능을 제공하기 때문에 PWA(Progressive Web App)로 변환되고 있습니다. PWA 기능은 웹 애플리케이션을 네이티브 앱처럼 만들고 풍부한 사용자 경험을 제공합니다.
예를 들어 Twitter 및 Amazon과 같은 훌륭한 회사는 더 많은 사용자 참여를 위해 웹 앱을 PWA로 전환했습니다.
목차
PWA 란 무엇입니까?
PWA = (웹 앱) + (일부 기본 앱 기능)
PWA는 동일한 웹 앱(HTML+CSS+JS)입니다. 이전과 마찬가지로 모든 브라우저에서 웹 앱과 동일하게 작동합니다. 그러나 웹 사이트가 최신 브라우저에서 로드될 때 기본 기능을 가질 수 있습니다. 이는 웹 앱을 이전보다 더 강력하게 만들고 프런트엔드에서 자산을 미리 가져오고 캐시할 수 있기 때문에 확장성을 높여 백엔드 서버에 대한 요청을 줄입니다.
PWA가 웹 앱과 다른 점
- 설치 가능: 웹 앱을 기본 앱처럼 설치할 수 있습니다.
- 프로그레시브: 웹 앱과 동일하게 작동하지만 일부 기본 기능이 있습니다.
- 네이티브 앱 경험: 사용자는 웹 앱을 설치하면 네이티브처럼 사용하고 탐색할 수 있습니다.
- 쉽게 접근 가능: 웹 앱과 달리 사용자가 방문할 때마다 웹 주소를 입력할 필요가 없습니다. 설치가 완료되면 탭 한 번으로 열 수 있습니다.
- 애플리케이션 캐싱: PWA 이전에는 웹 앱이 구현한 유일한 캐싱 메커니즘은 브라우저에서만 사용할 수 있는 HTTP 캐시를 사용하는 것입니다. 그러나 PWA를 사용하면 웹 앱에서 사용할 수 없는 클라이언트 측 코드 자체를 사용하여 캐시할 수 있습니다.
- (앱/플레이) 스토어 퍼블리싱: PWA는 구글 플레이 스토어와 IOS 앱 스토어에 퍼블리싱할 수 있습니다.
애플리케이션을 PWA로 변환하면 더 강력해질 뿐입니다.
기업이 PWA를 고려해야 하는 이유
대부분의 고객이 당사에 연락하여 먼저 웹 앱 솔루션 개발을 요청한 다음 Android 및 iOS 앱을 요청합니다. 우리는 더 많은 개발 비용과 더 많은 시간이 소요되는 별도의 팀에 의해 Android/IOS 앱에 웹 앱에서 동일한 기능을 구축하기만 하면 됩니다.
그러나 일부 고객은 예산이 제한되어 있거나 일부 고객은 제품 출시 시간이 더 중요하다고 생각할 수 있습니다.
대부분의 클라이언트 요구 사항은 PWA 기능 자체로 충족될 수 있습니다. 그들에게 PWA만 제안하고 Playstore에 배포하려는 경우 TWA를 사용하여 PWA를 Android 앱으로 변환하는 아이디어를 제공합니다.
귀하의 요구 사항에 PWA가 충족할 수 없는 기본 애플리케이션 기능이 진정으로 필요한 경우. 클라이언트는 원하는 대로 두 애플리케이션을 모두 개발할 수 있습니다. 그러나 그 시나리오에서도. Android 개발이 완료될 때까지 Play 스토어에 PWA를 배포할 수 있습니다.
예: 타이탄 아이플러스
처음에는 PWA 앱을 개발하고 TWA(Trusted Web Activity)를 사용하여 플레이 스토어에 배포했습니다. 일단 Android 애플리케이션 개발을 완료했습니다. Play 스토어에 실제 Android 애플리케이션을 배포했습니다. 그들은 PWA를 사용하여 시장 출시 시간과 개발 비용을 모두 달성했습니다.
PWA 기능
PWA는 웹 애플리케이션에 기본 앱과 유사한 기능을 제공합니다.
주요 기능은 다음과 같습니다.
- 설치 가능: 기본 앱처럼 설치된 웹 애플리케이션.
- 캐싱: 애플리케이션 캐싱이 가능하여 애플리케이션 오프라인 지원을 제공합니다.
- 푸시 알림: 푸시 알림은 사용자를 당사 웹사이트에 참여시키기 위해 당사 서버에서 전송될 수 있습니다.
- 지오펜싱: 장치 위치가 변경될 때마다 이벤트를 통해 애플리케이션에 알릴 수 있습니다.
- 결제 요청: 네이티브 앱과 같은 뛰어난 사용자 경험으로 애플리케이션에서 결제를 활성화합니다.
그리고 앞으로 더 많은 기능이 제공될 예정입니다.
다른 기능은 다음과 같습니다.
- 바로 가기: 매니페스트 파일에 추가된 빠르게 액세스할 수 있는 URL입니다.
- Web Share API: 귀하의 애플리케이션이 다른 애플리케이션에서 공유 데이터를 수신하도록 합니다.
- 배지 API: 설치된 PWA에 알림 수를 표시합니다.
- 주기적 백그라운드 동기화 API: 네트워크에 연결될 때까지 사용자 데이터를 저장합니다.
- 연락처 선택기: 사용자의 모바일에서 연락처를 선택하는 데 사용됩니다.
- 파일 선택기: 로컬 시스템/모바일에서 파일에 액세스하는 데 사용
네이티브 애플리케이션보다 PWA의 장점
기본 앱은 PWA보다 성능이 우수하고 PWA보다 더 많은 기능을 제공합니다. 그러나 여전히 기본 앱에 비해 몇 가지 장점이 있습니다.
- PWA는 Android, IOS, Desktop과 같은 크로스 플랫폼에서 실행됩니다.
- 개발 비용을 절감합니다.
- 기본 앱에 비해 손쉬운 기능 배포.
- PWA(웹사이트)는 SEO 친화적이기 때문에 쉽게 검색 가능
- HTTPS에서만 작동하므로 안전합니다.
네이티브 앱에 비해 PWA의 단점
- 네이티브 앱에 비해 제한된 기능을 사용할 수 있습니다.
- PWA 기능은 모든 장치를 지원하지 않을 수 있습니다.
- PWA의 브랜드는 앱 스토어 또는 플레이 스토어에서 사용할 수 없기 때문에 낮습니다.
Android를 사용하여 Play 스토어에서 PWA를 Android 앱으로 배포할 수 있습니다. 신뢰할 수 있는 웹 활동(TWA). 당신의 브랜딩에 도움이 될 것입니다.
웹 앱을 PWA로 변환하는 데 필요한 것들
변환의 경우 모든 웹 앱 또는 웹 사이트를 PWA로 변환합니다.
- Service-Worker: 요청에 대한 프록시인 캐싱, 푸시 알림을 위한 모든 PWA 앱의 핵심입니다.
- 매니페스트 파일: 웹 애플리케이션에 대한 세부 정보가 있습니다. 홈 화면에서 기본 앱처럼 애플리케이션을 다운로드하는 데 사용되었습니다.
- 앱 로고: 앱 아이콘의 고품질 이미지 512 x 512픽셀. 홈 화면, 스플래시 화면 등에서 PWA에 필요한 앱 로고. 그래서 우리는 어떤 도구를 사용해서든 1:1 비율의 APP 이미지 세트를 만들어야 합니다.
- 반응형 디자인: 웹 앱은 다양한 화면 크기에서 작동하도록 반응해야 합니다.
서비스 워커란:
서비스 워커(클라이언트 측 스크립트)는 웹 앱과 외부 사이의 프록시로, 웹 앱에 대한 푸시 알림을 전달하고 캐싱을 지원합니다.
서비스 워커는 기본 자바스크립트와 독립적으로 실행됩니다. 따라서 DOM API에 액세스할 수 없습니다. 만 액세스할 수 있습니다. IndexedDB API, API 가져오기, 캐시 스토리지 API. 그러나 메시지를 통해 메인 스레드와 통신할 수 있습니다.
서비스 워커가 제공하는 서비스:
- 원본 도메인의 HTTP 요청 가로채기.
- 서버에서 푸시 알림을 받습니다.
- 애플리케이션의 오프라인 가용성
서비스 워커는 애플리케이션을 제어하고 요청을 조작할 수 있지만 독립적으로 실행됩니다. 따라서 메시지 가로채기(man-in-the-middle) 공격을 피하기 위해 원본 도메인은 HTTPS로 활성화되어야 합니다.
매니페스트 파일이란
매니페스트 파일(manifest.json)에는 브라우저에 알리는 PWA 앱에 대한 세부 정보가 있습니다.
- 이름: 애플리케이션 이름
- short_name: 애플리케이션의 짧은 이름입니다. 제공되는 경우
- 속성 이름과 short_name을 모두 사용하면 브라우저는 short_name을 사용합니다.
- description: 애플리케이션을 설명하는 설명입니다.
- start_url: PWA가 시작될 때 응용 프로그램의 홈페이지를 지정합니다.
- 아이콘: 홈 화면 등의 PWA용 이미지 세트
- background_color: PWA 애플리케이션에서 시작 화면의 배경색을 설정합니다.
- display: PWA 앱에 표시할 브라우저 UI를 사용자 정의합니다.
- theme_color: PWA 앱의 테마 색상입니다.
- 범위: PWA에 대해 고려할 애플리케이션의 URL 범위입니다. 기본값은 찾은 매니페스트 파일의 위치입니다.
- 바로 가기: PWA 응용 프로그램에 대한 빠른 링크입니다.
웹 앱을 PWA로 변환
데모 목적으로 정적 파일로 koreantech.org 웹 사이트 폴더 구조를 만들었습니다.
- index.html – 홈 페이지
- 조항/
- index.html – 기사 페이지
- 저자/
- index.html – 작성자 페이지
- 도구/
- index.html – 도구 페이지
- 거래/
- index.html – 거래 페이지
이미 웹사이트나 웹 앱이 있는 경우 아래 단계에 따라 PWA로 변환해 보세요.
PWA에 필요한 이미지 만들기
먼저 앱 로고를 5가지 크기로 1:1 비율 크기로 자릅니다. 나는 사용했다 https://tools.crawlink.com/tools/pwa-icon-generator/ 다른 이미지 크기를 빠르게 얻을 수 있습니다. 그래서 당신도 사용할 수 있습니다.
매니페스트 파일 만들기
둘째, 앱 세부 정보를 사용하여 웹 애플리케이션에 대한 manifest.json 파일을 만듭니다. 데모를 위해 koreantech.org 웹사이트용 매니페스트 파일을 만들었습니다.
{
"name": "koreantech.org",
"short_name": "koreantech.org",
"description": "koreantech.org produces high-quality technology & finance articles, makes tools, and APIs to help businesses and people grow.",
"start_url": "/",
"icons": [{
"src": "assets/icon/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "assets/icon/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "assets/icon/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "assets/icon/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
}, {
"src": "assets/icon/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
"background_color": "#EDF2F4",
"display": "standalone",
"theme_color": "#B20422",
"scope": "/",
"shortcuts": [{
"name": "Articles",
"short_name": "Articles",
"description": "1595 articles on Security, Sysadmin, Digital Marketing, Cloud Computing, Development, and many other topics.",
"url": "https://geekflare.com/articles",
"icons": [{
"src": "/assets/icon/icon-152x152.png",
"sizes": "152x152"
}]
},
{
"name": "Authors",
"short_name": "Authors",
"description": "koreantech.org - Authors",
"url": "/authors",
"icons": [{
"src": "/assets/icon/icon-152x152.png",
"sizes": "152x152"
}]
},
{
"name": "Tools",
"short_name": "Tools",
"description": "koreantech.org - Tools",
"url": "https://koreantech.org.com/tools",
"icons": [{
"src": "/assets/icon/icon-152x152.png",
"sizes": "152x152"
}]
},
{
"name": "Deals",
"short_name": "Deals",
"description": "koreantech.org - Deals",
"url": "/deals",
"icons": [{
"src": "/assets/icon/icon-152x152.png",
"sizes": "152x152"
}]
}
]
}
서비스 워커 등록
루트 폴더에 스크립트 파일 register-service-worker.js 및 service-worker.js를 만듭니다.
첫 번째 register-service-worker.js는 DOM API에 액세스할 수 있는 메인 스레드에서 실행될 자바스크립트 파일입니다. 그러나 service-worker.js는 메인 스레드와 독립적으로 실행되는 서비스 워커 스크립트이며 수명도 짧습니다. 이벤트가 서비스 워커를 호출할 때마다 실행되고 프로세스가 완료될 때까지 실행됩니다.
메인 쓰레드 자바스크립트 파일을 확인하면 서비스 워커가 등록되어 있는지 확인할 수 있습니다. 그렇지 않은 경우 서비스 워커 스크립트(service-worker.js)를 등록할 수 있습니다.
아래 스니펫을 register-service-worker.js에 붙여넣습니다.
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
service-worker.js에 아래 스니펫을 붙여넣습니다.
self.addEventListener('install', (event) => { // event when service worker install
console.log( 'install', event);
self.skipWaiting();
});
self.addEventListener('activate', (event) => { // event when service worker activated
console.log('activate', event);
return self.clients.claim();
});
self.addEventListener('fetch', function(event) { // HTTP request interceptor
event.respondWith(fetch(event.request)); // send all http request without any cache logic
/*event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event. request);
})
);*/ // cache new request. if already in cache serves with the cache.
});
오프라인 지원을 위해 캐시를 활성화하는 방법에 집중하지 않았습니다. 우리는 웹 앱을 PWA로 변환하는 방법에 대해서만 이야기합니다.
HTML 페이지의 all head 태그에 매니페스트 파일과 스크립트를 추가합니다.
<link rel="manifest" href="https://koreantech.org.com/manifest.json"> <script src="/register-service-worker.js"></script>
추가한 후 페이지를 새로 고칩니다. 이제 모바일 크롬에 아래와 같이 애플리케이션을 설치할 수 있습니다.
홈 화면에서 앱이 추가됩니다.
워드프레스를 사용하는 경우. 기존 PWA 변환기 플러그인을 사용해 보세요. vueJS 또는 reactJS의 경우 위의 방법을 따르거나 기존 PWA npm 모듈을 사용하여 개발 속도를 높일 수 있습니다. PWA npm 모듈은 이미 오프라인 지원 캐싱 등으로 활성화되어 있기 때문입니다.
푸시 알림 활성화
웹 푸시 알림은 사용자가 우리 애플리케이션에 더 자주 참여/상호작용할 수 있도록 브라우저로 전송됩니다. 다음을 사용하여 활성화할 수 있습니다.
애플리케이션에서 푸시 알림을 활성화하는 첫 번째 단계는 알림 API를 확인하고 사용자에게 알림을 표시할 수 있는 권한을 얻는 것입니다. 해당 코드의 경우 아래 스니펫을 복사하여 register-service-worker.js에 붙여넣습니다.
if ('Notification' in window && Notification.permission != 'granted') {
console.log('Ask user permission')
Notification.requestPermission(status => {
console.log('Status:'+status)
displayNotification('Notification Enabled');
});
}
const displayNotification = notificationTitle => {
console.log('display notification')
if (Notification.permission == 'granted') {
navigator.serviceWorker.getRegistration().then(reg => {
console.log(reg)
const options = {
body: 'Thanks for allowing push notification !',
icon: '/assets/icons/icon-512x512.png',
vibrate: [100, 50, 100],
data: {
dateOfArrival: Date.now(),
primaryKey: 0
}
};
reg.showNotification(notificationTitle, options);
});
}
};
모든 것이 올바르게 진행되었다면. 애플리케이션에서 알림을 받게 됩니다.
창의 ‘알림’은 해당 브라우저에서 알림 API가 지원됨을 알려줍니다. Notification.permission은 사용자가 알림을 표시하도록 허용되었음을 알려줍니다. 사용자가 응용 프로그램을 허용한 경우 값이 ‘부여’됩니다. 사용자가 거부한 경우 값은 ‘차단’됩니다.
Firebase 클라우드 메시징 활성화 및 구독 생성
이제 진짜 부분이 시작됩니다. 서버에서 사용자에게 알림을 푸시하려면 각 사용자에 대해 고유한 엔드포인트/구독이 필요합니다. 이를 위해 Firebase 클라우드 메시징을 사용할 것입니다.
첫 번째 단계로 이 링크를 방문하여 Firebase 계정을 만드세요. https://firebase.google.com/ 시작을 누릅니다.
그런 다음 프로젝트 설정으로 이동하여 클라우드 메시징을 클릭하고 키를 생성합니다.
위의 단계에서 3개의 키가 있습니다.
- 프로젝트 서버 키
- 웹 푸시 인증서 개인 키
- 웹 푸시 인증서 공개 키
이제 아래 스니펫을 register-service-worker.js에 붙여넣습니다.
const updateSubscriptionOnYourServer = subscription => {
console.log('Write your ajax code here to save the user subscription in your DB', subscription);
// write your own ajax request method using fetch, jquery, axios to save the subscription in your server for later use.
};
const subscribeUser = async () => {
const swRegistration = await navigator.serviceWorker.getRegistration();
const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // paste your webpush certificate public key
const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey
})
.then((subscription) => {
console.log('User is subscribed newly:', subscription);
updateSubscriptionOnServer(subscription);
})
.catch((err) => {
if (Notification.permission === 'denied') {
console.warn('Permission for notifications was denied')
} else {
console.error('Failed to subscribe the user: ', err)
}
});
};
const urlB64ToUint8Array = (base64String) => {
const padding = '='.repeat((4 - base64String.length % 4) % 4)
const base64 = (base64String + padding)
.replace(/-/g, '+')
.replace(/_/g, '/')
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
};
const checkSubscription = async () => {
const swRegistration = await navigator.serviceWorker.getRegistration();
swRegistration.pushManager.getSubscription()
.then(subscription => {
if (!!subscription) {
console.log('User IS Already subscribed.');
updateSubscriptionOnYourServer(subscription);
} else {
console.log('User is NOT subscribed. Subscribe user newly');
subscribeUser();
}
});
};
checkSubscription();
service-worker.js에 아래 스니펫을 붙여넣습니다.
self.addEventListener('push', (event) => {
const json = JSON.parse(event.data.text())
console.log('Push Data', event.data.text())
self.registration.showNotification(json.header, json.options)
});
이제 모든 것이 프론트 엔드에서 설정되었습니다. 구독을 사용하면 푸시 서비스가 거부되지 않을 때까지 원할 때마다 사용자에게 푸시 알림을 보낼 수 있습니다.
node.js 백엔드에서 푸시
당신은 사용할 수 있습니다 웹 푸시 npm 모듈을 사용하여 더 쉽게 만들 수 있습니다.
nodeJS 서버에서 푸시 알림을 보내는 예제 스니펫.
const webPush = require('web-push');
// pushSubscription is nothing but subscription that you sent from your front-end to save it in DB
const pushSubscription = {"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}};
//your web certificates public-key
const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY';
//your web certificates private-key
const vapidPrivateKey = 'web-certificate private key';
var payload = JSON.stringify({
"options": {
"body": "PWA push notification testing fom backend",
"badge": "/assets/icon/icon-152x152.png",
"icon": "/assets/icon/icon-152x152.png",
"vibrate": [100, 50, 100],
"data": {
"id": "458",
},
"actions": [{
"action": "view",
"title": "View"
}, {
"action": "close",
"title": "Close"
}]
},
"header": "Notification from koreantech.org-PWA Demo"
});
var options = {
vapidDetails: {
subject: 'mailto:[email protected]',
publicKey: vapidPublicKey,
privateKey: vapidPrivateKey
},
TTL: 60
};
webPush.sendNotification(
pushSubscription,
payload,
options
).then(data => {
return res.json({status : true, message : 'Notification sent'});
}).catch(err => {
return res.json({status : false, message : err });
});
위의 코드는 구독에 푸시 알림을 보냅니다. 서비스 작업자의 푸시 이벤트가 트리거됩니다.
PHP 백엔드에서 푸시
PHP 백엔드의 경우 다음을 사용할 수 있습니다. 웹푸시-php 작곡가 패키지. 아래에서 푸시 알림을 보내는 예제 코드를 확인하세요.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
require __DIR__.'/../vendor/autoload.php';
use MinishlinkWebPushWebPush;
use MinishlinkWebPushSubscription;
// subscription stored in DB
$subsrciptionJson = '{"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}}';
$payloadData = array (
'options' => array (
'body' => 'PWA push notification testing fom backend',
'badge' => '/assets/icon/icon-152x152.png',
'icon' => '/assets/icon/icon-152x152.png',
'vibrate' =>
array (
0 => 100,
1 => 50,
2 => 100,
),
'data' =>
array (
'id' => '458',
),
'actions' =>
array (
0 =>
array (
'action' => 'view',
'title' => 'View',
),
1 =>
array (
'action' => 'close',
'title' => 'Close',
),
),
),
'header' => 'Notification from koreantech.org-PWA Demo',
);
// auth
$auth = [
'GCM' => 'your project private-key', // deprecated and optional, it's here only for compatibility reasons
'VAPID' => [
'subject' => 'mailto:[email protected]', // can be a mailto: or your website address
'publicKey' => 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY', // (recommended) uncompressed public key P-256 encoded in Base64-URL
'privateKey' => 'your web-certificate private-key', // (recommended) in fact the secret multiplier of the private key encoded in Base64-URL
],
];
$webPush = new WebPush($auth);
$subsrciptionData = json_decode($subsrciptionJson,true);
// webpush 6.0
$webPush->sendOneNotification(
Subscription::create($subsrciptionData),
json_encode($payloadData) // optional (defaults null)
);
결론
이것이 웹 애플리케이션을 PWA로 변환하는 방법에 대한 아이디어를 제공하기를 바랍니다. 이 기사의 소스 코드를 확인할 수 있습니다 여기 그리고 그것을 데모 여기. 예제 코드의 도움으로 백엔드에서 푸시 알림을 전송하여 테스트했습니다.