Kirim notifikasi untuk aplikasi web menggunakan Cloud Messaging dan Cloud Functions

1. Ikhtisar

Dalam codelab ini, Anda akan mempelajari cara menggunakan Cloud Functions for Firebase untuk menambahkan fungsionalitas ke aplikasi web chat dengan mengirimkan notifikasi kepada pengguna aplikasi chat.

3b1284f5144b54f6.png

Apa yang akan Anda pelajari

  • Buat Google Cloud Functions menggunakan Firebase SDK.
  • Memicu Cloud Functions berdasarkan peristiwa Auth, Cloud Storage, dan Cloud Firestore.
  • Tambahkan dukungan Firebase Cloud Messaging ke aplikasi web Anda.

Apa yang Anda perlukan

  • Sebuah kartu kredit. Cloud Functions for Firebase memerlukan paket Firebase Blaze, yang berarti Anda harus mengaktifkan penagihan pada proyek Firebase menggunakan kartu kredit.
  • IDE/editor teks pilihan Anda seperti WebStorm , Atom atau Sublime .
  • Terminal untuk menjalankan perintah shell dengan NodeJS v9 terinstal.
  • Peramban seperti Chrome.
  • Kode sampel. Lihat langkah selanjutnya untuk ini.

2. Dapatkan kode contoh

Kloning repositori GitHub dari baris perintah:

git clone https://github.com/firebase/friendlychat

Impor aplikasi awal

Menggunakan IDE Anda, buka atau impor android_studio_folder.png direktori cloud-functions-start dari direktori kode sampel. Direktori ini berisi kode awal untuk codelab yang terdiri dari Aplikasi Web Chat yang berfungsi penuh.

3. Buat proyek Firebase dan Siapkan aplikasi Anda

Buat proyek

Di Firebase Console , klik Tambahkan Proyek dan beri nama FriendlyChat .

Klik Buat Proyek .

Tingkatkan ke paket Blaze

Untuk menggunakan Cloud Functions for Firebase, Anda harus mengupgrade proyek Firebase Anda ke paket penagihan Blaze . Ini mengharuskan Anda menambahkan kartu kredit atau instrumen penagihan lainnya ke akun Google Cloud Anda.

Semua project Firebase, termasuk paket Blaze, masih memiliki akses ke kuota penggunaan gratis untuk Cloud Functions. Langkah-langkah yang diuraikan dalam codelab ini akan termasuk dalam batas penggunaan tingkat gratis. Namun, Anda akan melihat sedikit biaya ( sekitar $0,03 ) dari Cloud Storage yang digunakan untuk menghosting gambar build Cloud Functions Anda.

Jika Anda tidak memiliki akses ke kartu kredit atau merasa tidak nyaman melanjutkan paket Blaze, pertimbangkan untuk menggunakan Firebase Emulator Suite yang memungkinkan Anda meniru Cloud Functions secara gratis di komputer lokal Anda.

Aktifkan Google Auth

Agar pengguna dapat masuk ke aplikasi, kami akan menggunakan autentikasi Google yang harus diaktifkan.

Di Firebase Console, buka tab Build section > Authentication > Sign-in method (atau klik di sini untuk membukanya). Kemudian, aktifkan Penyedia Masuk Google dan klik Simpan . Ini akan memungkinkan pengguna untuk masuk ke aplikasi web dengan akun Google mereka.

Selain itu, jangan ragu untuk menyetel nama aplikasi Anda yang dapat dilihat publik menjadi Obrolan Ramah :

8290061806aacb46.png

Aktifkan Penyimpanan Cloud

Aplikasi ini menggunakan Cloud Storage untuk mengunggah gambar. Untuk mengaktifkan Cloud Storage di proyek Firebase Anda, kunjungi bagian Penyimpanan dan klik tombol Mulai . Ikuti langkah-langkah di sana, dan untuk lokasi Cloud Storage, akan ada nilai default yang akan digunakan. Klik Selesai sesudahnya.

Tambahkan Aplikasi Web

Di Firebase Console, tambahkan aplikasi web. Untuk melakukannya, buka Pengaturan Proyek dan gulir ke bawah ke Tambahkan aplikasi . Pilih web sebagai platform dan centang kotak untuk menyiapkan Firebase Hosting, lalu daftarkan aplikasi dan klik Berikutnya untuk langkah selanjutnya, terakhir klik Lanjutkan ke konsol .

4. Instal Antarmuka Baris Perintah Firebase

