{
  "name": "피움",
  "short_name": "pium",
  "icons": [
    {
      "src": "/assets/android-icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": "1.0",
      "purpose": "any"
    },
    {
      "src": "/assets/android-icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": "1.5",
      "purpose": "any"
    },
    {
      "src": "/assets/android-icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": "2.0",
      "purpose": "any"
    },
    {
      "src": "/assets/android-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": "3.0",
      "purpose": "any"
    },
    {
      "src": "/assets/android-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": "4.0",
      "purpose": "maskable"
    },
    {
      "src": "/assets/android-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "density": "5.0",
      "purpose": "maskable"
    }
  ],
  "display": "standalone",
  "theme_color": "#1bcc66",
  "background_color": "#ffffff",
  "id": "pium",
  "description": "피움은 여러분의 반려 식물 관리 경험을 기록할 수 있도록 도와주고 각자에게 알맞은 관리법을 빠르게 찾도록 도와주고 있어요.",
  "start_url": "/",
  "dir": "auto",
  "lang": "ko",
  "orientation": "portrait",
  "scope": "/",
  "categories": ["lifestyle", "plant", "indoor-garden"],
  "display_override": ["window-controls-overlay"]
}

<link rel="manifest" href="/assets/manifest.json" />

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(assetCacheName).then((cache) => {
      // 캐시로 저장할 파일을 지정. 어떤 파일을 넣을지는 차후 얘기해 보며 좋을 듯.
			// 캐시 버스팅이 발생하는 ㅍ
      cache.addAll([
        '/main.43e3611a6c9133f38206.bundle.js',
        '/vendors-node_modules_react-dom_client_js-node_modules_react-router-dom_dist_index_js-node_mod-cccd04.261f3e9fe64cb376e09d.bundle.js',
        '/assets/logo.webp',
        '/index.html',
        '/',
      ]);
    })
  );

  // 제어중인 서비스 워커가 존재해도 대기 상태 건너 뜀
  self.skipWaiting();
});

// 기존에 있던 cache 삭제
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (cacheName !== assetCacheName) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );

  // 활성화 즉시 클라이언트를 제어한다.(새로고침 불필요)
  self.clients.claim();
});

// 오프라인 상태라면, 캐시에 저장되어 있는 파일들 fetch로 받아옴
self.addEventListener('fetch', (event) => {
  if (!navigator.onLine) {
    event.respondWith(caches.match(event.request).then((result) => result && result));
  }
});

npm i firebase

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "",
  authDomain: "pium-.firebaseapp.com",
  projectId: "pium-",
  storageBucket: "pium-.appspot.com",
  messagingSenderId: "",
  appId: "12",
  measurementId: "G-"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

import { Messaging, deleteToken, getMessaging, getToken, onMessage } from 'firebase/messaging';

const message = getMessaging(this.app);

import {getToken} from 'firebase/messaging';
import {message} from './'

// 알림 구독 메서드
const subscribeAlert = async () => {
		// 사용자에게 권한 알림 요청 권한을 받는다.
    const permission = await Notification.requestPermission();

		// 알림이 허락되지 않았다면 return;
    if (permission !== 'granted') {
	    addToast({ type: 'info', message: '알림을 허용하지 차단했습니다', time: 3000 });
      return;
    }
	
		// VAPID키를 통해 토큰을 얻는다
    const token = await getToken(message, {
      vapidKey: process.env.VAPID_PUBLIC_KEY ?? '',
    });

    if (token !== null) {
			// 토큰이 있다면 서버에 해당 토큰을 전달한다.
      subscribe(token);
      return;
    }
    addToast({ type: 'error', message: '구독중에 에러가 발생했습니다', time: 3000 });
  };

const subscribe = useMutation({
    mutationFn: async (token: string) => {
      const response = await WebPushSubscribeAPI.subscribe(token);
      throwOnInvalidStatus(response);

      return null;
    },
});

// firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object

