《Progressive Web Apps》读书笔记六

var endpoint
var key
var authSecret

var vapidPublicKey = '...' // 客户端和服务器端都需要公钥，以确保消息是加密过的

function urlBase64ToUnit8Array(base64String) { // 将VAPID密钥从base64字符串转换成Unit8数组，这是VAPID规范要求的
  const padding = '='.repeat((4 - base64String.length % 4) % 4)
  const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/')

  const rawData = window.atob(base64)
  const outputArray = new Unit8Array(rawData.length)

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i)
  }

  return outputArray
}

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js')
    .then(function (registration) {
      return registration.pushManager.getSubscription() // 获取任何已存在的订阅
        .then(function (subscription) {
          if (subscription) return // 如果已经订阅过了，则无需再次注册
          return registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: urlBase64ToUnit8Array(vapidPublicKey)
          })
            .then(function (subscription) {
              var rawKey = subscription.getKey ? subscription.getKey('p256dh') : '' // 从订阅对象中获取密钥和authSecret
              key = rawKey ? btoa(String.fromCharCode.apply(null, new Unit8Array(rawKey))) : ''
              var rawAuthSecret = subscription.getKey ? subscription.getKey('auth') : ''
              authSecret = rawAuthSecret ? btoa(String.fromCharCode.apply(null, new Unit8Array(rawAuthSecret))) : ''

              endpoint = subscription.endpoint

              return fetch('./register', { // 将详细信息发送给服务器以注册用户
                method: 'post',
                headers: new Headers({
                  'content-type': 'application/json'
                }),
                body: JSON.stringify({
                  endpoint: subscription.endpoint,
                  key: key,
                  authSecret: authSecret
                })
              })
            })
        })
    }).catch(function (err) {
      console.log('serviceWorker registration failed: ', err)
    })
}

const webpush = require('web-push') // 添加必要的依赖
const express = require('express')
const bodyParser = require('body-parser')
const app = express()

webpush.setVapidDetails( // 设置VAPID详情
  'mailto:contact@deanhume.com',
  'BAyb_WgaR0L0pODaR7wWkxJi__tWbM1MPBymyRDFEGjtDCWeRYS9EF7yGoCHLdHJi6hikYdg4MuYaK0XoD0qnoY',
  'p6YVD7t8HkABoez1CvVJ5bl7BnEdKUu5bSyVjyxMBh0'
)

app.post('/register', function (req, res) { // 监听指向 /register 的POST请求
  var endpoint = req.body.endpoint
  saveRegistrationDetails(endpoint, key, authSecret) // 保存用户注册详情，这样可以在稍后阶段向他们发送消息

  const pushSubscription = { // 构建pushSubscription对象
    endpoint: req.body.endpoint,
    keys: {
      auth: req.body.authSecret,
      p256dh: req.body.key
    }
  }

  var body = 'Thank you for registering'
  var iconUrl = 'https://example.com/images/homescreen.png'

  webpush.sendNotification(pushSubscription, // 发送Web推送消息
    JSON.stringify({
      msg: body,
      url: 'http://localhost: 3111',
      icon: iconUrl
    })
  )
    .then(result => res.sendStatus(201))
    .catch(err => console.log(err))
})

app.listen(3111, function () {
  console.log('Web push app listening on port 3111!')
})

// 在 Service Worker 中接收推送通知
self.addEventListener('push', function (event) {
  var payload = event.data ? JSON.parse(event.data.text()) : 'no payload' // 检查服务器端是否发送了任何有效载荷数据
  var title = 'Progressive Times'

  event.waitUntil(
    self.registration.showNotification(title, { // 使用提供的信息来显示Web推送通知
      body: payload.msg,
      url: payload.url,
      icon: payload.icon
    })
  )
})
// 注：payload定义是数据类型，为什么当对象来用？

// 处理用户与推送通知的交互
self.addEventListener('click', function (event) {
  event.notification.close() // 一旦单击了通知标题，它便会关闭

  event.waitUntil( // 检查当前窗口是否已经打开，如果已打开则切换至当前窗口
    clients.matchAll({ type: 'window' })
      .then(function (clientList) {
        for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i]
          if (client.url === '/' && 'focus' in client) return client.focus()
        }
        if (clients.openWindow) return clients.openWindow('http://localhost:3111')
      })
  )
})

// 添加通知动作以及自定义振动模式
self.addEventListener('push', function (event) {
  var payload = event.data ? JSON.parse(event.data.text()) : 'no payload'
  var title = 'Progressive Times'

  event.waitUntil(
    self.registration.showNotification(title, {
      body: payload.msg,
      url: payload.url,
      icon: payload.icon,
      actions: [
        { action: 'voteup', title: 'Vote Up' }, // 出现在通知中的操作
        { action: 'votedown', title: 'Vote Down' }
      ],
      vibrate: [300, 100, 400] // 振动300ms，暂停100ms，再振动400ms
    })
  )
})


// 在 Service Worker 中处理通知动作
self.addEventListener('click', function (event) {
  event.notification.close() // 一旦单击了通知标题，它便会关闭

  if (event.action === 'voteup') { // 确定用户选择了哪个操作
    clients.openWindow('http://localhost:/voteup')
  } else { // 根据用户的选择，将他们引导至正确的URL
    clients.openWindow('http://localhost:/votedown')
  }
}, false)

navigator.serviceWorker.ready
  .then(serviceWorkerRegistration => {
    serviceWorkerRegistration.pushManager.getSubscription() // 检查用户是否已经订阅
      .then(subscription => {
        if (!subscription) return
        subscription.unsubscribe() // 如果用户已订阅就取消订阅
          .then(function () {
            console.log('Successfully unsubscribed!')
          })
          .catch(e => {
            logger.error('Error thrown while unsubscribing from push messaging', e)
          })
      })
  })

document.getElementById('unsubscribe').addEventListener('click', unsubscribe) // 为取消订阅按钮添加单击事件的事件监听器