- \n
- iOS version by device \u2014 iOS Ref<\/a><\/li>\n
- Notification - Web APIs | MDN<\/a><\/li>\n<\/ul>\n
iOS \u5fc5\u9808\u8981 16.4 \u4ee5\u4e0a\u7684\u7248\u672c\uff0c\u4e5f\u5c31\u662f iPhone 14 \u4ee5\u4e0b\u90fd\u5fc5\u9808\u5347\u7d1a\u7cfb\u7d71\u624d\u53ef\u4ee5\u652f\u63f4<\/p>\n
![\"\"](\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/10\/2024-12-18-14-27-08.png\")
<\/p>\n![\"\"](\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/10\/2024-12-18-14-25-06.png\")
<\/p>\n--<\/p>\n
\u53c3\u8003\u8cc7\u6e90<\/h2>\n
- \n
- \u4f60\u77e5\u9053\u9019\u662f\u4ec0\u9ebc\u55ce\uff1f Chrome extension MV3 With Vite - Day8 Service Worker \u8a02\u95b1\u63a8\u64ad - iT \u90a6\u5e6b\u5fd9<\/a><\/li>\n
- Day27-Push Notification\u4e4b\u6210\u70ba\u8a02\u95b1\u7528\u6236(Firebase\u5be6\u4f5c) - iT \u90a6\u5e6b\u5fd9<\/a><\/li>\n
- Day28-Push Notification\u4f3a\u670d\u5668\u63a8\u64ad\u8a0a\u606f\u5be6\u4f5c - iT \u90a6\u5e6b\u5fd9<\/a><\/li>\n<\/ul>\n
--<\/p>\n
\u7db2\u9801\u8a3b\u518a FCM \u53d6\u5f97\u8eab\u4efd<\/h2>\n
\/\/ \u7cfb\u7d71\u662f\u5426\u652f\u63f4\r\nif (!(\"Notification\" in window)) {\r\n console.log(\"\u4e0d\u652f\u63f4\u63a8\u9001\u901a\u77e5\");\r\n}\r\n\r\n\/\/ service Worker\r\nfunction urlB64ToUint8Array(base64String) {\r\n const padding = '='.repeat((4 - base64String.length % 4) % 4);\r\n const base64 = (base64String + padding)\r\n .replace(\/\\-\/g, '+')\r\n .replace(\/_\/g, '\/');\r\n\r\n const rawData = window.atob(base64);\r\n const outputArray = new Uint8Array(rawData.length);\r\n\r\n for (let i = 0; i < rawData.length; ++i) {\r\n outputArray[i] = rawData.charCodeAt(i);\r\n }\r\n return outputArray;\r\n}\r\n\r\n\/\/ \u63a5\u6536\u767c\u9001\u7684\u8eab\u4efd\r\nconst applicationServerPublicKey = 'BGQsM1ZSgzMCvBeHEhhcwrBALSsRvFOyK6ErMYZmJoXHiIdJVwuffhTa5HUnmaTiVs6jWLUnUA-x05JVn2uKi38';\r\nconst applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);\r\n\r\n\/\/ \u8a3b\u518a sw.js\r\nfunction serviceWorker_register(){\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker\r\n .register('.\/sw.js')\r\n .then(reg => {\r\n return reg.pushManager.subscribe({\r\n userVisibleOnly: true,\r\n applicationServerKey: applicationServerKey\r\n });\r\n })\r\n .then(subscription => {\r\n \/\/ \u4e0a\u50b3\u4f7f\u7528\u8005\u8a3b\u518a\u8eab\u4efd\r\n \/\/ ...\r\n })\r\n .catch(err => {\r\n console.log('Failed to subscribe the user: ', err);\r\n });\r\n }\r\n}\r\n\r\nfunction requestPermission(){\r\n Notification.requestPermission().then((permission) => {\r\n \/\/ \u53d6\u5f97\u6388\u6b0a\u5f8c\u57f7\u884c\u52d5\u4f5c\r\n serviceWorker_register();\r\n });\r\n}\r\n<\/pre>\n<\/p>\n
--<\/p>\n
sw.js<\/h2>\n
const cacheVersion = 'v2';\r\nconst cacheName = \"upad12\";\r\n\r\nconst filesToCache = [\r\n '\/application\/views\/app\/style.css',\r\n '\/application\/views\/app\/user_bootstrap5.css',\r\n '\/public\/3rd\/php.js',\r\n];\r\n\r\nself.addEventListener('install', event => {\r\n \/\/ console.log(\"[Service Worker] Install\");\r\n event.waitUntil(\r\n (async () => {\r\n const cache = await caches.open(cacheName);\r\n await cache.addAll(filesToCache);\r\n })(),\r\n );\r\n});\r\n\r\nself.addEventListener('fetch', event => {\r\n \/\/ console.log('[ServiceWorker] fetch', event.request);\r\n event.respondWith(\r\n caches.match(event.request).then((response) => {\r\n return response || fetch(event.request);\r\n })\r\n );\r\n});\r\n\r\nself.addEventListener('push', function(event) {\r\n \/\/ console.log(event.data.json());\r\n const payload = event.data.json();\r\n\r\n let options = {\r\n body: payload.message,\r\n icon: payload.icon,\r\n badge: payload.icon,\r\n \/\/ tag: \"\",\r\n \/\/ renotify: true,\r\n data: {\r\n role : payload.role,\r\n source : payload.source,\r\n child_id : payload.child_id,\r\n },\r\n };\r\n event.waitUntil(\r\n self.registration.showNotification(payload.title, options)\r\n );\r\n});\r\n\r\n\/\/\r\nself.addEventListener(\"notificationclick\", (event) => {\r\n const push_data = event.notification.data;\r\n console.log(\"On notification click: \", push_data);\r\n\r\n event.waitUntil(\r\n clients\r\n .matchAll({\r\n type: \"window\",\r\n })\r\n .then((clientList) => {\r\n let url = '\/app';\r\n\r\n if ( push_data.source === '\u5237\u5361' ){\r\n if ( push_data.role === '11' ) url = '\/app\/Boss\/EmployeeAttendance';\r\n if ( push_data.role === '21' ) url = '\/app\/Student\/Attendance';\r\n if ( push_data.role === '30' ) url = '\/app\/Parents\/ChildCalendar\/?child_id=' + push_data.child_id;\r\n }\r\n\r\n return clients.openWindow(url);\r\n }),\r\n );\r\n\r\n event.notification.close();\r\n});\r\n<\/pre>\n<\/p>\n
--<\/p>\n
\u767c\u9001\u7aef\uff1a\u5b89\u88dd web-push<\/h2>\n
\u5b89\u88dd\u6642\u52a0\u4e0a -g \u70ba\u4f7f\u7528\u547d\u4ee4\u5217<\/p>\n
npm install web-push -g<\/pre>\n
\u53d6\u5f97\u767c\u9001\u8005\u8eab\u4efd\uff0c\u53ea\u8981\u6709\u8eab\u4efd\u5c31\u53ef\u4ee5\u767c\u9001\uff0c\u4e0d\u540c\u96fb\u8166\u4e5f\u53ef\u4ee5\u5171\u7528<\/p>\n
web-push generate-vapid-keys<\/pre>\n
=======================================\r\n\r\nPublic Key:\r\nBPrtEl0VOWdEdP_hwl-P1xnLkuzD9qiNfUBaOzO5KUxBXeE2VnkWwzKP0PSm4cjprR6nK9Jg3ziBnINqAFKHf9k\r\n\r\nPrivate Key:\r\nG8y_V-PUwP188uPCpKn0Io8XPdzEEbfhKJ2AGw24dhk\r\n\r\n=======================================<\/pre>\n
\u63a8\u9001\u8a0a\u606f<\/p>\n
web-push send-notification\r\n--endpoint=https:\/\/fcm.googleapis.com\/fcm\/send\/eIz-0oEdA88:APA91bF_A-eANS-pfHzvQ6ixWeJQdrEODeiwV9seclwqSiLd7nYT7-CKnqSJpE66cLyV3yYlJxNzClCeLbnpGq00JixEcd6lDUkcalFJVFLQjPq7R2ufdAVkfGBINHT1rXaQc8KZvoEQ\r\n--key=BFhr8ZmNlw_rBUxc4d8oLEwYjkabBb6sXQ1SW-tEogsPrV3mmvGhVhABMOuzi7vrhkAn8saLcQ81WsWpuyjQ9TE\r\n--auth=e-CL1SS37TSvRe7Swx4idA\r\n--vapid-pubkey=BGQsM1ZSgzMCvBeHEhhcwrBALSsRvFOyK6ErMYZmJoXHiIdJVwuffhTa5HUnmaTiVs6jWLUnUA-x05JVn2uKi38\r\n--vapid-pvtkey=CWROTKckpwAgt02x2l8WWK1Vq2kTMduODZz5oJ1ICYo\r\n--vapid-subject=https:\/\/hoyo.idv.tw\r\n--payload=\"{\\\"message\\\":\\\"This is a message\\\",\\\"title\\\":\\\"this is a title\\\",\\\"icon\\\":\\\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcQFQpoz6_MxzG3k_NCSWrhcW-H3nU5GoDhCysqPfXUEzmCQGpsuIQ\\\"}\"<\/pre>\n- \n
- --endpoint \u4f7f\u7528\u8005\u8a3b\u518a\u53d6\u5f97\u7684 endpoint\uff0c\u63a5\u6536\u63a8\u64ad\u7684\u8a0a\u606f\u767c\u9001\u7684\u5e73\u53f0\uff0c\u4e0d\u540c\u7684\u88dd\u7f6e\u3001\u700f\u89bd\u5668 endpoint \u90fd\u4e0d\u540c\uff0c\u4f8b\u5982 Google Chrome \u4f7f\u7528 Google \u7684 FCM (Firebase Cloud Messaging)\uff0cMicrosoft Edge \u4f7f\u7528 WNS (Windows Push Notification Service)<\/li>\n
- --key \u4f7f\u7528\u8005\u8a3b\u518a\u53d6\u5f97 keys \u7684 p256dh<\/li>\n
- --auth \u4f7f\u7528\u8005\u8a3b\u518a\u53d6\u5f97 keys \u7684 auth<\/li>\n
- --vapid-pubkey \u4f7f\u7528 generate-vapid-keys \u53d6\u5f97\u7684 Public Key<\/li>\n
- --vapid-pvtkey\u4f7f\u7528 generate-vapid-keys \u53d6\u5f97\u7684 Private Key<\/li>\n
- --vapid-subject \u4f7f\u7528 email (mailto:your@email.com) \u6216\u662f\u7db2\u5740 (https:\/\/your-website.com) \u7533\u660e\u8eab\u4efd<\/li>\n
- --payload \u767c\u9001\u5167\u5bb9\uff0c\u7d14\u6587\u5b57\u683c\u5f0f\u96a8\u610f\uff0c\u53ea\u8981\u63a5\u6536\u5f8c\u53ef\u8655\u7406\uff0c\u4e00\u822c\u90fd\u662f\u4f7f\u7528 JSON<\/li>\n<\/ul>\n
--<\/p>\n
\u652f\u63f4\u6027<\/h2>\n
\u63a8\u64ad\u5404\u5bb6\u5fc5\u9808\u4f7f\u7528\u81ea\u5df1\u7684\u4e3b\u6a5f\u9032\u884c\uff0c\u56e0\u6b64 endpoint \u5c31\u4e0d\u76f8\u540c<\/p>\n
- \n
- Chrome\uff1ahttps:\/\/fcm.googleapis.com\/fcm\/send\/<\/li>\n
- Edge\uff1ahttps:\/\/wns2-ln2p.notify.windows.com\/w\/?token=<\/li>\n
- Firefox\uff1ahttps:\/\/updates.push.services.mozilla.com\/wpush\/v2\/<\/li>\n
- Safari\uff1ahttps:\/\/web.push.apple.com\/<\/li>\n<\/ul>\n
\u56e0\u70ba endpoint \u4e3b\u6a5f\u90fd\u662f\u5f9e\u5404\u81ea\u700f\u89bd\u5668\u63d0\u4f9b\uff0c\u6240\u4ee5\u53cd\u61c9\u901f\u5ea6\u53ef\u80fd\u6703\u6709\u4e0d\u540c<\/p>\n
--<\/p>\n
\u6ce8\u610f\u4e8b\u9805<\/h2>\n
- \n
- \u4fee\u6539 sw.js \u5fc5\u9808\u91cd\u65b0\u555f\u52d5\u700f\u89bd\u5668<\/li>\n<\/ul>\n
--<\/p>\n
\u7bc4\u4f8b<\/h2>\n
- \u4fee\u6539 sw.js \u5fc5\u9808\u91cd\u65b0\u555f\u52d5\u700f\u89bd\u5668<\/li>\n<\/ul>\n
- Day27-Push Notification\u4e4b\u6210\u70ba\u8a02\u95b1\u7528\u6236(Firebase\u5be6\u4f5c) - iT \u90a6\u5e6b\u5fd9<\/a><\/li>\n
- Notification - Web APIs | MDN<\/a><\/li>\n<\/ul>\n