콘솔로 이동

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

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

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

PWA 권장사항 Firebase 서비스 활용의 이점
안전하게 보호
  • Firebase 호스팅은 맞춤 도메인 및 기본 Firebase 하위 도메인을 위한 무료 SSL 인증서를 프로비저닝합니다.
  • Firebase 인증은 사용자가 여러 장치에서 안전하게 로그인할 수 있도록 합니다.
  • FirebaseUI는 인증 흐름을 위한 권장사항을 구현합니다.
빠른 로드 시간
  • Firebase 호스팅은 HTTP/2를 지원하고 정적 및 동적 콘텐츠 모두를 글로벌 CDN에 캐시합니다.
  • Firebase 자바스크립트 SDK는 모듈형이며, 필요할 때 라이브러리를 동적으로 가져올 수 있습니다.
네트워크 탄력성
  • Cloud Firestore를 사용하면 실시간 및 오프라인으로 데이터를 저장하고 액세스할 수 있습니다.
  • Firebase 인증은 오프라인일 때도 사용자의 인증 상태를 유지합니다.
사용자와 소통하기
  • Firebase 클라우드 메시징을 사용하면 사용자의 기기에 푸시 메시지를 보낼 수 있습니다.
  • Firebase용 Cloud Functions를 사용하면 클라우드 이벤트를 바탕으로 재참여 메시지를 자동화할 수 있습니다.

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

Firebase를 사용하여 PWA를 만드는 예는 오픈소스 샘플 애플리케이션인 FriendlyPix를 살펴보세요. Firebase를 웹 앱에 추가하려면 시작 가이드를 참조하세요.

안전하게 보호

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

HTTPS를 통해 PWA 제공

성능이 뛰어난 호스팅 서비스

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

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

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

안전한 인증 흐름 제공

FirebaseUIFirebase 인증을 기반으로 하는 삽입형 응답 인증 흐름을 제공함으로써 앱에서 세밀하고 안전한 로그인 흐름을 쉽게 통합할 수 있도록 합니다. FirebaseUI는 사용자 기기의 화면 크기에 맞춰 자동으로 조정되며 인증 흐름을 위한 권장사항을 따릅니다.

삽입형 응답 인증 흐름

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

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'url-to-redirect-to-on-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-to-redirect-to-on-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 문서를 참조하세요.

빠른 로드 시간

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

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

성능이 뛰어난 호스팅 서비스

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

동적 콘텐츠 캐시

Firebase 호스팅을 사용할 때 웹 앱은 Cloud Functions에 의해 서버쪽에서 생성된 동적 콘텐츠도 제공할 수 있습니다. 이 서비스를 사용함으로써 한 줄의 코드로 강력한 글로벌 CDN에 동적 콘텐츠를 캐시할 수 있습니다.

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

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

Firebase 호스팅을 사용하여 동적 콘텐츠를 제공하고(Cloud Functions를 통해) CDN 캐싱을 사용하는 방법에 대해 알아보려면 Firebase 문서를 참조하세요.

필요할 때만 서비스 로드

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

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

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

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 ...
});

Firebase를 통한 부분 및 동적 가져오기의 예를 보려면 이 기법을 보여주는 오픈소스 샘플 애플리케이션 FriendlyPix를 살펴보세요.

네트워크 탄력성

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

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

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

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

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

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

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

Cloud FirestoreFirebase 인증을 시작하는 방법은 Firebase 문서를 참조하세요.

사용자와 소통하기

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

사용자에게 푸시 알림 표시

Firebase 클라우드 메시징을 사용하면 서버에서 사용자의 기기로 관련 알림을 푸시할 수 있습니다. 이 서비스를 사용하면 앱이 닫혀 있을 때도 사용자에게 알림을 제때 표시할 수 있습니다.

사용자 재참여 자동화

Firebase용 Cloud Functions를 사용하여 클라우드 이벤트(예: 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);
    });