PWA μ FCM νΈμ μλ¦Ό
PWAμ μλΉμ€ μ컀λ HTTPSλ₯Ό μꡬ
PWA μ±μμ νΈμ μλ¦Όμ 보λ΄κΈ° μν΄μλ μ¬μ©μκ° μ¬μ΄νΈ λλ μ±μ λν μλ¦Ό κΆνμ νμ©ν΄μΌνλ©° PWA μ±μ΄ μ’ λ£λμ΄μμ΄λ λ°±κ·ΈλΌμ΄λ μνμμ λμνλ μλΉμ€ μμ»€κ° νμνλ€. Vite κΈ°λ°μΌλ‘ ꡬμ±λμ΄μλ νλ‘μ νΈμμλ PWA Plugin for Viteλ‘ μ½κ² PWA μ€μΉ μ§μκ³Ό ν¨κ» μλΉμ€ μ컀λ₯Ό λ±λ‘ν μ μκ² μ€μ ν μ μλ€. μλΉμ€ μ컀λ HTTPS μμ λμν΄μΌνλ―λ‘ κ°λ° νκ²½μμλ vite-plugin-mkcertκ° λμμ΄ λ μ μλ€.
μλΉμ€ μ컀μ μν λ³κ²½μ κ³ λ €νκΈ°
μλΉμ€ μ컀μ μλͺ μ£ΌκΈ°λ₯Ό μ΄ν΄νκ³ μλ‘ μ€μΉλκ±°λ μ λ°μ΄νΈλλ μλΉμ€ μμ»€λ‘ μΈν΄ λ©μμ§ μμ μ΄ μννμ§ μμ μ μλ€λ μ μ μΈμ§ν΄μΌνλ€. ServiceWorkerGlobalScope.skipWaiting μ΄λ Clients::claim()μ΄ λμμ΄ λ μλ μλ€.
μλΉμ€ μ컀 νμΌμ΄ firebase-messaging-sw.js μΌ νμλ μλ€
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register(
import.meta.env.MODE === 'production' ? '/sw.js' : '/dev-sw.js?dev-sw',
{type: import.meta.env.MODE === 'production' ? 'classic' : 'module'}
).then(registration => {
console.log('register service worker', registration)
})
}
FCM κ΄λ ¨ μΌλΆ κΈμμ μλΉμ€ μ컀μ νμΌμ΄ λ°λμ firebase-messaing-sw.js
μ΄μ΄μΌ νλ€κ³ μΈκΈνλλ° μλͺ»λ μ 보μ ν΄λΉλλ©° FCM λ©μμ§ μμ μ μν΄μ PWA μ±μμ μ¬μ©μ€μΈ μλΉμ€ μ컀 λ΄μ Firebase SDKλ₯Ό μ΄κΈ°ν
νλκ² μ€μν λΆλΆμ΄λ€. μ μ½λμ κ°μ΄ κ°λ° νκ²½μμλ dev-sw.jsλ₯Ό μλΉμ€ μμ»€λ‘ λ±λ‘νμ¬ μ¬μ©ν μ μμμ 보μ¬μ€λ€.
FCM νΈμ μλ¦Όμ΄ μ¬λ¬λ² νμλλ λ¬Έμ π₯
PWA μ±μ νΈμ μλ¦Όμμ FCM λ©μμ§κ° μ¬λ¬λ² νμλλ λ¬Έμ μ κ°μ΄ λ°±κ·ΈλΌμ΄λ μνμ μλ PWA μ±μμ νΈμ μλ¦Όμ΄ μ¬λ¬λ² νμλλ μ΄μ λ μλ°μ€ν¬λ¦½νΈ ν΄λΌμ΄μΈνΈμμ λ©μμ§ μμ μ μλ¦Ό λ©μμ§μ μν κΈ°λ³Έ νλ©΄ νμμ λν΄ κ³ λ €νμ§ μμ λ¬Έμ μ ν΄λΉλλ€. μλ°μ€ν¬λ¦½νΈ ν΄λΌμ΄μΈνΈμμ 컀μ€ν λ©μμ§λ‘ νΈμ μλ¦Όμ μ 곡νκ³ μΆλ€λ©΄ μλ²μμλ μλ¦Ό λ©μμ§κ° ν¬ν¨λμ§ μμ λ°μ΄ν° λ©μμ§λ‘ ꡬμ±νμ¬ μ λ¬ν΄μΌνλ€.
μλ°μ€ν¬λ¦½νΈ ν΄λΌμ΄μΈνΈ API ν€λ μμ νλ€
μΌλ°μ μΌλ‘ μλ°μ€ν¬λ¦½νΈλ‘ λμνλ SDKμ λν ν€λ μΈλΆμ λ
ΈμΆλ μ λ°μ μμΌλ―λ‘ FCM λ©μμ§λ₯Ό μμ ν μ μλ μ΅μνμ κΆνμ 보μ νλ€. FCM μ½μμμ μΉ νΈμ μΈμ¦μλ μ΅λ 2κ°κΉμ§ λ°κΈ
ν μ μμΌλ―λ‘ VAPID
λ₯Ό νκ²½λ³λ‘ λλμ΄μ μ¬μ©νλ κ²λ μ’μ보μΈλ€. λ μμΈν λ΄μ©μ Firebaseμ© API ν€ μ¬μ© λ° κ΄λ¦¬μ λν΄ μμ보기λ₯Ό μ°Έκ³ νμ¬ κ³ λ €ν΄λ³΄λλ‘ νμ.
μμ€ν κ·λͺ¨μ λ°λ₯Έ ν ν° κ΄λ¦¬ μ λ΅
FCM λ±λ‘ ν ν° κ΄λ¦¬λ₯Ό μν κΆμ₯μ¬νκ³Ό FCM λ©μμ§λ₯Ό λκ·λͺ¨λ‘ μ μ‘ν λμ κΆμ₯μ¬νλ₯Ό μ°Έκ³ νμ¬ μμ€ν μ μ μ₯λμ΄ λ©μμ§ μ μ‘ μ μ¬μ©λλ ν ν°μ μλ₯Ό κ΄λ¦¬νλκ² νμνλ€. μλ²μμλ μ¬μ©μκ° PWA μ±μ μμ νλμ§λ₯Ό κ°μ§νμ¬ λμ΄μ ν ν°μ΄ μ¬μ©λμ§ μλμ§ μ μ μλ€. FCM λ©μμ§ μ μ‘ μ 무μ νμΌλ‘ λ°μ‘ν μλ μμΌλ―λ‘ μ€λ«λμ μ¬μ©λμ§ μκ±°λ λ§λ£λ ν ν°μ μ£ΌκΈ°μ μΌλ‘ μμ νλ μμ μ΄ μμ΄μΌνλ€.
iOSμ PWA μ± μ§μ μ¬λΆ
μλλ‘μ΄λμ ν¬λ‘¬ λΈλΌμ°μ μ λ¬λ¦¬ iOS λλ μ¬ν리 λΈλΌμ°μ μ λ°λΌ PWA μ± μ€μΉ λ° νΈμ APIλ₯Ό μ§μνλμ§μ μ¬λΆκ° λ€λ¦μ μΈμ§ν΄μΌνλ€. λν, ν νλ©΄μΌλ‘ μΆκ°λλ μ±μ λ°λμ κΈ°λ³ΈμΌλ‘ μ 곡λλ μ¬ν리 λΈλΌμ°μ λ‘ μ€νλλ κ²λ μ€μν λΆλΆμ ν΄λΉλλ€.