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 tasarlanmış bir dizi kurala uyan web uygulamalarıdır.
Firebase, uygulamanıza verimli bir şekilde aşamalı özellikler eklemenize yardımcı olabilecek çeşitli hizmetler sunar. Bu hizmetler, aşağıdakiler de dahil olmak üzere birçok PWA en iyi uygulamasını karşılamanıza yardımcı olur:
| PWA ile ilgili en iyi uygulama | Firebase hizmetleri nasıl yardımcı olabilir? |
|---|---|
| Güvenli ve güvenilir |
|
| Hızlı yükleme süresi |
|
| Ağ esnekliği |
|
| Kullanıcılarla etkileşim kurma |
|
Bu sayfada, tarayıcılar arası Firebase JavaScript SDK'mızı kullanarak modern ve yüksek performanslı bir PWA oluşturmak için Firebase platformundan nasıl yararlanabileceğiniz açıklanmaktadır.
Firebase'i web uygulamanıza eklemek için başlangıç kılavuzumuzu ziyaret edin.
Güvenilir ve güvenli
Sitenizi 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 otomatik olarak ve ücretsiz bir SSL sertifikası 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'yı temel alan, kullanıma hazır ve duyarlı bir kimlik doğrulama akışı sunar. Bu sayede uygulamanız, gelişmiş ve güvenli bir oturum açma akışını kolayca entegre edebilir. 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 uygulamalara uyar.
FirebaseUI, çoklu oturum açma sağlayıcısını destekler. Oturum açma sağlayıcıları için yapılandırılmış birkaç satır kodla uygulamanıza FirebaseUI kimlik doğrulama 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 farklı cihazlarda oturum açmasını sağlama
Tek dokunuşla oturum açma özelliğini entegre etmek için FirebaseUI hizmetini kullanarak uygulamanız, kullanıcıların oturum açma kimlik bilgileriyle ayarladıkları farklı cihazlarda bile otomatik olarak oturum açabilir.
Tek bir yapılandırma 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ı boyama süresi" ve "etkileşime hazır olma süresi" gibi yüksek performans, PWA'lar için önemli bir gereksinimdir.
Statik öğelerinizi verimli bir şekilde sunma
Firebase Hosting, içeriğinizi global bir CDN üzerinden sunar ve HTTP/2 ile uyumludur. Statik öğelerinizi Firebase'de barındırdığınızda tüm bu yapılandırmaları sizin için biz yaparı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 veya Cloud Run container mimarisine alınmış bir uygulama tarafından sunucu tarafında oluşturulan dinamik içerikleri de sunabilir. Bu hizmeti kullanarak tek bir kod satırıyla dinamik içeriklerinizi 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 yapılmasını önlemenize, yanıtları hızlandırmanıza ve maliyetleri azaltmanıza olanak tanır.
Dinamik içerikleri (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 inceleyin.
Hizmetleri yalnızca gerektiğinde yükleme
Firebase JavaScript SDK'sı, ilk indirme boyutunu minimumda tutmak için 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ın ihtiyaç duyduğu diğer Firebase hizmetlerini (ör. Cloud Firestore) yükleyebilirsiniz.
Webpack gibi bir paket yöneticisi kullanarak önce Firebase Authentication öğesini 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 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ışı erişme
Cloud Firestore, uygulamanızın veri katmanının çevrimdışı olarak şeffaf bir şekilde çalışmasını sağlayan çevrimdışı veri kalıcılığını destekler. Statik öğelerinizi önbelleğe almak için hizmet çalışanlarıyla birleştirilen PWA'nız çevrimdışı olarak tam işlevle çalışabilir. Çevrimdışı veri kalıcılığını tek bir satır kodla etkinleştirebilirsiniz:
firebase.firestore().enablePersistence().then(() => { const firestore = app.firestore(); // Use Cloud Firestore ... });
Yetkilendirme durumunu çevrimdışı olarak koruma
Firebase Authentication, oturum açma verilerinin yerel bir önbelleğini tutar. Bu sayede, daha önce oturum açmış bir kullanıcının çevrimdışıyken bile kimliği doğrulanmış olarak kalmasını sağlar. Oturum açma durumu gözlemcisi normal şekilde çalışır ve kullanıcı uygulamayı çevrimdışıyken 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'ı kullanmaya başlamak için belgelerimizi inceleyin.
Kullanıcıların etkileşim kurmasını sağlayın
Kullanıcılarınız, uygulamanız için yeni özellikler yayınladığınızda bunu öğrenmek 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ıların yeniden etkileşimini otomatikleştirme
Cloud Functions for Firebase kullanarak kullanıcılarınıza bulut etkinliklerine (ör. Cloud Firestore'e veri yazma veya kullanıcı hesabı silme) dayalı yeniden etkileşim mesajları gönderin. 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); });