const firebaseConfig = {
  apiKey: '',
  authDomain: 'pium-.firebaseapp.com',
  projectId: 'pium-',
  storageBucket: 'pium-.appspot.com',
  messagingSenderId: '',
  appId: '',
  measurementId: 'G-8SL2D547VW',
};

firebase.initializeApp(firebaseConfig);

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

// firebase-messaging-sw.js

messaging.onBackgroundMessage((payload) => {
  const {
    notification: { title, body },
  } = payload;
  // Customize notification here
  const notificationTitle = title;

  const notificationOptions = {
    body: body,
    icon: './assets/favicon-32x32.png',
    badge: './assets/favicon-16x16.png',
    data: '/reminder',
    tag: 'reminder-alert',
    vibrate: [200], // 짝수 인덱스는 진동 시간, 홀수 인덱스는 휴식 시간
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

// devLocalServiceWorker.js
/* eslint-disable no-undef */
importScripts('/firebase-messaging-sw.js');
importScripts('/mockServiceWorker.js');

// index.tsx

if (process.env.NODE_ENV === 'development') {
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  const { worker } = require('./mocks/browser');
  registerServiceWork('/devLocalServiceWorker.js');

  worker.start({
    serviceWorker: {
      url: 'http://localhost:8282/devLocalServiceWorker.js',
    },
  });
}

if (process.env.NODE_ENV === 'production') {
  registerServiceWork('/firebase-messaging-sw.js');
}

// registerServiceWorker.js
const registerPwaServiceWorker = async (workerPath: string) => {
//...
}

// https://github.dev/firebase/firebase-js-sdk
// api.ts
export async function getToken(
  appCheckInstance: AppCheck,
  forceRefresh?: boolean
): Promise<AppCheckTokenResult> {
  const result = await getTokenInternal(
    appCheckInstance as AppCheckService,
    forceRefresh
  );
  if (result.error) {
    throw result.error;
  }
  return { token: result.token };
}

// https://github.dev/firebase/firebase-js-sdk
// token-manager.ts
export async function getTokenInternal(
  messaging: MessagingService
): Promise<string> {
  const pushSubscription = await getPushSubscription( // 여기서 pushSubscription을 얻음
    messaging.swRegistration!,
    messaging.vapidKey!
  );
//...
}

async function getPushSubscription(
  swRegistration: ServiceWorkerRegistration,
  vapidKey: string
): Promise<PushSubscription> {

  const subscription = await swRegistration.pushManager.getSubscription();
  if (subscription) {
    return subscription;
  }

	// 이 단락에서 PushManager를 통해 subscribe를 하고 있습니다.
  return swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    // Chrome <= 75 doesn't support base64-encoded VAPID key. For backward compatibility, VAPID key
    // submitted to pushManager#subscribe must be of type Uint8Array.
    applicationServerKey: base64ToArray(vapidKey)
  });
}

export async function deleteTokenInternal(
  messaging: MessagingService
): Promise<boolean> {
  const tokenDetails = await dbGet(messaging.firebaseDependencies);
  if (tokenDetails) {
    await requestDeleteToken(
      messaging.firebaseDependencies,
      tokenDetails.token
    );
    await dbRemove(messaging.firebaseDependencies);
  }

  // Unsubscribe from the push subscription.
  const pushSubscription =
    await messaging.swRegistration!.pushManager.getSubscription();
  if (pushSubscription) {
    return pushSubscription.unsubscribe();
  }

  // If there's no SW, consider it a success.
  return true;
}

const SwMessagingFactory: InstanceFactory<'messaging'> = (
  container: ComponentContainer
) => {
  const messaging = new MessagingService(
    container.getProvider('app').getImmediate(),
    container.getProvider('installations-internal').getImmediate(),
    container.getProvider('analytics-internal')
  );

  self.addEventListener('push', e => {
    e.waitUntil(onPush(e, messaging as MessagingService));
  });
  self.addEventListener('pushsubscriptionchange', e => {
    e.waitUntil(onSubChange(e, messaging as MessagingService));
  });
  self.addEventListener('notificationclick', e => {
    e.waitUntil(onNotificationClick(e));
  });

  return messaging;
};

// Example: wrapping permission request call inside a button click
const myButton = document.querySelector("button");
myButton.addEventListener("click", async () => {
  let permission = await Notification.requestPermission();
  if (permission === "granted") {
    console.log("Notification permission granted. Requesting for token.");
    let token = await messaging.getToken({
      vapidKey: "<YOUR_PUBLIC_VAPID_KEY_HERE>",
    });
    // do something with the FCM token
  } else {
    console.log("Notification permission denied");
    // Handle denied permission
  }
});

const initialPushStatus = {
	permission: Notification.permission
}

import { Analytics, getAnalytics } from 'firebase/analytics';
import { FirebaseApp, FirebaseOptions, initializeApp } from 'firebase/app';
import { Messaging, deleteToken, getMessaging, getToken, onMessage } from 'firebase/messaging';

const firebaseConfig = {
//... content
};

class FCMMessaging {
  private app: FirebaseApp | null = null;
  private messaging: Messaging | null = null;

  constructor(config: FirebaseOptions) {
    this.app = initializeApp(config);
    this.analytics = getAnalytics(this.app);
  }

  registerMessaging() {
    if (!this.app) throw new Error('메세지 등록을 위해서는 FCM 초기화가 필요합니다.');
    this.messaging = getMessaging(this.app);
  }

  setOnMessaging() {
    if (!this.messaging) return;
    onMessage(this.messaging, (payload) => {
      const { notification } = payload;

      const notificationTitle = notification?.title ?? '피움 알림';
      const notificationOptions = {
        body: notification?.body ?? '내용이 없습니다',
        icon: notification?.icon ?? './assets/favicon-32x32.png',
      };
      const foregroundNotification = new Notification(notificationTitle, notificationOptions);

      foregroundNotification.onclick = function (event) {
        event.preventDefault();
        foregroundNotification.close();
      };
    });
  }

  async getCurrentToken() {
    if (!this.messaging) throw new Error('등록된 메세지가 없어서 토큰을 반환할 수 없습니다');
    const permission = Notification.permission;

    if (permission !== 'granted') return null;

    return await getToken(this.messaging, {
      vapidKey: process.env.VAPID_PUBLIC_KEY ?? '',
    });
  }

  async deleteCurrentToken() {
    if (!this.messaging) throw new Error('등록된 메세지가 없어서 토큰을 삭제할 수 없습니다');
    return await deleteToken(this.messaging);
  }
}

export default new FCMMessaging(firebaseConfig);

if (!PushStatus.getIsSupport()) {
    addToast({ type: 'warning', message: '지원하지 않는 브라우저입니다', time: 3000 });
    return;
  }

  // subscribe를 하지 않으려면 해당 토큰을 제거해야 한다.

  const permission = await Notification.requestPermission();
  PushStatus.setPermission(permission); // 전역 pushStatus를 알 수 있는 객체

<Suspense fallback={<Spinner/>}>
  <PushToggle />
</Suspense>

const { currentSubscribe, subscribeAlert, unSubscribeAlert, pending } = usePushAlert();

if (pending){
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  throw new Promise(() => {});
}

const [isTokenPending, setIsTokenPending] = useState(false);

const subscribeAlert = async () => {
//...
  const permission = await Notification.requestPermission();
  PushStatus.setPermission(permission);

  if (permission !== 'granted') {
    addToast({ type: 'info', message: '알림이 허용되지 않았습니다', time: 3000 });
    return;
  }
  const token = PushStatus.getCurrentToken();

  if (token !== null) {
    subscribe(token);
    return;
  }

  try {
    setIsTokenPending(true);
    const result = await FCMMessaging.getCurrentToken();
    if (result === null) throw new Error();
    setIsTokenPending(false);
    subscribe(result);
  } catch (error) {
    addToast({ type: 'error', message: '구독중에 에러가 발생했습니다', time: 3000 });
  }
};