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

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

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

PWA en iyi uygulamaları Firebase hizmetleri nasıl yardımcı olabilir?
Güvenli ve güvenilir
  • Firebase Hosting, özel alanınız ve varsayılan Firebase alt alanınız için SSL sertifikalarını ücretsiz olarak sağlar.
  • Firebase Authentication, kullanıcıların cihazlarda güvenli bir şekilde oturum açmasını sağlar.
  • 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 modülerdir ve ihtiyaç duyduğunuzda kitaplıkları dinamik olarak içe aktarabilirsiniz.
Ağ esnekliği
  • 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ılarla etkileşim kurma
  • Firebase Cloud Messaging, kullanıcılarınızın cihazlarına push mesajları göndermenize olanak tanır.
  • Cloud Functions for Firebase ile bulut etkinliklerine dayalı yeniden etkileşim mesajlarını otomatikleştirebilirsiniz.

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

Sitenizi yayınlamaktan kimlik doğrulama akışı uygulamaya kadar PWA'nızın güvenli ve güvenilir bir iş akışı sağlaması önemlidir.

PWA'nızı HTTPS üzerinden sunma

Performanslı barındırma hizmeti

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 için başlangıç kılavuzunu inceleyin.

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

Yerleştirilebilir duyarlı kimlik doğrulama akışı

FirebaseUI, Firebase Authentication'e dayalı, hazır bir duyarlı kimlik doğrulama akışı sağlar. Bu akış, uygulamanızın karmaşık ve güvenli bir oturum açma akışını az çabayla 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 uygulamalardan yararlanır.

FirebaseUI birden fazla oturum açma sağlayıcısını destekler. Giriş sağlayıcılar için yapılandırılmış birkaç kod satırı ile 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 dokümanlarımızı ziyaret edin.

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

Cihazlar arasında oturum açma

Tek dokunuşla oturum açma özelliğini entegre etmek için FirebaseUI'i 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çma özelliğini 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ı ziyaret edin.

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" ve "etkileşime hazır olma süresi" gibi mükemmel performans, PWA'lar için önemli bir şarttır.

Statik öğelerinizi verimli bir şekilde yayınlama

Performanslı barındırma hizmeti

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ırız. Bu hizmetten yararlanmak için ek bir işlem yapmanız gerekmez.

Dinamik içeriğinizi önbelleğe alma

Firebase Hosting ile web uygulamanız, Cloud Functions tarafından sunucu tarafında oluşturulan veya Cloud Run kapsayıcı uygulama olan dinamik içerik de yayınlayabilir. Bu hizmeti kullanarak tek bir kod satırı ile 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 ek çağrılar göndermekten kaçınmanıza, yanıtları hızlandırmanıza ve maliyetleri düşürmenize olanak tanır.

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

Hizmetleri yalnızca gerektiğinde yükleme

İlk indirme boyutunu en aza indirmek için Firebase JavaScript SDK'sı kısmen içe aktarılabilir. Uygulamanızın ihtiyaç duyduğu Firebase hizmetlerini yalnızca gerektiğinde içe aktarmak için bu modüler SDK'dan yararlanı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 ihtiyaç duyduğ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 Firestorekitaplığını dinamik içe aktarma 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 bir 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, uygulamanızın veri katmanının çevrimdışıyken şeffaf bir şekilde çalışmasını sağlayan çevrimdışı veri kalıcılığı özelliğini destekler. Statik öğelerinizi önbelleğe almak için Hizmet İşleyicileri ile birlikte kullanıldığında PWA'nız çevrimdışıyken tam olarak çalışabilir. Çevrimdışı veri kalıcılığı özelliğini tek bir kod satırı ile etkinleştirebilirsiniz:

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

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

Firebase Authentication, oturum açma verilerinin yerel önbelleğini tutar. Bu sayede, daha önce oturum açmış bir kullanıcı internete bağlı olmasa bile kimliği doğrulanmış kalır. Oturum açma durumu gözlemcisi normal şekilde çalışır ve kullanıcınız çevrimdışıyken 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'i kullanmaya başlamak için dokümanlarımızı ziyaret edin.

Kullanıcılarla etkileşim kurma

Kullanıcılarınız uygulamanız için yeni özellikler yayınladığınızda haberdar olmak ister. Siz de 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, sunucunuzdan kullanıcılarınızın cihazlarına alakalı bildirimler gönderebilirsiniz. Bu hizmet, uygulama kapalıyken bile kullanıcılarınıza zamanında bildirim göstermenize olanak tanır.

Kullanıcılarla yeniden etkileşimi otomatikleştirme

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