# 發送通知給網頁! FCM Push Web(前端)
## 大綱
- <a href="#什麼是FCM">什麼是FCM??</a>
- <a href="#版本注意">版本注意</a>
- <a href="#註冊及初始化firebase專案">註冊及初始化firebase專案</a>
- <a href="#取得瀏覽器token">取得瀏覽器token</a>
- <a href="#前景推播 vs 背景推播">前景推播 vs 背景推播</a>
- <a href="#串接service-worker產生離線推播">串接service-worker產生離線推播</a>
- <a href="#發送通知測試">發送通知測試</a>
## 情境
當一名女性使用者正在瀏覽美妝網站時，發送美妝活動或優惠通知給該使用者，該使用者會點擊通知的機率跟發送一樣的通知給一名陌生男子的機率，可想而知應該是前者的機率比較高。
因此我們可以推論，推播適當的內容及在對的時間發送給使用者，有機會提高使用者的興趣。
## 什麼是FCM??
藉由firebase取得瀏覽器權限(==在無關閉接受通設定的狀態下==)，不同瀏覽器有不同的Token，像是用chrome跟edge有不同的token，必須用申請的firebase註冊去取得token才能發送通知給該對象。
- <h3>接收通知的裝置: </h3>
<h4>1. ios</h4>
<h4>2. Android</h4>
<h4>3. Web</h4>
- <h3>發送形式: </h3>
<h4>1. 單個裝置</h4>
<h4>2. 多個裝置</h4>
<h4>3. 裝置訂閱某主題</h4>
- <h3 id="通知類型">通知類型:
<h4>1. Notification(推播訊息不需做額外客製化呈現)</h4>
<h4>2. data(可以做客製化呈現)</h4>
## 版本注意(2021有大改版)
==確定安裝版本為V8前或是最新的V9!==
## 註冊及初始化[firebase](https://firebase.google.com/)專案
1. **建立一個專案**<br><br><br>點擊繼續<br><br><br>點擊確認<br><br><br>點擊建立專案<br>
2. **專案設定**<br><br><br>新增應用程式並點選網頁<br><br><br>即可獲得Firebase Cloud Messaging SDK
3. **新增一個index.html**<br>有了SDK就可以去註冊專案的使用權，不過目前的預設SDK未包含我們要使用的Cloud Messaging, 所以要額外[載入](https://firebase.google.com/docs/web/learn-more?authuser=0#available-libraries)(案功能、版本、npm 或 cdn)
```htmlembedded=
<body>
<h1>HOLA!</h1>
<p>YOU WILL GET THE SPECIAL MESSAGE!</p>
<p id="token"></p>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" onclick="requestPermission()">
Request Permission
</button>
//載入相關cdn
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app-check.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js"></script>
//註冊
<script>
var firebaseConfig = {
apiKey: <your apikey>,
authDomain: <your authdomain>,
projectId: <your projectid>,
storageBucket: <your storagebucket>,
messagingSenderId: <your sendid>,
appId: <your appid>,
measurementId: <your measurementid>
};
firebase.initializeApp(firebaseConfig);
//啟動功能
const db = firebase.firestore();
const messaging = firebase.messaging();
//確認瀏覽器有開起通知功能
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/firebase-messaging-sw.js')
.then(reg => console.log('完成 SW 設定!', reg))
.catch(err => console.log('Error!', err));
}
//firebase-messaging-sw.js 為可以離線傳通知需要的js檔
</body>
```
## 取得瀏覽器token
```javascript=
//確認權限
function requestPermission() {
console.log('Requesting permission...');
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('Notification permission granted.');
resetUI();
} else {
console.log('Unable to get permission to notify.');
}
});
}
//取得token
function resetUI() {
messaging.getToken({vapidKey: <your vapidkey>})
.then((currentToken) => {
if (currentToken) {
const tokenElement = document.querySelector('#token');
tokenElement.textContent = currentToken;
} else {
console.log('No registration token available. Request permission to generate one.');
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
});
}
```
==**vapidkey在哪裡??**==
<br>
下方的網路設定->網路推播憑證 -> 金鑰組
## 前景推播 vs 背景推播
方法不同，背景推播可以在離線狀態下接收到通知
## 串接service-worker產生離線推播
新增一個firebase-messaging-sw.js
```javascript=
importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js")
importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js")
var firebaseConfig = {
apiKey: <your apikey>,
authDomain: <your authdomain>,
projectId: <your projectid>,
storageBucket: <your storagebucket>,
messagingSenderId: <your sendid>,
appId: <your appid>,
measurementId: <your measurementid>
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
```
## 發送通知測試
1. 找到Cloud Messaging<br><br><br>點擊紅色框框
2. <br><br>
填寫左邊要傳送的資訊，再按下右邊按鈕<br>
3. 把剛剛取得的token貼上<br><br>
4. 點擊測試
參考來源:
- https://firebase.google.com/docs/cloud-messaging/js/send-multiple#web-version-8
- https://nick-chen.medium.com/%E4%BD%BF%E7%94%A8-firebase-%E5%BF%AB%E9%80%9F%E5%BB%BA%E7%AB%8B%E7%B6%B2%E9%A0%81%E6%8E%A8%E6%92%AD%E6%9C%8D%E5%8B%99-web-push-notifications-service-3e7b0d0c5ac6
Sign in with Wallet
Connect another wallet