프로그레시브 웹 앱 (PWA)에서 Firebase 사용

프로그레시브 웹 앱(PWA)은 사용자에게 안정적이고, 빠르고, 몰입도 높은 환경을 제공하기 위한 일련의 가이드라인을 따르는 웹 앱입니다.

Firebase는 다음을 비롯한 다수의 PWA 권장사항을 충족시키기 위해 앱에 프로그레시브 기능을 효율적으로 추가할 수 있는 여러 서비스를 제공합니다.

이 페이지는 교차 브라우저 Firebase JavaScript SDK를 사용하여 최신 고성능 PWA를 빌드하는 데 있어 Firebase 플랫폼에서 얻을 수 있는 이점을 설명합니다.

Firebase를 웹 앱에 추가하려면 시작 가이드를 참조하세요.

안전하게 보호

사이트를 제공하는 것부터 인증 흐름을 제공하는 것까지 PWA가 안전하고 믿을 수 있는 워크플로를 제공하는 것이 중요합니다.

HTTPS를 통해 PWA 제공

HTTPS는 웹사이트 무결성, 사용자의 개인 정보 및 보안을 보호합니다. PWA는 HTTPS를 통해 제공되어야 합니다.

Firebase Hosting은 기본적으로 HTTPS를 통해 앱 콘텐츠를 제공합니다. 무료 Firebase 하위 도메인이나 자체 커스텀 도메인에서 콘텐츠를 제공할 수 있습니다. Google 호스팅 서비스는 커스텀 도메인의 SSL 인증서를 무료로 자동 프로비저닝합니다.

Firebase 플랫폼에서 PWA를 호스트하는 방법을 알아보려면 Firebase Hosting 시작 가이드를 참조하세요.

안전한 인증 흐름 제공

FirebaseUI는 Firebase Authentication을 기반으로 하는 삽입형 응답 인증 흐름을 제공하므로 정교하면서 안전한 로그인 과정을 간편하게 앱에 통합할 수 있습니다. FirebaseUI는 사용자 기기의 화면 크기에 맞춰 자동으로 조정되며 인증 흐름 관련 권장사항을 따릅니다.

FirebaseUI는 멀티 로그인 공급업체를 지원합니다. 로그인 공급업체에 구성된 단 몇 줄의 코드를 통해 FirebaseUI 인증 흐름을 앱에 추가합니다.

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'URL',  // the URL to direct to upon success
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ]
};

// Initialize the FirebaseUI widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);

FirebaseUI에서 제공하는 다양한 구성 옵션에 대해 자세히 알아보려면 GitHub 문서를 참조하세요.

여러 기기에서 사용자 로그인

FirebaseUI를 사용하여 원탭 로그인을 통합하면 사용자가 자신의 로그인 사용자 인증 정보로 설정한 다른 기기에서도 앱에 자동으로 로그인할 수 있습니다.

구성에서 한 줄을 변경하여 FirebaseUI를 사용하는 원탭 로그인을 사용 설정하세요.

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'URL',  // the URL to direct to upon success
  authMethod: 'https://accounts.google.com',
  signInOptions: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  // Enable one-tap sign-in.
  credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO
};

FirebaseUI에서 제공하는 다양한 구성 옵션에 대해 자세히 알아보려면 GitHub 문서를 참조하세요.

빠른 로드 시간

뛰어난 성능은 사용자 환경을 개선하고, 사용자 유지에 도움이 되며, 전환을 늘립니다. '유의미한 첫 페인트까지의 시간' 및 '상호작용 시작 시간' 단축과 같은 우수한 성능이 PWA의 중요 요구사항입니다.

정적 애셋을 효율적으로 제공

Firebase Hosting은 글로벌 CDN을 통해 콘텐츠를 제공하며 HTTP/2와 호환됩니다. Firebase를 통해 정적 애셋을 호스트할 때는 이 모든 것이 자동으로 구성됩니다. 이 서비스를 활용하기 위해 추가로 수행해야 하는 작업이 없습니다.

동적 콘텐츠 캐시

Firebase Hosting을 사용하면 웹 앱은 Cloud Functions 또는 Cloud Run 컨테이너화된 앱을 통해 서버 측에서 생성된 동적 콘텐츠도 제공할 수 있습니다. 이 서비스를 사용하면 코드 한 줄만으로 강력한 글로벌 CDN에서 동적 콘텐츠를 캐시할 수 있습니다.

