Firebase'i aşamalı bir web uygulamasında (PWA) kullanma

Aşamalı Web Uygulamaları (PWA'lar), kullanıcılarınızın güvenilir, hızlı ve ilgi çekici bir deneyime sahip olmasını sağlamayı amaçlayan bir dizi yönergeyi izleyen web uygulamalarıdır.

Firebase, PWA'nın en iyi uygulamalarının çoğunu karşılamak için uygulamanıza ilerici özellikleri verimli bir şekilde eklemenize yardımcı olabilecek çeşitli hizmetler sunar:

PWA'nın en iyi uygulaması Firebase hizmetleri nasıl yardımcı olabilir?
Güvenli
  • Firebase Hosting, özel alan adınız ve varsayılan Firebase alt alan adınız için ücretsiz olarak SSL sertifikaları sağlar.
  • Firebase Authentication, kullanıcılar arasında farklı cihazlarda güvenli bir şekilde oturum açmanıza olanak tanır.
  • FirebaseUI, kimlik doğrulama akışları için en iyi uygulamaları uygular.
Hızlı yükleme süresi
  • Firebase Hosting, HTTP/2'yi destekler ve hem statik hem de dinamik içeriğinizi küresel bir CDN'de önbelleğe alabilir.
  • Firebase JavaScript SDK'sı modülerdir ve ihtiyaç duyulduğunda kitaplıkları dinamik olarak içe aktarabilirsiniz.
Ağ dayanıklılığı
  • Cloud Firestore ile verileri gerçek zamanlı ve çevrimdışı olarak depolayabilir ve bunlara erişebilirsiniz.
  • Firebase Authentication, çevrimdışıyken bile kullanıcının kimlik doğrulama durumunu korur.
Kullanıcıların ilgisini çekin
  • Firebase Cloud Messaging, kullanıcılarınızın cihazlarına push mesajları göndermenize olanak tanır.
  • Firebase için Cloud Functions ile bulut olaylarına göre yeniden etkileşim mesajlarını otomatikleştirebilirsiniz.

Bu sayfada, Firebase platformunun, tarayıcılar arası Firebase JavaScript SDK'mızı kullanarak modern, yüksek performanslı bir PWA oluşturmanıza nasıl yardımcı olabileceğine dair bir genel bakış sunulmaktadır.

Firebase'i web uygulamanıza eklemek için başlangıç ​​kılavuzumuzu ziyaret edin.

Güvenli

Sitenize hizmet vermekten kimlik doğrulama akışını uygulamaya kadar PWA'nızın güvenli ve güvenilir bir iş akışı sağlaması kritik öneme sahiptir.

PWA'nızı HTTPS üzerinden sunun

Performanslı barındırma hizmeti

HTTPS, web sitenizin bütünlüğünü korur ve kullanıcılarınızın gizliliğini ve güvenliğini korur. PWA'lar HTTPS üzerinden sunulmalıdır.

Firebase Hosting , varsayılan olarak uygulamanızın içeriğini HTTPS üzerinden sunar. İçeriğinizi ücretsiz bir Firebase alt alan adında veya kendi özel alan adınızda sunabilirsiniz. Barındırma hizmetimiz, özel alan adınız için otomatik olarak ve hiçbir ücret ödemeden bir SSL sertifikası sağlar.

PWA'nızı Firebase platformunda nasıl barındırabileceğinizi öğrenmek için Firebase Barındırma başlangıç ​​kılavuzunu ziyaret edin.

Güvenli bir kimlik doğrulama akışı sunun

Anında yanıt veren kimlik doğrulama akışı

FirebaseUI , Firebase Authentication'ı temel alan hızlı yanıt veren bir kimlik doğrulama akışı sağlayarak uygulamanızın düşük çabayla gelişmiş ve güvenli bir oturum açma akışını entegre etmesine olanak tanır. FirebaseUI, kullanıcının cihazlarının ekran boyutuna otomatik olarak uyum sağlar ve kimlik doğrulama akışlarına yönelik en iyi uygulamaları takip eder.

FirebaseUI çoklu oturum açma sağlayıcılarını destekler. Oturum açma sağlayıcıları için yapılandırılmış yalnızca birkaç satır kodla FirebaseUI kimlik doğrulama akışını uygulamanıza ekleyin:

// 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 tarafından sunulan çeşitli yapılandırma seçenekleri hakkında daha fazla bilgi edinmek için GitHub'daki belgelerimizi ziyaret edin.

Kullanıcıların farklı cihazlarda oturum açması

Cihazlar arasında oturum açma

Tek dokunuşla oturum açmayı entegre etmek için FirebaseUI'yi kullanarak uygulamanız, kullanıcıların oturum açma kimlik bilgileriyle kurdukları farklı cihazlarda bile otomatik olarak oturum açabilir.

Bir yapılandırma satırını değiştirerek FirebaseUI kullanarak tek dokunuşla oturum açmayı etkinleştirin:

// 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 tarafından sunulan çeşitli yapılandırma seçenekleri hakkında daha fazla bilgi edinmek için GitHub'daki belgelerimizi ziyaret edin.

Hızlı yükleme süresi

Mükemmel performansa sahip olmak kullanıcı deneyimini iyileştirir, kullanıcıları elde tutmaya yardımcı olur ve dönüşümü artırır. Düşük " ilk anlamlı boyama süresi" ve " etkileşime geçme süresi " gibi mükemmel performans, PWA'lar için önemli bir gerekliliktir.

Statik varlıklarınızı verimli bir şekilde sunun

Performanslı barındırma hizmeti

Firebase Hosting, içeriğinizi küresel bir CDN üzerinden sunar ve HTTP/2 uyumludur. Statik varlıklarınızı Firebase'de barındırdığınızda tüm bunları sizin için yapılandırırız; bu hizmetten yararlanmak için yapmanız gereken ekstra bir şey yoktur.

Dinamik içeriğinizi önbelleğe alın

Firebase Hosting ile web uygulamanız, Cloud Functions veya Cloud Run konteynerli uygulaması tarafından sunucu tarafında oluşturulan dinamik içeriği de sunabilir. Bu hizmeti kullanarak dinamik içeriğinizi güçlü bir global CDN'de tek satır kodla önbelleğe alabilirsiniz:

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

Bu hizmet, arka tarafınıza yapılan ek çağrılardan kaçınmanıza, yanıtları hızlandırmanıza ve maliyetleri azaltmanıza olanak tanır.

Dinamik içeriği (Cloud Functions veya Cloud Run tarafından desteklenen) nasıl sunabileceğinizi ve Firebase Hosting ile CDN önbelleğe almayı nasıl etkinleştirebileceğinizi öğrenmek için belgelerimizi ziyaret edin.

Hizmetleri yalnızca ihtiyaç duyulduğunda yükleyin

Firebase JavaScript SDK'sı, ilk indirme boyutunu minimum düzeyde tutmak için kısmen içe aktarılabilir . Uygulamanızın ihtiyaç duyduğu Firebase hizmetlerini yalnızca ihtiyaç duyulduğunda içe aktarmak için bu modüler SDK'dan yararlanın.

Örneğin, uygulamanızın başlangıç ​​boyama hızını artırmak için uygulamanız öncelikle Firebase Authentication'ı yükleyebilir. Ardından, uygulamanız bunlara ihtiyaç duyduğunda Cloud Firestore gibi diğer Firebase hizmetlerini yükleyebilirsiniz.

Webpack gibi bir paket yöneticisi kullanarak öncelikle Firebase Authentication'ı yükleyebilirsiniz:

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

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

Ardından, veri katmanınıza erişmeniz gerektiğinde dinamik içe aktarmaları kullanarak Cloud Firestore kitaplığını yükleyin:

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

Ağ dayanıklılığı

Kullanıcılarınızın güvenilir internet erişimi olmayabilir. PWA'lar yerel mobil uygulamalara benzer şekilde davranmalı ve mümkün olduğunda çevrimdışı çalışmalıdır.

Uygulama verilerinize çevrimdışı olarak erişin

Cloud Firestore, uygulamanızın veri katmanının şeffaf bir şekilde çevrimdışı çalışmasına olanak tanıyan çevrimdışı veri kalıcılığını destekler. Statik varlıklarınızı önbelleğe almak için Hizmet Çalışanlarıyla birlikte PWA'nız tamamen çevrimdışı çalışabilir. Çevrimdışı veri kalıcılığını tek satır kodla etkinleştirebilirsiniz:

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

Kimlik doğrulama durumunu çevrimdışı olarak koruyun

Firebase Authentication, oturum açma verilerini yerel bir önbellekte tutar ve daha önce oturum açmış bir kullanıcının çevrimdışıyken bile kimliğinin doğrulanmış halde kalmasına olanak tanır. Oturum açma durumu gözlemcisi normal şekilde çalışacak ve kullanıcınız uygulamayı çevrimdışıyken yeniden yüklese bile tetiklenecektir:

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

Cloud Firestore ve Firebase Authentication'ı kullanmaya başlamak için belgelerimizi ziyaret edin.

Kullanıcıların ilgisini çekin

Kullanıcılarınız, uygulamanız için yeni özellikleri ne zaman yayınlayacağınızı bilmek istiyor ve siz de kullanıcı etkileşimini yüksek tutmak istiyorsunuz. Kullanıcılarınıza proaktif ve sorumlu bir şekilde ulaşmak için PWA'nızı kurun.

Kullanıcılarınıza anlık bildirimler görüntüleyin

Firebase Cloud Messaging ile ilgili bildirimleri sunucunuzdan kullanıcılarınızın cihazlarına aktarabilirsiniz. Bu hizmet, uygulama kapalıyken bile kullanıcılarınıza zamanında bildirimler göstermenize olanak tanır.

Kullanıcının yeniden etkileşimini otomatikleştirin

Firebase için Cloud Functions'ı kullanarak, kullanıcılarınıza bulut olaylarına (örneğin , Cloud Firestore'a veri yazma veya kullanıcı hesabı silme) dayalı olarak yeniden katılım mesajları gönderin. Ayrıca, bir kullanıcı yeni bir takipçi aldığında kullanıcıya anında bildirim gönderebilirsiniz:

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