id="如何在我的-service-worker-中实现推送通知">如何在我的

Service

下面给你一套最小可用的

Web

index.html，分成两块：

前端页面：注册推送、订阅并把订阅信息发给服务器。

Service

注意：真正“推送”是服务器发到浏览器的，你本地只能模拟（DevTools

push

class="language-javascript">self.addEventListener('push',

(event)

点击通知要打开的地址...data}};event.waitUntil(self.registration.showNotification(title,

options));

});self.addEventListener('notificationclick',

(event)

{event.notification.close();const

url

'./index.html';event.waitUntil(self.clients.matchAll({

type:

{client.navigate(url);}return;}}//

否则新开一个窗口if

self.clients.openWindow(url);}return

null;}));

时就会弹系统通知；点击通知会打开（或切换到）你的页面。

---

class="language-plaintext">BPx...你的VAPID公钥...abc

id="22-在-indexhtml--某个-js-里增加订阅逻辑">2.2

里增加订阅逻辑

src="bootstrap.bundle.min.js"></script><script

src="./js/index.js"></script><script>const

VAPID_PUBLIC_KEY

navigator.serviceWorker.register('./sw.js');console.log('Service

Worker

激活刷新navigator.serviceWorker.addEventListener('message',

(event)

event.data.version);window.location.reload();}});//

permission

Notification.requestPermission();if

(permission

{console.warn('用户拒绝通知权限');return;}//

pushconst

registration.pushManager.subscribe({userVisibleOnly:

urlBase64ToUint8Array(VAPID_PUBLIC_KEY)});console.log('Push

订阅成功:',

urlBase64ToUint8Array(base64String)

{const

outputArray;}window.addEventListener('load',

=>

{initServiceWorkerAndPush().catch(err

=>

JsonSerializer.Deserialize<PushSubscription>(subscriptionJson);var

payload

client.SendNotificationAsync(subscription,JsonSerializer.Serialize(payload),vapidDetails);

{"title":"测试","body":"来自DevTools的推送"}；

WebApp.cs）嵌一段实际的控制器示例。