Firebase'i progresif web uygulamasında (PWA) kullanma

Progresif Web Uygulamaları (PWA'lar), kullanıcılarınızın güvenilir, hızlı ve ilgi çekici bir deneyim yaşamasını sağlamak için bir dizi yönergeye uyan web uygulamalarıdır.

Firebase, uygulamanıza verimli bir şekilde progresif özellikler ekleyerek birçok PWA en iyi uygulamasını karşılamanıza yardımcı olabilecek çeşitli hizmetler sunar. Örneğin:

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

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

Güvenilir ve güvenli

Sitenize hizmet sunmaktan kimlik doğrulama akışı uygulamaya kadar, PWA'nızın güvenli ve güvenilir bir iş akışı sağlaması çok önemlidir.

PWA'nızı HTTPS üzerinden sunma

HTTPS, web sitenizin bütünlüğünü, 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 yayınlayabilirsiniz. Barındırma hizmetimiz, özel alanınız için SSL sertifikasını otomatik olarak ve ücretsiz olarak sağlar.

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

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

FirebaseUI, Firebase Authentication'ye dayalı, duyarlı bir kimlik doğrulama akışı sağlar. Bu akış, uygulamanızın az çabayla gelişmiş ve güvenli bir oturum açma akışı 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ıyla ilgili en iyi uygulamaları takip eder.

FirebaseUI, birden fazla oturum açma sağlayıcısını destekler. Oturum açma sağlayıcılar için yapılandırılmış yalnızca birkaç kod satırıyla uygulamanıza FirebaseUI yetkilendirme akışını 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 dokümanlarımızı inceleyin.

Kullanıcıların cihazlar arasında oturum açmasını sağlama

FirebaseUI kullanarak tek dokunuşla oturum açma özelliğini entegre ettiğinizde uygulamanız, kullanıcıların oturum açma kimlik bilgileriyle ayarladıkları farklı cihazlarda bile kullanıcıların oturumunu otomatik olarak açabilir.

Yapılandırmanın bir satırını değiştirerek FirebaseUI ile 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 dokümanlarımızı inceleyin.

Hızlı yükleme süresi

Yüksek performans, kullanıcı deneyimini iyileştirir, kullanıcıları elde tutmaya yardımcı olur ve dönüşümü artırır. Düşük "ilk anlamlı gösterim süresi" ve "etkileşime hazır olma süresi" gibi mükemmel performans, PWA'lar için önemli bir gerekliliktir.

Statik öğelerinizi verimli bir şekilde yayınlayın

Firebase Hosting, içeriğinizi küresel bir CDN üzerinden yayınlar ve HTTP/2 ile uyumludur. Statik öğelerinizi Firebase ile barındırdığınızda tüm bunlar sizin için yapılandırılır. Bu hizmetten yararlanmak için yapmanız gereken başka bir işlem yoktur.

Dinamik içeriğinizi önbelleğe alma

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

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

Bu hizmet, arka ucunuza yapılan ek çağrıları önlemenize, yanıtları hızlandırmanıza ve maliyetleri düşürmenize olanak tanır.

Firebase Hosting ile dinamik içerik (Cloud Functions veya Cloud Run tarafından desteklenir) yayınlamayı ve CDN önbelleğe almayı nasıl etkinleştireceğinizi öğrenmek için dokümanlarımızı inceleyin.

Hizmetleri yalnızca gerektiğinde yükleme

İlk indirme boyutunu minimumda tutmak için Firebase JavaScript SDK'sı kısmen içe aktarılabilir. Bu modüler SDK'dan yararlanarak uygulamanızın ihtiyaç duyduğu Firebase hizmetlerini yalnızca ihtiyaç duyulduğunda içe aktarın.

Örneğin, uygulamanızın ilk boyama hızını artırmak için uygulamanız önce Firebase Authentication yükleyebilir. Ardından, uygulamanızın ihtiyacı olduğunda Cloud Firestore gibi diğer Firebase hizmetlerini yükleyebilirsiniz.

webpack gibi bir paket yöneticisi kullanarak önce 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 Cloud Firestore kitaplığını dinamik içe aktarmaları kullanarak yükleyin:

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

Ağ esnekliği

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şme

Cloud Firestore, çevrimdışı veri kalıcılığını destekler. Bu özellik, uygulamanızın veri katmanının çevrimdışı olarak şeffaf bir şekilde çalışmasını sağlar. Statik öğelerinizi önbelleğe almak için Service Worker'larla birlikte kullanıldığında PWA'nız çevrimdışı olarak tam işlevli çalışabilir. Tek bir kod satırıyla çevrimdışı veri kalıcılığını etkinleştirebilirsiniz:

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

Çevrimdışı yetkilendirme durumunu koruma

Firebase Authentication, oturum açma verilerinin yerel bir önbelleğini tutar. Bu sayede, daha önce oturum açmış bir kullanıcı çevrimdışı olsa bile kimliği doğrulanmış olarak kalabilir. Oturum açma durumu gözlemcisi normal şekilde çalışır ve kullanıcı çevrimdışı durumdayken uygulamayı yeniden yüklese bile tetiklenir:

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

Cloud Firestore ve Firebase Authentication ile çalışmaya başlamak için belgelerimizi inceleyin.

Kullanıcılarla etkileşim kurma

Kullanıcılarınız, uygulamanızda yeni özellikler yayınladığınızda bunu öğrenmek ister ve kullanıcı etkileşimini yüksek tutmak istersiniz. PWA'nızı, kullanıcılarınıza proaktif ve sorumlu bir şekilde ulaşacak şekilde ayarlayın.

Kullanıcılarınıza push bildirimleri gösterme

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

Kullanıcı yeniden etkileşimini otomatikleştirme

Cloud Functions for Firebase'i kullanarak, kullanıcılarınıza bulut etkinliklerine (ör. Cloud Firestore'e veri yazma veya kullanıcı hesabı silme) dayalı olarak yeniden etkileşim mesajları gönderin. Ayrıca, kullanıcı yeni bir takipçi kazandığında kullanıcıya push bildirimi de 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);
    });