Şu anda compat
kitaplıklarından ad alanına sahip herhangi bir Firebase Web API'sini kullanan uygulamalar
8 veya önceki sürümlerden birine döndüğünüzde
taşımayı kolaylaştırmalısınız.
Bu kılavuzda, hakkında bilgi sahibi olduğunuzu ve Search Ads 360'taki webpack veya Yeni sürüme geçmek için birleştirme uygulama geliştirme süreci devam ediyor.
Geliştirme ortamınızda modül paketleyici kullanmak oldukça önemlidir. önerilir. Anahtar kelime kullanmıyorsanız uygulama boyutu açısından bakıldığında, modüler API'nin en önemli avantajlarına değineceğiz. Şunlar gerekir: npm veya yarn olarak ayarlayın.
Bu kılavuzdaki yeni sürüme geçiş adımları, Google Play'deki sanal uygulamaları Authentication ve Cloud Firestore SDK'larını kullanır. Örnekleri inceleyerek Desteklenen tüm Google ürünlerini yeni sürüme geçirmek için gereken kavramlarda ve pratik adımlarda uzmanlaşabilir Firebase Web SDK'ları
Ad alanı (compat
) kitaplıkları hakkında
Firebase Web SDK'sı için iki tür kitaplık vardır:
- Modüler: Ağaç sallamayı kolaylaştırmak için tasarlanmış yeni bir API yüzeyi (kullanılmayan kodun kaldırılması) Web uygulamanızı olabildiğince küçük ve hızlı hale getirin.
- Ad boşluklu (
compat
): Tamamen güncel olan, aşina olduğunuz bir API yüzeyi aşağıdakilerle uyumlu: Bu da SDK'nın önceki sürümleri için geçerlidir. Böylece, sitenizde Firebase kodunuza tek seferde ekleyebilirsiniz. Uyumlu kitaplıklarda boyut veya performans yok rakiplerine göre daha fazla avantaj sağlar.
Bu kılavuzda, kendi oluşturduğunuz karşılaştırma kitaplıklarını kullanabilirsiniz. Bu kitaplıklar, kodlarla birlikte ad alanına ayrılmış kod da kullanılıyor. Bu, sizin için Siz yeni sürüme geçerken uygulamanızı daha kolay derleyebilir ve hata ayıklayabilir bahsedeceğim.
Firebase Web SDK'ya çok az maruz kalan uygulamalar için (örneğin, Authentication API'lerine yalnızca basit bir çağrı yapan bir uygulama; eski ad alanı kodları, uyumlu kitaplıkları kullanmadan yeniden düzenlemeye yönelik pratik bir uygulamadır. Bu tür bir uygulamayı yeni sürüme geçiriyorsanız bu kılavuzdaki talimatları uygulayabilirsiniz "modüler API" için bile kullanabilirsiniz.
Yükseltme işlemi hakkında
Yükseltme işleminin her adımı, bir kaynak seçin ve bunu kesintisiz olarak derleyip çalıştırın. Özetle, Bir uygulamayı yeni sürüme geçirmek için şunları yaparsınız:
- Uygulamanıza modüler kitaplıkları ve uyumluluk kitaplıklarını ekleyin.
- Uyumlu hale getirmek için kodunuzdaki içe aktarma ifadelerini güncelleyin.
- Tek bir ürün (örneğin, Authentication) için kodu yeniden düzenleyerek şu şekilde oluşturun: olduğunu öğrendim.
- İsteğe bağlı: Bu noktada Authentication karşılaştırma kitaplığını ve uyumlu kodu kaldırın. şunları yapmak için: Authentication Devam etmeden önce Authentication için uygulama boyutu avantajını fark edin.
- Her ürün için işlevleri yeniden düzenleyin (ör. Cloud Firestore, FCM vb.) modüler stile uygulama, derleme ve tüm alanlar tamamlanana kadar test etmek zorunda kalabilirsiniz.
- Başlatma kodunu modüler stile güncelleyin.
- Kalan tüm uyumluluk ifadelerini kaldırın ve kodu şuradan kaldırın: en iyi şekilde yararlanabilirsiniz.
SDK'nın en son sürümünü edinin
Başlamak için modüler kitaplıkları edinin ve npm kullanarak kitaplıkları karşılaştırın:
npm i firebase@10.13 # OR yarn add firebase@10.13
İthalatları uyumlu bir şekilde güncelleyin
Bağımlılıklarınızı güncelledikten sonra kodunuzun çalışmaya devam etmesi için "compat" ifadesini kullanmak için içe aktarma ifadelerinizi değiştirin sürümünü gösterir. Örneğin:
Önce: 8. veya önceki sürümler
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
Sonra: karşılaştırma
// compat packages are API compatible with namespaced code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
Modüler stili yeniden düzenleyin
Ad alanına sahip API'ler nokta zincirli ad alanına ve hizmete dayansa da
kullanıyorsanız, modüler yaklaşımda kodunuzun
temel olarak işlevler ile ilgilidir. Modüler API'de firebase/app
paketi ve
diğer paketler, tüm
başka yöntemler de var. Bunun yerine, paketler bağımsız işlevleri dışa aktarır.
Modüler API'de hizmetler ilk bağımsız değişken olarak iletilir ve ardından fonksiyon geri kalan işlemleri yapmak için hizmet ayrıntılarını kullanır. Şimdi proje yönetimi metodolojisi Authentication ve Cloud Firestore API'lerine yapılan çağrıların yeniden düzenlendiği iki örnek.
1. Örnek: Authentication işlevini yeniden düzenleme
Önce: Karşılaştırma
Uyumlu kodu, ad alanı kodu ile aynıdır ancak içe aktarma işlemleri değişti.
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
const auth = firebase.auth();
auth.onAuthStateChanged(user => {
// Check for user status
});
Sonra: modüler
getAuth
işlevi, ilk parametresi olarak firebaseApp
öğesini alır.
onAuthStateChanged
işlevi, şu şekilde auth
örneğinden zincirlenmemiş
inceleyebilirsiniz. bunun yerine bu
işlevini kullanın.auth
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
getRedirectResult
Auth yönteminin işlenmesini güncelleyin
Modüler API, getRedirectResult
ürününde zarar veren bir değişiklik yaratıyor. Yönlendirme işlemi çağrılmadığında modüler API, null
kullanıcısıyla UserCredential
döndüren ad alanına sahip API'nin aksine null
döndürür.
Önce: Karşılaştırma
const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
return null;
}
return result;
Sonra: modüler
const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
return null;
}
return result;
2. Örnek: Cloud Firestore işlevini yeniden düzenleme
Önce: Karşılaştırma
import "firebase/compat/firestore"
const db = firebase.firestore();
db.collection("cities").where("capital", "==", true)
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
})
.catch((error) => {
console.log("Error getting documents: ", error);
});
Sonra: modüler
getFirestore
işlevi, ilk parametre olarak firebaseApp
değerini alır. Bu parametre,
önceki bir örnekte initializeApp
konumundan döndürüldü.
sorgu oluşturma kodu, modüler API'de çok farklıdır; zincirleme yoktur ve
query
veya where
gibi yöntemler artık ücretsiz işlev olarak gösteriliyor.
import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";
const db = getFirestore(firebaseApp);
const q = query(collection(db, "cities"), where("capital", "==", true));
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
Firestore DocumentSnapshot.exists
referanslarını güncelleyin
Modüler API, mülkün hasarlı bir alanda
firestore.DocumentSnapshot.exists
, yöntem olarak değiştirildi. İlgili içeriği oluşturmak için kullanılan
aynı şekilde çalışır (dokümanın mevcut olup olmadığını test etme)
ancak gösterildiği gibi daha yeni yöntemi kullanmak için kodunuzu yeniden düzenlemelisiniz:
Before:compat
if (snapshot.exists) {
console.log("the document exists");
}
Sonra: modüler
if (snapshot.exists()) {
console.log("the document exists");
}
3. Örnek: ad alanı ve modüler kod stillerini birleştirme
Yükseltme sırasında uyumlu kitaplıkları kullanırsanız ad alanı kullanımına devam edebilirsiniz. kod ile birlikte yeniden düzenlenen bir kod yazmaktır. Yani elinizdeki Authentication öğesini yeniden düzenlerken Cloud Firestore için mevcut ad alanına sahip kod Firebase SDK'sını kullanarak aynı zamanda da uygulamanızı her iki kodla da başarılı bir şekilde stillerini ayarlayın. Aynı durum, içinde Cloud Firestore olarak; olduğu sürece yeni ve eski kod stilleri bir arada uyumlu paketleri içe aktararak:
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'
const docRef = firebase.firestore().doc();
getDoc(docRef);
Uygulamanız derlenecek olsa da uygulama boyutunu almayacağınızı unutmayın. siz uyumlu ifadeleri tamamen kaldırarak tüm modüler kodun avantajlarından kodu kullanabilirsiniz.
Başlatma kodunu güncelleme
Uygulamanızın başlatma kodunu modüler söz dizimini kullanacak şekilde güncelleyin. Evet
sitenizin tüm özelliklerini yeniden düzenledikten sonra bu kodu güncellemeniz
tercih edebilirsiniz. bunun nedeni firebase.initializeApp()
ürününün global olarak başlatılmasıdır
uyumlu ve modüler API'ler için geçerliyken, modüler
initializeApp()
işlevi yalnızca modüler durumunu başlatır.
Önce: Karşılaştırma
import firebase from "firebase/compat/app"
firebase.initializeApp({ /* config */ });
Sonra: modüler
import { initializeApp } from "firebase/app"
const firebaseApp = initializeApp({ /* config */ });
Uyumlu kodu kaldır
Modüler API'nin boyut avantajlarını anlamak için bir süre sonra
tüm çağrıları yukarıda gösterilen modüler stile dönüştür ve
Kodunuzdaki import "firebase/compat/*
ifade. İşiniz bittiğinde,
artık firebase.*
genel ad alanına veya
kodunu ekleyin.
Pencereden uyumluluk kitaplığını kullanma
Modüler API, tarayıcının API'si yerine modüllerle çalışacak şekilde optimize edilmiştir
window
nesne algılandı. Kitaplığın önceki sürümleri, yükleme ve
window.firebase
ad alanını kullanarak Firebase'in yönetilmesine olanak tanır. Bu değil
, kullanılmayan kodların kaldırılmasına izin vermediği için bundan sonra da önerilir.
Bununla birlikte, JavaScript SDK'sının uyumlu sürümü window
ile çalışır.
.
<script src="https://www.gstatic.com/firebasejs/10.13/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.13/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.13/firebase-auth-compat.js"></script>
<script>
const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
</script>
Uyumluluk kitaplığının altında modüler kod kullanılır. bu API'yi, ad alanına sahip API ile aynı API'yi sağlar. Yani bu ikisine de ad aralıklı API referansına bakın ve ad alanı kod snippet'lerini inceleyin. Bu yöntem uzun vadeli kullanım için önerilir ancak tamamen modüler kitaplığını tanıtır.
Modüler SDK'nın avantajları ve sınırlamaları
Tamamen modüler hale getirilmiş SDK, önceki sürümlere kıyasla şu avantajlara sahiptir:
- Modüler SDK, uygulama boyutunu önemli ölçüde küçültür. Modern JavaScript'i kullanır "Ağaç sallama"ya izin veren modül biçimi içe aktarmanız gereken yalnızca uygulamanızın ihtiyaç duyduğu yapılar. Uygulamanıza bağlı olarak modüler SDK ile ağaç sallama, bir kıyaslandığında% 80 daha az kilobayt sağlayabilir bu karşılaştırılabilir bir uygulamadır.
- Modüler SDK, devam eden özellik geliştirmesinden yararlanmaya devam edecek. ad alanı sağlanan API ise bunu yapmaz.