Antarmuka Baris Perintah (CLI) Firebase akan memungkinkan Anda menyajikan aplikasi web secara lokal dan menerapkan aplikasi web serta Cloud Functions.

Untuk menginstal atau memutakhirkan CLI, jalankan perintah npm berikut:

npm -g install firebase-tools

Untuk memverifikasi bahwa CLI telah diinstal dengan benar, buka konsol dan jalankan:

firebase --version

Pastikan versi Firebase CLI di atas 4.0.0 agar memiliki semua fitur terbaru yang diperlukan untuk Cloud Functions. Jika tidak, jalankan npm install -g firebase-tools untuk melakukan upgrade seperti yang ditunjukkan di atas.

Otorisasi Firebase CLI dengan menjalankan:

firebase login

Pastikan Anda berada di direktori cloud-functions-start , lalu siapkan Firebase CLI untuk menggunakan Proyek Firebase Anda:

firebase use --add

Selanjutnya, pilih ID Proyek Anda dan ikuti petunjuknya. Jika diminta, Anda dapat memilih Alias ​​apa pun, misalnya codelab .

5. Terapkan dan jalankan aplikasi web

Sekarang setelah Anda mengimpor dan mengonfigurasi proyek, Anda siap menjalankan aplikasi web untuk pertama kalinya! Buka jendela terminal, navigasikan ke folder cloud-functions-start , dan terapkan aplikasi web ke hosting Firebase menggunakan:

firebase deploy --except functions

Ini adalah keluaran konsol yang akan Anda lihat:

i deploying database, storage, hosting
✔  database: rules ready to deploy.
i  storage: checking rules for compilation errors...
✔  storage: rules file compiled successfully
i  hosting: preparing ./ directory for upload...
✔  hosting: ./ folder uploaded successfully
✔ storage: rules file compiled successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

Buka aplikasi web

Baris terakhir harus menampilkan URL Hosting. Aplikasi web sekarang harus disajikan dari URL ini, yang harus berbentuk https://<project-id>.firebaseapp.com. Buka. Anda akan melihat UI aplikasi obrolan berfungsi.

Masuk ke aplikasi dengan menggunakan tombol MASUK DENGAN GOOGLE dan jangan ragu untuk menambahkan beberapa pesan dan mengeposkan gambar:

3b1284f5144b54f6.png

Jika Anda masuk ke aplikasi untuk pertama kalinya di browser baru, pastikan Anda mengizinkan pemberitahuan saat diminta: 8b9d0c66dc36153d.png

Kita harus mengaktifkan notifikasi di lain waktu.

Jika Anda tidak sengaja mengeklik Blokir , Anda dapat mengubah pengaturan ini dengan mengeklik tombol 🔒 Aman di sebelah kiri URL di Omnibar Chrome dan mengalihkan bilah di sebelah Notifikasi :

e926868b0546ed71.png

Sekarang, kami akan menambahkan beberapa fungsi menggunakan Firebase SDK untuk Cloud Functions.

6. Direktori Fungsi

Cloud Functions memungkinkan Anda dengan mudah memiliki kode yang berjalan di Cloud tanpa harus menyiapkan server. Kita akan membahas cara membuat fungsi yang bereaksi terhadap peristiwa database Firebase Auth, Cloud Storage, dan Firebase Firestore. Mari kita mulai dengan Auth.

Saat menggunakan Firebase SDK untuk Cloud Functions, kode Functions Anda akan berada di direktori functions (secara default). Kode Fungsi Anda juga merupakan aplikasi Node.js dan oleh karena itu memerlukan package.json yang memberikan beberapa informasi tentang aplikasi Anda dan mencantumkan dependensi.

Untuk memudahkan Anda, kami telah membuat file functions/index.js dimana kode Anda akan ditempatkan. Jangan ragu untuk memeriksa file ini sebelum melanjutkan.

cd functions
ls

Jika Anda belum memahami Node.js , mempelajarinya lebih lanjut sebelum melanjutkan codelab akan sangat membantu.

File package.json sudah mencantumkan dua dependensi yang diperlukan: Firebase SDK for Cloud Functions dan Firebase Admin SDK . Untuk menginstalnya secara lokal, buka folder functions dan jalankan:

npm install

Sekarang mari kita lihat file index.js :

indeks.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// TODO(DEVELOPER): Import the Cloud Functions for Firebase and the Firebase Admin modules here.

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