res.set('Cache-Control', 'public, max-age=300, s-maxage=600');

이 서비스 덕분에 백엔드에 대한 추가 호출을 방지하고, 응답 속도를 높이고, 비용을 줄일 수 있습니다.

Firebase Hosting을 사용하여 동적 콘텐츠(Cloud Functions 또는 Cloud Run 제공)를 제공하고 CDN 캐싱을 사용 설정하는 방법은 Firebase 문서를 참조하세요.

필요할 때만 서비스 로드

Firebase JavaScript SDK를 부분적으로 가져와서 초기 다운로드 크기를 최소한으로 유지할 수 있습니다. 이 모듈형 SDK를 활용하여 앱에 필요한 Firebase 서비스를 필요할 때만 가져오세요.

예를 들어 앱의 초기 페인트 속도를 높이기 위해 우선 앱에서 Firebase Authentication을 로드할 수 있습니다. 그런 다음 필요에 따라 Cloud Firestore와 같은 다른 Firebase 서비스를 로드할 수 있습니다.

webpack과 같은 패키지 관리자를 사용하여 Firebase Authentication을 먼저 로드할 수 있습니다.

import firebase from 'firebase/app';
import 'firebase/auth';

// Load Firebase project configuration.
const app = firebase.initializeApp(firebaseConfig);

그런 다음 데이터 영역에 액세스해야 할 때 다음 동적 가져오기를 사용하여 Cloud Firestore 라이브러리를 로드합니다.

import('firebase/firestore').then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

네트워크 탄력성

사용자의 인터넷 액세스가 불안정할 수도 있습니다. PWA는 기본 모바일 앱과 비슷하게 작동해야 하며, 가능하면 오프라인에서도 작동해야 합니다.

오프라인에서 앱 데이터에 액세스

Cloud Firestore는 앱의 데이터 영역이 오프라인에서 투명하게 작동할 수 있도록 하는 오프라인 데이터 지속성을 지원합니다. 서비스 워커와 함께 정적 애셋을 캐시함으로써 PWA는 오프라인에서 완벽하게 작동할 수 있습니다. 한 줄의 코드로 오프라인 데이터 지속성을 사용 설정할 수 있습니다.

firebase.firestore().enablePersistence().then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

오프라인에서 인증 상태 유지

Firebase Authentication은 로그인 데이터의 로컬 캐시를 유지함으로써 이전에 로그인한 사용자가 오프라인일 때도 인증된 상태를 유지할 수 있게 해줍니다. 오프라인에서 사용자가 앱을 다시 로드하더라도 로그인 상태 관찰자가 정상적으로 작동하고 트리거합니다.

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed-in ...
  } else {
    // User is signed out ...
  }
});

Cloud Firestore 및 Firebase Authentication을 시작하는 방법은 Firebase 문서를 참조하세요.

사용자와 소통하기

사용자는 언제 앱의 새 기능이 출시되는지를 알고 싶어하며, 개발자는 사용자와 긴밀히 소통하고자 합니다. PWA가 선제적으로 책임감 있게 사용자에게 다가가도록 설정하세요.

사용자에게 푸시 알림 표시

Firebase Cloud Messaging을 사용하면 서버에서 사용자의 기기로 관련 알림을 푸시할 수 있습니다. 이 서비스를 사용하면 앱이 종료 상태일 때에도 사용자에게 알림을 제때 표시할 수 있습니다.

사용자 재참여 자동화

Cloud Functions for Firebase를 사용하여 클라우드 이벤트(예: Cloud Firestore에 데이터 쓰기 또는 사용자 계정 삭제)를 기반으로 사용자 재참여 메시지를 보낼 수 있습니다. 사용자에게 새로운 팔로어가 생기면 사용자에게 푸시 알림을 보낼 수도 있습니다.

// Send push notification when user gets a new follower.
exports.sendNotification = functions.database.ref('/followers/{userUID}/{followerUID}')
    .onWrite((change, context) => {
      const userUID = context.params.userUID;
      const followerUID = context.params.followerUID;

      const tokens = getUserDeviceTokens(userUID);
      const name = getUserDisplayName(followerUID);

      // Notification details.
      const payload = {
        notification: {
          title: 'You have a new follower!',
          body: `${name} is now following you.`
        }
      };
      return admin.messaging().sendToDevice(tokens, payload);
    });