chrome离线通知
首页 > >    作者:lininn   2020年11月3日 10:49 星期二   热度:46°   百度已收录  
时间:2020-11-3 10:49   热度:46° 

首先创建renderKey.js


const webpush = require('web-push');
//VAPID keys should only be generated only once.
const vapidKeys = webpush.generateVAPIDKeys();
console.log(vapidKeys.publicKey, vapidKeys.privateKey);

获取key后新建html文件引入js,如下

index.js

navigator.serviceWorker.register("sw.js").then(function(reg){
    console.log("Yes, it did register service worker.");
    if (window.PushManager) {
        reg.pushManager.getSubscription().then(subscription => {
            // 如果用户没有订阅
            if (!subscription) {
              console.log('没有订阅');
                subscribeUser(reg);
            } else {
                console.log("You have subscribed our notification",subscription);
            }       
        });     
    }
}).catch(function(err) {
    console.log("No it didn't. This happened: ", err)
});



function subscribeUser(swReg) {
  //后端生成的public key
  var applicationServerPublicKey='BMTDJhVkVFXYurncsdgoKhAlTo8fleSp_guJNHR32wHJfpQA9mkm9vXVVcyrsHi9bZIIVz6g4H2gAjVfFp8aSII';
    const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
    swReg.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: applicationServerKey
    })
    .then(function(subscription) {
      console.log(JSON.stringify(subscription));
    })
    .catch(function(err) {
      console.log('订阅失败: ', err);
    });
  }
  
  function urlB64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding)
      .replace(/\-/g, '+')
      .replace(/_/g, '/');
  
    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);
  
    for (let i = 0; i < rawData.length; ++i) {
      outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
  }
  
目录内创建sw.js serverWorker

self.addEventListener('push', function(event) {
    console.log('event',event)
   
    const title = event.data.text();
    const options = {
      body: event.data.text(),
     // icon: './images/logo/logo512.png',
    };
  
    event.waitUntil(self.registration.showNotification(title, options));
  });
  
// 添加notificationclick事件监听器,在点击notification时触发
self.addEventListener('notificationclick', function(event) {
    // 关闭当前的弹窗
    event.notification.close();
    // 在新窗口打开页面
    event.waitUntil(
      clients.openWindow('https://google.com')
    );
  });
  
// // 触发一条通知
// self.registration.showNotification('您有新消息', {
//   body: 'Hello Service Worker',
//   //icon: './images/logo/logo152.png',
// });
打开网站,允许订阅,订阅后复制console内的返回值,创建server.js(后台),替换指定值后进行推送
const webpush = require('web-push');
// const vapidKeys = webpush.generateVAPIDKeys();
const vapidKeys = {
    publicKey: 'BMTDJhVkVFXYurncsdgoKhAlTo8fleSp_guJNHR32wHJfpQA9mkm9vXVVcyrsHi9bZIIVz6g4H2gAjVfFp8aSII',
    privateKey: 'L1OCeyVjzE2xr3hJ2ecZrBUnp7PsZQFt8njgff_dh4A'
  }
  webpush.setVapidDetails(
    'mailto:your@gmail.com',
    vapidKeys.publicKey,
    vapidKeys.privateKey
  )
  //fcm api key
  webpush.setGCMAPIKey('apikey');
  /**前端生成注册后返回的 */
const subscription = {"endpoint":"https://fcm.googleapis.com/fcm/send/dV-98OYa8XU:APA91bFGsvfVTQLxWlPYAz3uaWpRXiX8hSJZ-PDFoQUu9xzpBHnTjl4rU9QtlHoE0DyvT6u26RMdeMInaepjXyQMHZMxLdmZ_bu9ga5fsw9r3tt4oN-ANL_WEyAquYFv2fCBX8w-vtjL","expirationTime":null,"keys":{"p256dh":"BNXlNFqW-k8-xnf4rUu0T2FZ3goCBu8af8H6u_0jrkE_ByqBu_wZyq6QfDgcQTdOoBVxLrVOQ3iSorWmXaU_Z3Q","auth":"zbEcG5EwXNa5ni00Etoqew"}}
webpush.sendNotification(subscription, 'hello myname is push');
关闭网站,我们发现浏览器也能收到通知了




demo:https://github.com/lininn/webOfflinePush

二维码加载中...
本文作者:lininn      文章标题: chrome离线通知
本文地址:?post=485
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn