目前用的方案是:Service Worker API
代码是参考这篇文章: https://tahazsh.com/blog/web-push-notifications 在浏览器上可以正常推送,但是在苹果手机 Safari 上没有任何反应 T.T
下面是代码:
export default defineNuxtPlugin(async () => {
let registration
const defaultNotification = {
title: 'iNotify !',
body: 'You have a new message.',
openurl: ''
}
function NotifyToServer(config) {
if (config)
this.init(config)
}
NotifyToServer.prototype = {
init(config) {
if (!config)
config = {}
this.key = config.key || 'BDQXntRO2oL7cnk3-CC30T4anHw2D-UGFz8UrzjtuxUKVy9dD3nqxRyxnZSM-ssY1wk976yw945mnmayW1_zyks'
this.title = config.title || document.title // 标题
this.notification = config.notification || defaultNotification
this.onLoadApp()
return this
},
async onLoadApp() {
// 测试密钥 https://web-push-codelab.glitch.me/
const YOUR_PUBLIC_KEY = this.key
console.log('🚀 ~ file: serverNotify.client.js:27 ~ onLoadApp ~ YOUR_PUBLIC_KEY:', YOUR_PUBLIC_KEY)
// 这里为 false
if ('serviceWorker' in navigator && 'PushManager' in window) {
// 激活 serviceWorker
registration = await navigator.serviceWorker.register('./sw.js')
console.log('🚀 ~ file: serverNotify.client.js:30 ~ onLoadApp ~ registration:', registration)
const permissionResult = await Notification.requestPermission()
console.log('🚀 ~ file: serverNotify.client.js:33 ~ onLoadApp ~ permissionResult:', permissionResult)
if (permissionResult !== 'granted')
return
try {
// service worker 处于激活状态时,可以使用 PushManager.subscribe() 来订阅推送通知
const pushSubscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
// https://developer.mozilla.org/zh-CN/docs/Web/API/PushManager/subscribe 由服务端生成密钥
applicationServerKey: YOUR_PUBLIC_KEY
})
// 端点及发送数据需要的加密密钥
console.log('用户已订阅推送通知 pushSubscription', JSON.stringify(pushSubscription))
// 例如显示一条通知
// registration.showNotification('订阅成功')
}
catch (err) {
console.log('用户拒绝了推送通知', err)
}
return this
}
},
send(json) {
// const title = json.title || this.title
// // 例如显示一条通知
// registration.showNotification(title, json)
navigator.serviceWorker.ready.then(registration => {
registration.pushManager.getSubscription().then(subscription => {
console.log(`=====>subscription`, subscription)
if (subscription) {
const title = json.title || this.title
// 例如显示一条通知
registration.showNotification(title, json)
// 使用获取到的订阅信息模拟一个 push 事件
}
else
console.log('无法获取订阅信息')
}).catch(error => {
console.log('获取订阅信息失败: ', error)
})
})
}
}
const iNotifyToServer = new NotifyToServer({
})
return {
provide: { iNotifyToServer }
}
})
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.