Kirim pemberitahuan untuk aplikasi web menggunakan Cloud Messaging dan Cloud Functions

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

1. Ikhtisar

Dalam codelab ini, Anda akan mempelajari cara menggunakan Cloud Functions for Firebase untuk menambahkan fungsionalitas ke aplikasi web chat dengan mengirimkan notifikasi ke 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 butuhkan?

  • 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 diinstal.
  • Peramban seperti Chrome.
  • Kode sampel. Lihat langkah selanjutnya untuk ini.

2. Dapatkan kode sampel

Kloning repositori GitHub dari baris perintah:

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

Impor aplikasi pemula

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

3. Buat proyek Firebase dan Siapkan aplikasi Anda

Buat proyek

Di Firebase Console , klik Add Project dan beri nama FriendlyChat .

Klik Buat Proyek .

Tingkatkan ke paket Blaze

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

Semua project Firebase, termasuk yang ada dalam 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 biaya kecil ( sekitar $0,03 ) dari Cloud Storage yang digunakan untuk menghosting image 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 mengemulasi Cloud Functions secara gratis di komputer lokal Anda.

Aktifkan Google Auth

Untuk mengizinkan pengguna masuk ke aplikasi, kami akan menggunakan Google auth yang perlu diaktifkan.

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

Juga, jangan ragu untuk mengatur nama aplikasi Anda yang dapat dilihat publik ke 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 Storage dan klik tombol Mulai . Ikuti langkah-langkah di sana, dan untuk lokasi Cloud Storage, akan ada nilai default untuk digunakan. Klik Selesai setelahnya.

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

Firebase Command Line Interface (CLI) akan memungkinkan Anda untuk melayani aplikasi web secara lokal dan menerapkan aplikasi web dan Cloud Functions Anda.

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 sehingga memiliki semua fitur terbaru yang diperlukan untuk Cloud Functions. Jika tidak, jalankan npm install -g firebase-tools untuk memutakhirkan 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. Saat diminta, Anda dapat memilih Alias ​​​​apa pun, seperti codelab .

5. Terapkan dan jalankan aplikasi web

Sekarang setelah Anda mengimpor dan mengonfigurasi proyek Anda, 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 output 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 dalam bentuk https://<project-id>.firebaseapp.com. Buka. Anda akan melihat UI aplikasi obrolan yang berfungsi.

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

3b1284f5144b54f6.png

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

Kami harus mengaktifkan notifikasi di lain waktu.

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

e926868b0546ed71.png

Sekarang, kita akan menambahkan beberapa fungsionalitas menggunakan SDK Firebase untuk Cloud Functions.

6. Direktori Fungsi

Cloud Functions memungkinkan Anda memiliki kode yang berjalan di Cloud dengan mudah tanpa harus menyiapkan server. Kita akan mempelajari cara membangun 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 Fungsi Anda akan berada di bawah 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 tempat kode Anda akan ditempatkan. Jangan ragu untuk memeriksa file ini sebelum melanjutkan.

cd functions
ls

Jika Anda tidak terbiasa dengan 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 :

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

Kami akan mengimpor modul yang diperlukan dan kemudian menulis tiga Fungsi di tempat 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 mengaktifkan 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 ini:

index.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 di-deploy 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 kali di aplikasi obrolan, dan kita akan menambahkan pesan obrolan untuk menyambut pengguna.

8. Selamat Datang Pengguna Baru

Struktur pesan obrolan

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

11f5a676fbb1a69a.png

Ini akan muncul sebagai:

fe6d1c020d0744cf.png

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

442c9c10b5e2b245.png

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

Menambahkan pesan selamat datang

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

index.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 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 obrolan. 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 di baris perintah:

firebase deploy --only functions

Ini adalah output 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 fungsi

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

  1. Buka aplikasi Anda di browser Anda menggunakan URL hosting (dalam bentuk https://<project-id>.firebaseapp.com ).
  2. Dengan pengguna baru, masuk untuk pertama kalinya di aplikasi Anda menggunakan tombol Masuk .
  • Jika Anda sudah masuk ke aplikasi, Anda dapat membuka Firebase Console Authentication dan menghapus akun Anda dari daftar pengguna. Kemudian, masuk lagi.

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 pemicu 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 ditandai sebagai Dewasa atau Kekerasan menggunakan Cloud Vision API .
  2. Jika gambar telah ditandai, unduh pada instance Fungsi yang sedang berjalan.
  3. Blur 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 dalam 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 dependensi yang dideklarasikan 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:

index.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, tidak perlu mengonfigurasi pustaka Cloud Storage dan Cloud Vision: keduanya akan dikonfigurasikan 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:

index.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 mendapatkan memori 2GB daripada default, karena fungsi ini membutuhkan banyak memori.

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

mengaburkan gambar

Tambahkan fungsi blurImage berikut di file index.js Anda:

index.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 di Keranjang Penyimpanan. Selanjutnya, kami menghapus file pada instance Cloud Functions untuk mengosongkan beberapa 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.

Menyebarkan Fungsi

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

firebase deploy --only functions

Ini adalah output 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 fungsi

Setelah fungsi berhasil di-deploy:

  1. Buka aplikasi Anda di browser Anda 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 posting Anda diperbarui dengan versi gambar yang kabur: 83dd904fbaf97d2b.png

10. Pemberitahuan Pesan Baru

Di bagian ini, Anda akan menambahkan Fungsi Cloud yang mengirimkan pemberitahuan kepada peserta obrolan saat pesan baru diposting.

Dengan menggunakan Firebase Cloud Messaging (FCM), Anda dapat mengirim notifikasi dengan andal ke 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 saat pesan baru diposting, Anda akan menggunakan pemicu functions.firestore.document().onCreate Cloud Functions, yang menjalankan kode Anda saat objek baru dibuat di jalur Cloud Firestore tertentu. Tambahkan fungsi sendNotifications ke dalam file index.js Anda:

index.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 semua token perangkat pengguna dari database Cloud Firestore dan mengirimkan pemberitahuan ke masing-masing token menggunakan fungsi admin.messaging().sendToDevice .

Bersihkan token

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

index.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);
}

Menyebarkan Fungsi

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

firebase deploy --only functions

Ini adalah output 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 fungsi

  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 pemberitahuan saat diminta: 8b9d0c66dc36153d.png
  3. Tutup tab aplikasi obrolan atau tampilkan tab lain: Pemberitahuan 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 yang berbeda (atau jendela Penyamaran), masuk ke aplikasi dan kirim 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 kita 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.
  • Deploy Cloud Functions menggunakan Firebase CLI.

Langkah selanjutnya

Belajarlah lagi