// 安裝Service Worker
self.addEventListener('install', function(event) {
    console.log('Service Worker 安裝成功');
});

// Service Worker 激活
self.addEventListener('activate', function(event) {
    console.log('Service Worker 激活成功');
});

// 監聽推播事件
self.addEventListener('push', function(event) {
    var title = '推播通知';
    var options = {
        body: '這是一條推播消息。',
        icon: 'icon.png',
        badge: 'badge.png'
    };

    event.waitUntil(self.registration.showNotification(title, options));
});

// 在主要的JavaScript檔案中
function urlBase64ToUint8Array(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;
}

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    console.log('Service Worker 注册成功:', registration);
  }).catch(function(error) {
    console.log('Service Worker 注册失败:', error);
  });
}
navigator.serviceWorker.ready.then(function(registration) {
  if (!registration.pushManager) {
    alert('此瀏覽器不支持推播通知');
    return false;
  }
const applicationServerKey = 'your publice key';
  
// 訂閱推播
  registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(applicationServerKey)
  }).then(function(subscription) {
    console.log('推播訂閱成功:', subscription);

    // 發送訂閱資訊到後端
    fetch('https://your_webpush_server/subscribe', {
      method: 'post',
      headers: {
        'Content-type': 'application/json'
      },
      body: JSON.stringify({
        subscription: subscription
      }),
    });
  }).catch(function(error) {
    console.log('推播訂閱失败:', error);
  });

const express = require('express');
const cors = require('cors');

const bodyParser = require('body-parser');
const app = express();
app.use(cors());
app.use(bodyParser.json());

const subscriptions = {}; // 在實際應用中，應使用資料庫儲存訂閱資訊

const webPush = require('web-push');
    // 設置你的VAPID鑰匙
    webPush.setVapidDetails(
        'mailto:[email protected]',
      	'your publiec key',
      	'your private key'
      };

app.post('/subscribe', (req, res) => {
    const subscription = req.body;
    const key = subscription.endpoint; // 使用endpoint作為唯一鑰匙
    subscriptions[key] = subscription;

    console.log('subscripted');
    console.log(subscription);
    
    // subscription是從前端發送到後端的訂閱對象
    webPush.sendNotification(subscription.subscription, '消息內容')
        .then(result => console.log('推播成功'))
        .catch(err => console.log('推播失敗', err));

    res.status(200).json({message: '訂閱成功'});
});

app.listen(8060, () => console.log('伺服器運行在8060端口'));

npx web-push generate-vapid-keys