Push API

• 브라우저를 통해 푸시 알림을 보낼 수 있게 해주는 API
• service worker와 함께 사용되어야 한다.
  • 백그라운드에서 실행되는 스크립트로, 웹 애플리케이션과 브라우저 간의 중간에 위치하여 푸시 알림 및 오프라인 콘텐츠 캐싱과 같은 기능을 제공.

Notification API

Push API를 사용하기 위해서 PWA 환경 세팅이 필수인가?

• Push API를 사용하기 위해서는 서비스 워커 세팅 및 등록이 필요하다.
• next-pwa는 서비스 워커 등록 기능이 있을 뿐, 기본적으로 브라우저가 지원하는 Service Worker API를 활용하여 구현할 수 있다.

// pages/_app.js

import { useEffect } from 'react';

function App({ Component, pageProps }) {
  useEffect(() => {
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
          .then(registration => {
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
          })
          .catch(error => {
            console.log('ServiceWorker registration failed: ', error);
          });
      });
    }
  }, []);

  return <Component {...pageProps} />;
}

export default App;

PWA(Progressive Web App)

PWA란

모바일 앱과 웹 앱의 장점을 결합하여 사용자 경험을 향상시키는 웹 애플리케이션 형태

특징

1. 오프라인 지원

PWA는 서비스 워커를 사용하여 오프라인 상태에서도 동작할 수 있다. 사용자가 인터넷에 연결되어 있지 않더라도 앱에 접속하여 콘텐츠를 탐색하고 작업할 수 있다.

2. 홈 화면에 아이콘 추가

사용자가 웹 앱을 홈 화면에 추가할 수 있으며, 이렇게 추가된 PWA 아이콘을 클릭하여 앱을 쉽게 시작할 수 있다.

3. 네이티브 앱과 유사한 사용자 경험

PWA는 네이티브 앱과 유사한 사용자 경험을 제공한다. 전체 화면 모드, 푸시 알림, 디바이스 기능 접근 등의 기능을 활용하여 사용자에게 편리하고 직관적인 앱 경험을 제공한다.

4. 빠른 로딩 속도

PWA는 캐싱과 prefetch를 통해 로딩 속도를 향상시킨다. 사용자가 웹 앱을 방문할 때 필요한 자원을 미리 캐싱하고, 콘텐츠를 더 빨리 로드하여 사용자 경험을 개선한다.

5. 안전성과 보안

HTTPS를 사용하여 통신하고, 서비스 워커를 통해 캐싱된 콘텐츠를 안전하게 제공함으로써 데이터 보안과 개인정보 보호를 강화한다.

Service Worker

서비스 워커란

브라우저와 웹 애플리케이션 사이 중간에 위치하여 다양한 기능을 수행하는 백그라운드 스크립트로 주로 웹 애플리케이션의 오프라인 지원, 푸시 알림, 백그라운드 동기화 및 네트워크 요청 중간 처리 등의 기능을 수행한다.

서비스 워커 특징

• 서비스 워커는 웹 애플리케이션이 오프라인 상태에서도 작동할 수 있도록 해야한다.
• 사용자가 오프라인 상태일 때도 앱을 로드하고, 이전에 캐시된 콘텐츠를 제공하여 사용자 경험을 향상시킬 수 있다.
• 백그라운드에서 동작하기 때문에 사용자의 주요 스레드를 차단하지 않고 비동기적으로 작업을 처리할 수 있다.

주요 기능

1. 네트워크 요청 중간 처리

서비스 워커는 브라우저의 HTTP 요청을 가로채고, 네트워크 요청을 캐시에서 가져오거나 온라인 상태에서 요청을 보낼 수 있다. 캐시된 리소스를 사용하여 웹 애플리케이션의 성능을 향상시킬 수 있다.

• MSW(Mock Service Worker)는 실제로 서비스 워커로 동작하지는 않으며, 테스트 목적으로 사용되는 가짜 서버를 제공하는 라이브러리.

2. 오프라인 지원

서비스 워커는 웹 애플리케이션이 오프라인에서도 동작할 수 있도록 한다. 사용자가 오프라인 상태일 때도 캐시된 콘텐츠를 표시하여 사용성을 유지한다.

• 오프라인에서도 도서 검색 및 읽기 기능
• 오프라인에서 가능한 게임

3. 푸시 알림

서비스 워커는 브라우저로부터 푸시 알림을 받고 사용자에게 알림을 표시할 수 있다. 이를 통해 백그라운드에서도 사용자에게 중요한 정보를 전달할 수 있다.

4. 백그라운드 동기화

서비스 워커는 백그라운드에서 주기적으로 실행되며 데이터를 동기화하거나 백그라운드 작업을 수행할 수 있다. 이를 통해 애플리케이션이 온라인 상태일 때 백그라운드에서 데이터를 업데이트하거나 작업을 처리할 수 있다.

질문

• 파이어베이스에서만 등록하면 되는건지? 아니면 웹 자체에도 세팅이 필요한건지?
  파이어베이스의 세팅값으로 서비스 워커 파일을 생성 후, 웹 자체에서도 파일 추가 및 등록이 필요하다.

• 백그라운드 스크립트

FCM(Firebase Cloud Messaging)

• 푸시 알림을 쉽게 구현하고 관리할 수 있는 서비스 워커 기능을 제공.
• 서비스 워커 파일을 생성
• 서비스 워커 등록 : 서비스 워커 파일을 웹 루트 경로에 추가하고, 해당 서비스 워커를 등록해줘야한다.