Ad alanına sahip API'den modüler API'ye yükseltme

Ş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.

Unutmayın: Uyumlu kitaplıklar, gelecekteki bir ana SDK sürümünde (ör. (sürüm 10 veya sürüm 11). Nihai hedefiniz uyumlu kodu kaldırmak ve uygulamanızda sadece modüler stildeki kodu tutun.

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:

1. Uygulamanıza modüler kitaplıkları ve uyumluluk kitaplıklarını ekleyin.
2. Uyumlu hale getirmek için kodunuzdaki içe aktarma ifadelerini güncelleyin.
3. Tek bir ürün (örneğin, Authentication) için kodu yeniden düzenleyerek şu şekilde oluşturun: olduğunu öğrendim.
4. İ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.
5. 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.
6. Başlatma kodunu modüler stile güncelleyin.
7. 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

Dikkat: Uygulamanızda getRedirectResult Kimlik Doğrulama yöntemi kullanılıyorsa güncellemeleri yapmanız gerekir bu bölümde açıklanmıştır. Kodunuzu yeniden düzenleyememe öngörülemeyen uygulama davranışına neden olabilir.

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

Dikkat: Uygulamanız DocumentSnapshot.exists özelliğini kullanıyorsa bu bölümde açıklanan güncellemeyi gerçekleştirin. Kodunuzu yeniden düzenleyememe öngörülemeyen uygulama davranışına neden olabilir.

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.