Kita akan mengimpor modul yang diperlukan dan kemudian menulis tiga Fungsi sebagai pengganti TODO. Mari kita mulai dengan mengimpor modul Node yang diperlukan.

7. Impor modul Cloud Functions dan Firebase Admin

Dua modul akan diperlukan selama codelab ini: firebase-functions memungkinkan penulisan pemicu dan log Cloud Functions, sementara firebase-admin memungkinkan penggunaan platform Firebase di server dengan akses admin untuk melakukan tindakan seperti menulis ke Cloud Firestore atau mengirim notifikasi FCM.

Di file index.js , ganti TODO pertama dengan yang berikut:

indeks.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// Import the Firebase SDK for Google Cloud Functions.
const functions = require('firebase-functions');
// Import and initialize the Firebase Admin SDK.
const admin = require('firebase-admin');
admin.initializeApp();

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

Firebase Admin SDK dapat dikonfigurasi secara otomatis saat diterapkan ke lingkungan Cloud Functions atau container Google Cloud Platform lainnya, dan ini terjadi saat kita memanggil admin.initializeApp() tanpa argumen.

Sekarang, mari tambahkan Fungsi yang berjalan saat pengguna masuk untuk pertama kalinya di aplikasi obrolan, dan kita akan menambahkan pesan obrolan untuk menyambut pengguna tersebut.

8. Selamat Datang Pengguna Baru

Struktur pesan obrolan

Pesan yang diposting ke feed chat FriendlyChat disimpan di Cloud Firestore. Mari kita lihat struktur data yang kita gunakan untuk sebuah pesan. Untuk melakukan ini, posting pesan baru ke obrolan yang bertuliskan "Halo Dunia":

11f5a676fbb1a69a.png

Ini akan muncul sebagai:

fe6d1c020d0744cf.png

Di Firebase Console, klik Firestore Database di bagian Build . Anda akan melihat kumpulan pesan dan satu dokumen berisi pesan yang Anda tulis:

442c9c10b5e2b245.png

Seperti yang Anda lihat, pesan chat disimpan di Cloud Firestore sebagai dokumen dengan name , profilePicUrl , text , dan timestamp yang ditambahkan ke koleksi messages .

Menambahkan pesan selamat datang

Cloud Function pertama menambahkan pesan yang menyambut pengguna baru ke dalam obrolan. Untuk ini, kita dapat menggunakan pemicu functions.auth().onCreate , yang menjalankan fungsi tersebut setiap kali pengguna login untuk pertama kalinya di aplikasi Firebase. Tambahkan fungsi addWelcomeMessages ke dalam file index.js Anda:

indeks.js

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  functions.logger.log('A new user signed in for the first time.');
  const fullName = user.displayName || 'Anonymous';

  // Saves the new welcome message into the database
  // which then displays it in the FriendlyChat clients.
  await admin.firestore().collection('messages').add({
    name: 'Firebase Bot',
    profilePicUrl: '/images/firebase-logo.png', // Firebase logo
    text: `${fullName} signed in for the first time! Welcome!`,
    timestamp: admin.firestore.FieldValue.serverTimestamp(),
  });
  functions.logger.log('Welcome message written to database.');
});

Menambahkan fungsi ini ke objek exports khusus adalah cara Node membuat fungsi tersebut dapat diakses di luar file saat ini dan diperlukan untuk Cloud Functions.

Dalam fungsi di atas, kami menambahkan pesan selamat datang baru yang diposting oleh "Firebase Bot" ke daftar pesan chat. Kami melakukan ini dengan menggunakan metode add pada kumpulan messages di Cloud Firestore, yang merupakan tempat penyimpanan pesan obrolan.

Karena ini adalah operasi asinkron, kita perlu mengembalikan Promise yang menunjukkan kapan Cloud Firestore telah selesai menulis sehingga Cloud Functions tidak dijalankan terlalu dini.

Terapkan Fungsi Cloud

Cloud Functions hanya akan aktif setelah Anda menerapkannya. Untuk melakukannya, jalankan ini pada baris perintah:

firebase deploy --only functions

Ini adalah keluaran konsol yang akan Anda lihat:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
⚠  functions: missing necessary APIs. Enabling now...
i  env: ensuring necessary APIs are enabled...
⚠  env: missing necessary APIs. Enabling now...
i  functions: waiting for APIs to activate...
i  env: waiting for APIs to activate...
✔  env: all necessary APIs are enabled
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: creating function addWelcomeMessages...
✔  functions[addWelcomeMessages]: Successful create operation. 
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlypchat-1234/overview

