Progresif Web Uygulamaları (PWA) aşağıdaki web uygulamalarıdır: kurallar grubu kullanıcılarınıza güvenilir, hızlı ve ilgi çekici bir deneyim sunmayı amaçlar.
Firebase, progresif web uygulamalarını verimli bir şekilde eklemenizi sağlayan pek çok PWA en iyi uygulamasını karşılamak için uygulamanıza yeni özellikler ekler:
| PWA ile ilgili en iyi uygulama | Firebase hizmetleri nasıl yardımcı olabilir? |
|---|---|
| Güvenli ve güvenilir çözümler |
|
| Hızlı yükleme süresi |
|
| Ağ esnekliği |
|
| Kullanıcıların ilgisini çekme |
|
Bu sayfada, Firebase platformunun reklam oluşturmanıza ve oluşturmanıza modern ve yüksek performanslı bir PWA'mız oluşturabilirsiniz. Firebase JavaScript SDK'sı.
Şurayı ziyaret edin: başlangıç kılavuzu Firebase'i web uygulamanıza ekleyin.
Güvenilir ve güvenli
Sitenizi sunmaktan kimlik doğrulama akışı uygulamaya kadar her aşamada PWA'nızın güvenli ve güvenilir bir iş akışı sağladığını görürsünüz.
PWA'nızı HTTPS üzerinden sunma
HTTPS, web sitenizin bütünlüğünü korur. Ayrıca, gizlilik ve en iyi uygulamaları paylaşacağım. PWA'lar HTTPS üzerinden sunulmalıdır.
Varsayılan olarak Firebase Hosting uygulamanızın içeriğini HTTPS üzerinden sunar. İçeriğinizi ücretsiz olarak yayınlayabilirsiniz. Firebase alt alan adı veya kendiniz özel alanınızla birlikte kullanılamaz. Bizim barındırma hizmeti, özel alan adınız için bir SSL sertifikası sağlar otomatik olarak ve ücretsiz olarak sunulur.
Şurayı ziyaret edin: Firebase Hosting için başlangıç kılavuzu başlıklı makalemizi incelemenizi öneririz.
Güvenli bir kimlik doğrulama akışı sunun
FirebaseUI, bir kimlik doğrulama akışına bağlı olarak düşen duyarlı kimlik doğrulama akışı Firebase Authentication, izin veriliyor uygulamanıza gelişmiş ve güvenli bir oturum açma akışını kolayca entegre edebilirsiniz. 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ı izliyor.
FirebaseUI, birden çok oturum açma sağlayıcıyı destekler. URL'yi FirebaseUI yetkilendirmesi, yalnızca birkaç satır kodla uygulamanıza aktarılır oturum açma sağlayıcıları için yapılandırılmıştır:
// 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);
Ziyaret edin: GitHub'daki belgelerimize tarafından sunulan çeşitli yapılandırma seçenekleri hakkında daha fazla bilgi FirebaseUI.
Farklı cihazlarda kullanıcıların oturumunu açma
FirebaseUI kullanarak entegre etme tek dokunuşla oturum açın, uygulamanız, oturum açtıkları farklı cihazlarda bile kullanıcıların bunu oturum açma kimlik bilgileriyle ayarlamalarına tabi tutun.
Sayfanın tek satırını değiştirerek FirebaseUI ile tek dokunuşla oturum açmayı etkinleştirin yapılandırma:
// 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
};
Ziyaret edin: GitHub'daki belgelerimize tarafından sunulan çeşitli yapılandırma seçenekleri hakkında daha fazla bilgi FirebaseUI.
Hızlı yükleme süresi
Yüksek performans, kullanıcı deneyimini iyileştirir, kullanıcıları elde tutmaya ve dönüşümü artırır. Çok iyi performans; örneğin "hazırlama süresi ilk anlamlı boyama" ve "etkileşime geçme süresi", PWA'lar için önemli bir gerekliliktir.
Statik öğelerinizi verimli bir şekilde yayınlayın
Firebase Hosting şunları sunar: içerik genel bir CDN üzerinden ve HTTP/2 uyumlu. Statik öğelerinizi Firebase'de barındırdığınızda, sizin için tüm bunları kullanabilirsiniz. Google Etiket Yöneticisi'nden yararlanmak için bu hizmetin devamı niteliğinde.
Dinamik içeriğinizi önbelleğe alın
Firebase Hosting ile web uygulamanız aynı zamanda dinamik içerik de sunucu tarafında Cloud Functions veya bir Cloud Run container mimarisine alınmış uygulama. Bunu kullanma hizmeti kullanıyorsanız, bir Google Hesabı'nda dinamik içeriğinizi önbelleğe alabilirsiniz tek satır kodla güçlü global CDN:
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
Bu hizmet, arka ucunuza ek çağrılar yapılmasını önlemenize ve sonuçları hızlandırmanıza olanak tanır. ve maliyetleri düşürür.
Nasıl yapıldığını öğrenmek için belgelerimize dinamik içerik yayınlayabilir (Cloud Functions veya Cloud Run tarafından desteklenir) ve Firebase Hosting ile CDN önbelleğe alma özelliğini etkinleştirin.
Hizmetleri yalnızca ihtiyaç duyduklarında yükle
Firebase JavaScript SDK'sı şu olabilir: kısmen içe aktarıldı hedef indirme boyutunu minimumda tutun. Bu modüler SDK'dan yararlanarak Uygulamanızın ihtiyaç duyduğu Firebase hizmetlerini yalnızca ihtiyaç olduğunda içe aktarın.
Örneğin, uygulamanızın ilk yükleme hızını artırmak için uygulamanızın ilk boyama hızını artırın Firebase Authentication. Ardından, uygulamanız Firebase için Google Analytics gibi diğer Firebase hizmetlerini Cloud Firestore.
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ığı dinamik içe aktarmalar:
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 benzer olmalıdır ve mümkün olduğunda çevrimdışı olarak çalışmalıdır.
Uygulama verilerinize çevrimdışı olarak erişme
Cloud Firestore destekler çevrimdışı veri kalıcılığı Bu, uygulamanızın veri katmanının çevrimdışı olarak şeffaf bir şekilde çalışmasını sağlar. Şununla birleştirildi: Hizmet çalışanlarına statik öğelerinizi önbelleğe alma çevrimdışı olarak tamamen çalışabilir. Çevrimdışı veri kalıcılığını etkinleştirebilirsiniz tek satır kodla:
firebase.firestore().enablePersistence().then(() => {
const firestore = app.firestore();
// Use Cloud Firestore ...
});
Çevrimdışı kimlik doğrulama durumunu koruma
Firebase Authentication, oturum açma verilerinin yerel önbelleğiyle, önceden oturum açmış kullanıcının kimlik doğrulamasından geçmiştir. Oturum açma durumu gözlemci, Kullanıcı çevrimdışıyken uygulamayı yeniden yüklese bile normal şekilde çalışır ve tetiklenir:
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// User is signed-in ...
} else {
// User is signed out ...
}
});
Başlamak için dokümanlarımızı inceleyin Cloud Firestore ve Firebase Authentication.
Kullanıcıların ilgisini çekin
Kullanıcılarınız uygulamanız için yeni özellikler yayınladığınızdan haberdar olmak isterler. kullanarak kullanıcı etkileşimini yüksek tutun. PWA'nızı proaktif ve sorumlu bir şekilde ayarlayın ulaşmak için de kullanabilirsiniz.
Kullanıcılarınıza push bildirimleri gösterme
Entegre Firebase Cloud Messaging sunucunuzdan alakalı bildirimleri kullanıcılarınızın cihazlar. Bu hizmet, kullanıcılarınıza bildirim gönderdiklerinde bile, Uygulama kapatıldı.
Kullanıcı yeniden etkileşimini otomatikleştirin
Cloud Functions for Firebase kullanıldığında Kullanıcılarınıza bulut etkinliklerine dayalı yeniden etkileşim mesajları gönderin (örneğin, Cloud Firestore için veri yazma veya kullanıcı hesabını silme. Ayrıca, kullanıcılara push bildirimi de gönderebilirsiniz Bu kullanıcı yeni bir takipçi edindiğinde:
// 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);
});