![](\"https:\/\/i.yimenyun.net\/2023-01\/06\/12\/11275474693.jpg\")
<\/figure>\n<\/p>\n}<\/p>\n
);<\/p>\n
}<\/p>\n
“`<\/p>\n
\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0cService Worker \u4f7f\u7528 “sw.js”\u6587\u4ef6\u540d\u3002\u4f60\u9700\u8981\u5728\u9879\u76ee\u6839\u76ee\u5f55\u521b\u5efa\u8fd9\u4e2a\u6587\u4ef6\u5e76\u7f16\u5199\u76f8\u5e94\u7684\u5185\u5bb9\u4ee5\u7ba1\u7406\u7f13\u5b58\u3001\u63a8\u9001\u7b49\u529f\u80fd\u3002<\/p>\n
2. \u6dfb\u52a0 Manifest \u6587\u4ef6<\/p>\n
\u6dfb\u52a0manifest.json\u6587\u4ef6\u6765\u914d\u7f6eH5\u5e94\u7528\u7684\u57fa\u672c\u4fe1\u606f\uff0c\u5982\u5e94\u7528\u56fe\u6807\u3001\u540d\u79f0\u3001\u542f\u52a8\u5c4f\u5e55\u7b49\u3002<\/p>\n
“`json<\/p>\n
{<\/p>\n
“name”: “H5 App”,<\/p>\n
“short_name”: “H5App”,<\/p>\n
“lang”: “zh-cn”,<\/p>\n
“description”: “\u4e00\u4e2a\u57fa\u4e8eH5\u6280\u672f\u7684\u5e94\u7528\u7a0b\u5e8f”,<\/p>\n
“start_url”: “\/index.html”,<\/p>\n
“display”: “standalone”,<\/p>\n
“background_color”: “#a3d0e4”,<\/p>\n
“theme_color”: “#3aa3e3”,<\/p>\n
“icons”: [<\/p>\n
{<\/p>\n
“src”: “icon_192x192.png”,<\/p>\n
“sizes”: “192×192”,<\/p>\n
“type”: “image\/png”<\/p>\n
},<\/p>\n
{<\/p>\n
“src”: “icon_512x512.png”,<\/p>\n
“sizes”: “512×512”,<\/p>\n
“type”: “image\/png”<\/p>\n
}<\/p>\n
]<\/p>\n
}<\/p>\n
“`<\/p>\n
\u5728\u9879\u76ee\u7684 HTML \u6587\u4ef6\u4e2d\u5f15\u5165\u8fd9\u4e2a manifest \u6587\u4ef6\uff1a<\/p>\n
“`html<\/p>\n<\/p>\n
“`<\/p>\n
3. \u8bf7\u6c42\u63a8\u9001\u8ba2\u9605<\/p>\n
\u8981\u63a5\u53d7\u79bb\u7ebf\u63a8\u9001\uff0c\u7528\u6237\u9700\u8981\u8ba2\u9605\u63a8\u9001\u5e76\u6388\u6743\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n
“`javascript<\/p>\n
\/\/ \u8bf7\u6c42\u63a8\u9001\u6743\u9650<\/p>\n
Notification.requestPermission().then((permission) => {<\/p>\n
if (permission === ‘granted’) {<\/p>\n
console.log(‘\u7528\u6237\u540c\u610f\u63a8\u9001\u901a\u77e5’);<\/p>\n
} else {<\/p>\n
console.log(‘\u7528\u6237\u62d2\u7edd\u63a8\u9001\u901a\u77e5’);<\/p>\n
}<\/p>\n
});<\/p>\n
“`<\/p>\n
4. \u5728 Service Worker \u4e2d\u5904\u7406\u63a8\u9001<\/p>\n
Service Worker \u4e2d\u7684 “push” \u4e8b\u4ef6\u4f1a\u6536\u5230\u6765\u81ea\u63a8\u9001\u670d\u52a1\u5668\u7684\u6d88\u606f\uff1a<\/p>\n
“`javascript<\/p>\n
\/\/ sw.js<\/p>\n
self.addEventListener(‘push’, (event) => {<\/p>\n
const message = event.data.json(); \/\/ \u89e3\u6790\u63a8\u9001\u5185\u5bb9<\/p>\n
\/\/ \u521b\u5efa\u4e00\u4e2a\u901a\u77e5<\/p>\n
const notificationOptions = {<\/p>\n
body: message.body,<\/p>\n
icon: message.icon,<\/p>\n
};<\/p>\n
event.waitUntil(self.registration.showNotification(message.title, notificationOptions));<\/p>\n
});<\/p>\n
\/\/ \u76d1\u542c\u901a\u77e5\u7684\u70b9\u51fb\u4e8b\u4ef6<\/p>\n