Uji fungsinya

Setelah fungsi berhasil diterapkan, Anda harus memiliki pengguna yang masuk untuk pertama kalinya.

  1. Buka aplikasi Anda di browser menggunakan URL hosting (dalam bentuk https://<project-id>.firebaseapp.com ).
  2. Dengan pengguna baru, masuk untuk pertama kalinya di aplikasi Anda menggunakan tombol Masuk .

262535d1b1223c65.png

  1. Setelah Anda masuk, pesan selamat datang akan ditampilkan secara otomatis:

1c70e0d64b23525b.png

9. Moderasi gambar

Pengguna dapat mengunggah semua jenis gambar dalam obrolan, dan selalu penting untuk memoderasi gambar yang menyinggung, terutama di platform sosial publik. Di FriendlyChat, gambar yang dipublikasikan ke obrolan disimpan ke Google Cloud Storage .

Dengan Cloud Functions, Anda dapat mendeteksi upload gambar baru menggunakan functions.storage().onFinalize . Ini akan berjalan setiap kali file baru diunggah atau diubah di Cloud Storage.

Untuk memoderasi gambar, kita akan melalui proses berikut:

  1. Periksa apakah gambar tersebut ditandai sebagai Dewasa atau Kekerasan menggunakan Cloud Vision API .
  2. Jika gambar telah ditandai, unduh gambar tersebut pada instans Functions yang sedang berjalan.
  3. Buramkan gambar menggunakan ImageMagick .
  4. Unggah gambar buram ke Cloud Storage.

Aktifkan Cloud Vision API

Karena kami akan menggunakan Google Cloud Vision API dalam fungsi ini, Anda harus mengaktifkan API pada proyek firebase Anda. Ikuti tautan ini , lalu pilih proyek Firebase Anda dan aktifkan API:

5c77fee51ec5de49.png

Instal dependensi

Untuk memoderasi gambar, kami akan menggunakan Pustaka Klien Google Cloud Vision untuk Node.js, @google-cloud/vision , untuk menjalankan gambar melalui Cloud Vision API guna mendeteksi gambar yang tidak pantas.

Untuk menginstal paket ini ke aplikasi Cloud Functions Anda, jalankan perintah npm install --save berikut. Pastikan Anda melakukan ini dari direktori functions .

npm install --save @google-cloud/vision@2.4.0

Ini akan menginstal paket secara lokal dan menambahkannya sebagai ketergantungan yang dinyatakan dalam file package.json Anda.

Impor dan konfigurasikan dependensi

Untuk mengimpor dependensi yang diinstal dan beberapa modul inti Node.js ( path , os dan fs ) yang kita perlukan di bagian ini, tambahkan baris berikut ke bagian atas file index.js Anda:

indeks.js

const Vision = require('@google-cloud/vision');
const vision = new Vision.ImageAnnotatorClient();
const {promisify} = require('util');
const exec = promisify(require('child_process').exec);

const path = require('path');
const os = require('os');
const fs = require('fs');

Karena fungsi Anda akan berjalan di dalam lingkungan Google Cloud, Anda tidak perlu mengonfigurasi pustaka Cloud Storage dan Cloud Vision: keduanya akan dikonfigurasi secara otomatis untuk menggunakan proyek Anda.

Mendeteksi gambar yang tidak pantas

Anda akan menggunakan pemicu functions.storage.onChange Cloud Functions, yang menjalankan kode Anda segera setelah file atau folder dibuat atau diubah di bucket Cloud Storage. Tambahkan Fungsi blurOffensiveImages ke dalam file index.js Anda:

indeks.js

// Checks if uploaded images are flagged as Adult or Violence and if so blurs them.
exports.blurOffensiveImages = functions.runWith({memory: '2GB'}).storage.object().onFinalize(
    async (object) => {
      const imageUri = `gs://${object.bucket}/${object.name}`;
      // Check the image content using the Cloud Vision API.
      const batchAnnotateImagesResponse = await vision.safeSearchDetection(imageUri);
      const safeSearchResult = batchAnnotateImagesResponse[0].safeSearchAnnotation;
      const Likelihood = Vision.protos.google.cloud.vision.v1.Likelihood;
      if (Likelihood[safeSearchResult.adult] >= Likelihood.LIKELY ||
          Likelihood[safeSearchResult.violence] >= Likelihood.LIKELY) {
        functions.logger.log('The image', object.name, 'has been detected as inappropriate.');
        return blurImage(object.name);
      }
      functions.logger.log('The image', object.name, 'has been detected as OK.');
    });

Perhatikan bahwa kami menambahkan beberapa konfigurasi instance Cloud Functions yang akan menjalankan fungsi tersebut. Dengan .runWith({memory: '2GB'}) , kami meminta agar instance mendapat memori 2GB, bukan default, karena fungsi ini memerlukan banyak memori.

Saat fungsi ini dipicu, gambar dijalankan melalui Cloud Vision API untuk mendeteksi apakah gambar tersebut ditandai sebagai gambar dewasa atau kekerasan. Jika gambar terdeteksi sebagai tidak pantas berdasarkan kriteria ini, kami akan memburamkan gambar tersebut, yang dilakukan dalam fungsi blurImage seperti yang akan kita lihat selanjutnya.

Mengaburkan gambar

Tambahkan fungsi blurImage berikut di file index.js Anda:

indeks.js

// Blurs the given image located in the given bucket using ImageMagick.
async function blurImage(filePath) {
  const tempLocalFile = path.join(os.tmpdir(), path.basename(filePath));
  const messageId = filePath.split(path.sep)[1];
  const bucket = admin.storage().bucket();

  // Download file from bucket.
  await bucket.file(filePath).download({destination: tempLocalFile});
  functions.logger.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await exec(`convert "${tempLocalFile}" -channel RGBA -blur 0x24 "${tempLocalFile}"`);
  functions.logger.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  functions.logger.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  functions.logger.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  functions.logger.log('Marked the image as moderated in the database.');
}

Dalam fungsi di atas, biner gambar diunduh dari Cloud Storage. Gambar kemudian diburamkan menggunakan alat convert ImageMagick, dan versi buram diunggah ulang ke Storage Bucket. Selanjutnya, kami menghapus file di instance Cloud Functions untuk mengosongkan sebagian ruang disk, dan kami melakukan ini karena instance Cloud Functions yang sama dapat digunakan kembali dan jika file tidak dibersihkan, ruang disk dapat habis. Terakhir, kami menambahkan boolean ke pesan obrolan yang menunjukkan bahwa gambar telah dimoderasi, dan ini akan memicu penyegaran pesan pada klien.

Terapkan Fungsinya

Fungsi ini hanya akan aktif setelah Anda menerapkannya. Pada baris perintah, jalankan firebase deploy --only functions :

firebase deploy --only functions

Ini adalah keluaran konsol yang akan Anda lihat:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: creating function blurOffensiveImages...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Uji fungsinya

Setelah fungsi berhasil diterapkan:

  1. Buka aplikasi Anda di browser menggunakan URL hosting (dalam bentuk https://<project-id>.firebaseapp.com ).
  2. Setelah masuk ke aplikasi, unggah gambar: 4db9fdab56703e4a.png
  3. Pilih gambar ofensif terbaik Anda untuk diunggah (atau Anda dapat menggunakan Zombie pemakan daging ini!) dan setelah beberapa saat, Anda akan melihat postingan Anda disegarkan dengan versi gambar yang buram: 83dd904fbaf97d2b.png

10. Notifikasi Pesan Baru

Di bagian ini, Anda akan menambahkan Cloud Function yang mengirimkan pemberitahuan kepada peserta obrolan ketika ada pesan baru yang diposting.

Dengan menggunakan Firebase Cloud Messaging (FCM), Anda dapat mengirimkan notifikasi dengan andal kepada pengguna di seluruh platform. Untuk mengirim notifikasi ke pengguna, Anda memerlukan token perangkat FCM mereka. Aplikasi web obrolan yang kami gunakan sudah mengumpulkan token perangkat dari pengguna saat mereka membuka aplikasi untuk pertama kali di browser atau perangkat baru. Token ini disimpan di Cloud Firestore dalam koleksi fcmTokens .

Jika Anda ingin mempelajari cara mendapatkan token perangkat FCM di aplikasi web, Anda dapat membuka Firebase Web Codelab .

Kirim pemberitahuan

Untuk mendeteksi kapan pesan baru diposting, Anda akan menggunakan pemicu functions.firestore.document().onCreate Cloud Functions, yang menjalankan kode Anda saat objek baru dibuat di jalur tertentu di Cloud Firestore. Tambahkan fungsi sendNotifications ke dalam file index.js Anda:

indeks.js

// Sends a notifications to all users when a new message is posted.
exports.sendNotifications = functions.firestore.document('messages/{messageId}').onCreate(
  async (snapshot) => {
    // Notification details.
    const text = snapshot.data().text;
    const payload = {
      notification: {
        title: `${snapshot.data().name} posted ${text ? 'a message' : 'an image'}`,
        body: text ? (text.length <= 100 ? text : text.substring(0, 97) + '...') : '',
        icon: snapshot.data().profilePicUrl || '/images/profile_placeholder.png',
        click_action: `https://${process.env.GCLOUD_PROJECT}.firebaseapp.com`,
      }
    };

    // Get the list of device tokens.
    const allTokens = await admin.firestore().collection('fcmTokens').get();
    const tokens = [];
    allTokens.forEach((tokenDoc) => {
      tokens.push(tokenDoc.id);
    });

    if (tokens.length > 0) {
      // Send notifications to all tokens.
      const response = await admin.messaging().sendToDevice(tokens, payload);
      await cleanupTokens(response, tokens);
      functions.logger.log('Notifications have been sent and tokens cleaned up.');
    }
  });

Dalam Fungsi di atas, kami mengumpulkan token perangkat semua pengguna dari database Cloud Firestore dan mengirimkan notifikasi ke masing-masing token tersebut menggunakan fungsi admin.messaging().sendToDevice .

Bersihkan tokennya

Terakhir, kami ingin menghapus token yang tidak valid lagi. Hal ini terjadi ketika token yang pernah kita dapatkan dari pengguna tidak lagi digunakan oleh browser atau perangkat. Misalnya, hal ini terjadi jika pengguna telah mencabut izin notifikasi untuk sesi browser. Untuk melakukannya, tambahkan fungsi cleanupTokens berikut di file index.js Anda:

indeks.js

// Cleans up the tokens that are no longer valid.
function cleanupTokens(response, tokens) {
 // For each notification we check if there was an error.
 const tokensDelete = [];
 response.results.forEach((result, index) => {
   const error = result.error;
   if (error) {
     functions.logger.error('Failure sending notification to', tokens[index], error);
     // Cleanup the tokens that are not registered anymore.
     if (error.code === 'messaging/invalid-registration-token' ||
         error.code === 'messaging/registration-token-not-registered') {
       const deleteTask = admin.firestore().collection('fcmTokens').doc(tokens[index]).delete();
       tokensDelete.push(deleteTask);
     }
   }
 });
 return Promise.all(tokensDelete);
}

Terapkan Fungsinya

Fungsi ini hanya akan aktif setelah Anda menerapkannya, dan untuk menerapkannya, jalankan ini di baris perintah:

firebase deploy --only functions

Ini adalah keluaran konsol yang akan Anda lihat:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: updating function blurOffensiveImages...
i  functions: creating function sendNotifications...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful updating operation.
✔  functions[sendNotifications]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Uji fungsinya

  1. Setelah fungsi berhasil diterapkan, buka aplikasi Anda di browser menggunakan URL hosting (dalam bentuk https://<project-id>.firebaseapp.com ).
  2. Jika Anda masuk ke aplikasi untuk pertama kalinya, pastikan Anda mengizinkan notifikasi saat diminta: 8b9d0c66dc36153d.png
  3. Tutup tab aplikasi obrolan atau tampilkan tab lain: Notifikasi hanya muncul jika aplikasi berada di latar belakang. Jika Anda ingin mempelajari cara menerima pesan saat aplikasi Anda berada di latar depan, lihat dokumentasi kami .
  4. Menggunakan browser lain (atau jendela Penyamaran), masuk ke aplikasi dan posting pesan. Anda akan melihat pemberitahuan yang ditampilkan oleh browser pertama: 45282ab12b28b926.png

11. Selamat!

Anda telah menggunakan Firebase SDK untuk Cloud Functions dan menambahkan komponen sisi server ke aplikasi chat.

Apa yang telah kami bahas

  • Membuat Cloud Functions menggunakan Firebase SDK untuk Cloud Functions.
  • Memicu Cloud Functions berdasarkan peristiwa Auth, Cloud Storage, dan Cloud Firestore.
  • Tambahkan dukungan Firebase Cloud Messaging ke aplikasi web Anda.
  • Terapkan Cloud Functions menggunakan Firebase CLI.

Langkah selanjutnya

Belajarlah lagi