Cara Mengintegrasikan Pemberitahuan Push ke PWA Anda

Diterbitkan: 2021-04-28

Daftar Isi

Dalam tutorial kami hari ini, kami akan mengintegrasikan Push Notifications ke dalam PWA menggunakan Firebase, atau lebih khusus lagi, menggunakan fitur Cloud Messaging di dalamnya yang memungkinkan pengiriman pesan menggunakan permintaan HTTPS.

Aplikasi Web Progresif dan Pemberitahuan Push

Karena Progressive Web App adalah gerakan yang selalu berubah, tidak mengherankan untuk melihat bahwa teknologi itu sendiri telah menjadi setara (dari segi fungsi) dengan rekan aplikasi aslinya.

 Bacaan yang disarankan: PWA vs Asli: Mana yang Lebih Cocok untuk Anda?

Pemicu notifikasi memberi pengembang kemampuan untuk menjadwalkan notifikasi, meskipun perangkat pengguna dalam mode pesawat.

Jon Krafcik, Chrome Dev Summit 2019
Pemicu Pemberitahuan Dorong - Chrome Dev Summit 2019
Baru di Chrome 80, Pemicu Pemberitahuan mengaktifkan pemberitahuan bahkan dalam mode pesawat

Dengan semua perubahan radikal ini, akan sia-sia jika tidak memanfaatkannya untuk mendorong lebih banyak pendapatan ke PWA Anda. Dan itu bahkan bukan sesuatu yang terlalu rumit karena Anda dapat dengan mudah mengatur fungsi Pemberitahuan Push Anda sendiri menggunakan tutorial ini.

 Bacaan yang direkomendasikan: 9 Fitur yang Harus Dimiliki dari Progressive Web App (PWA) untuk E-Commerce

Cara mengintegrasikan Pemberitahuan Push ke PWA Anda

Dalam tutorial kami hari ini, kami akan mengintegrasikan Push Notifications ke dalam PWA menggunakan Firebase , khususnya fitur Cloud Messaging di dalamnya yang memungkinkan pengiriman pesan menggunakan permintaan HTTPS.

Prasyarat

  • Akun Firebase (karena Anda akan membuat proyek di dalam Firebase)
  • Aplikasi Web Progresif. Untuk demonstrasi yang disederhanakan, kami akan menggunakan create-react-app yang merupakan PWA dasar yang dapat dibuat menggunakan perintah
Pemberitahuan Push PWA: Buat proyek Firebase
Buat proyek dengan Firebase

Langkah 1 : Buat PWA dasar

Karena kita akan membuat PWA dasar menggunakan create-react-app, mari download NodeJS terlebih dahulu. Setelah Anda selesai menginstal NodeJS, buka Command Prompt NodeJS dan jalankan perintah berikut.

Untuk membuat aplikasi React sederhana di direktori yang Anda tentukan: 

 npx create-react-app direktori-pwa Anda

Ubah direktori kerja saat ini ke aplikasi React yang baru Anda buat: 

 cd direktori-pwa Anda

Tambahkan pustaka JavaScript Firebase ke proyek: 

 npm instal firebase --save
Memasang Firebase

Langkah 2: Buat push-notification.js Anda

Langkah selanjutnya adalah membuat modul yang akan bertanggung jawab atas semua pemrosesan notifikasi Anda. Di <your-pwa-directory>\src , buat file bernama push-notification.js .

Pertama, mari buat fungsi yang menginisialisasi Firebase dan meneruskan kunci proyek Anda. Anda dapat menemukan kunci untuk proyek Anda dengan masuk ke Firebase > Tinjauan Proyek → Pengaturan Proyek dan klik ikon ini:

Firebase SDK untuk Pemberitahuan Push PWA

Ini akan mengarahkan Anda ke halaman lain yang berisi Firebase SDK untuk PWA Anda:

SDK Firebase

Sekarang setelah kita memiliki kunci untuk proyek kita, mari tambahkan kode berikut ke dalam push-notification.js Anda. 

 impor firebase dari 'firebase';
ekspor const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXXXXX",
    projectId: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXXX",
    messagingSenderId: "XXXXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXXXX"
  });
}

Dengan ini Anda telah membuat fungsi yang bertanggung jawab atas semua pemrosesan notifikasi Anda, sekarang Anda harus mengimpor dan memanggilnya. Edit index.js Anda seperti ini: 

 impor Bereaksi dari 'bereaksi';
impor ReactDOM dari 'react-dom';
impor './index.css';
impor Aplikasi dari './Aplikasi';
import * sebagai serviceWorkerRegistration dari './serviceWorkerRegistration';
impor reportWebVitals dari './reportWebVitals';
impor firebase dari 'firebase';
impor { initializeFirebase } dari './push-notification';
ReactDOM.render(<App />, document.getElementById('root'));
inisialisasiFirebase();

Langkah 3: Buat pekerja layanan

Service Worker adalah nama teknologi di balik Progressive Web App, yang mendukung kemampuan offline, pemberitahuan push, dan caching sumber daya.

SimiCart, Yang Perlu Anda Ketahui Tentang Aplikasi Web Progresif

Pekerja layanan diperlukan untuk menerima acara onMessage dan akibatnya, memungkinkan pemberitahuan dikirim ke perangkat pengguna. Secara default, Firebase secara otomatis mencari file bernama firebase-messaging-sw.js .

Mari tambahkan firebase-messaging-sw.js ke direktori tempat file Anda disajikan. Karena milik kami adalah proyek create-react-app , firebase-messaging-sw.js ini akan berada di folder publik kami: 

 importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js');
firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXXXXX",
    projectId: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXXX",
    messagingSenderId: "XXXXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXXXX"
});
const messaging = firebase.messaging();

Jika Anda belum pernah mendengar tentang PWA Service Worker, kami memiliki artikel eksklusif untuk Anda pelajari semua tentang teknologi luar biasa ini.

Langkah 4: Minta izin pengguna untuk mengirim pemberitahuan

Ini adalah usia privasi, dan Anda tidak ingin mengganggu pengguna Anda dengan mengirimkan pemberitahuan yang tidak diinginkan dan tidak sah!

Untuk meminta izin pengguna Anda, cukup tambahkan ini ke push-notification.js Anda : 

 impor firebase dari 'firebase';
 
ekspor const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXXXXX",
    projectId: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXXX",
    messagingSenderId: "XXXXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXXXX"
  });
}
 
ekspor const askForPermissionToReceiveNotifications = async () => {
  mencoba {
    const messaging = firebase.messaging();
    menunggu messaging.requestPermission();
    const token = menunggu pesan.getToken();
    console.log('Token Anda adalah:', token);
    
    tanda kembali;
  } tangkap (kesalahan) {
    console.error(kesalahan);
  }
}

Dan karena fungsi ini perlu dipanggil dari suatu tempat, jadi kami akan menambahkannya dengan mengklik tombol. Edit file app.js di direktori /src/ Anda seperti: 

 impor logo dari './logo.svg';
impor './App.css';
import { askForPermissionToReceiveNotifications } dari './push-notification';

fungsi Aplikasi() {
  kembali (
    <div className="Aplikasi">
      <header className="App-header">
        <img src={logo} className="Logo-aplikasi" alt="logo" />
        <p>
          Edit <code>src/App.js</code> dan simpan untuk memuat ulang.
        </p>
        <a
          className="Tautan aplikasi"
          href="https://reactjs.org"
          target="_kosong"
          rel="noopener noreferrer"
        >
          Pelajari Bereaksi
        </a>
		 <button onClick={askForPermissionToReceiveNotifications} >
          Klik untuk menerima notifikasi
        </tombol>
      </header>
    </div>
  );
}

ekspor Aplikasi default;

Sekarang mari kita mulai proyek kita dan Anda akan melihat tombol Klik untuk menerima pemberitahuan seperti ini:

Klik untuk menerima tombol notifikasi

Klik pada tombol dan Anda akan melihat popup yang meminta izin Anda:

Dorong pemberitahuan pemberitahuan

Klik Izinkan dan periksa konsol browser Anda. Anda akan melihat pesan yang memberi tahu Anda tentang token Anda:

Token penggunaan yang dihasilkan

Sekarang simpan token ini di tempat lain karena Anda akan membutuhkannya di langkah berikutnya.

Langkah 5: Kirim pemberitahuan push dengan Postman

Pada langkah berikutnya, kita akan menggunakan Postman untuk mengirim notifikasi menggunakan layanan Cloud Messaging Firebase.

Di Postman, buat permintaan POST dengan informasi berikut:

  • URL Permintaan : https://fcm.googleapis.com/fcm/send
  • Header : Di header permintaan POST Anda, Anda harus memiliki kunci berikut:

Otorisasi: kunci = SERVER_KEY

Tipe-Konten : aplikasi/json

Otorisasi dan Jenis Konten yang dikonfigurasi dengan benar

Catatan : SERVER_KEY dapat ditemukan di bawah tab Cloud Messaging di setelan Firebase Anda

  • Body : Isi body request POST Anda dengan kode berikut: 
 {
    "pemberitahuan": {
        "title": "SimiCart",
        "body": "Tes pemberitahuan push",
        "click_action": "http://localhost:3000/",
        "ikon": "https://i.imgur.com/5zO5cce.png"
    }
    "ke": "USER_TOKEN"
}

Ganti USER_TOKEN dengan token yang Anda peroleh (dengan mengklik tombol Click to accept notification ) pada Langkah 4. Jangan lupa untuk memilih Body type sebagai raw dan JSON .

Tubuh tukang pos

Sekarang klik Kirim dan Anda akan melihat pemberitahuan muncul di sudut kanan bawah Anda:

Uji hasil notifikasi push

Catatan : Notifikasi ini hanya muncul saat aplikasi berada di latar belakang atau diminimalkan.

Selamat! PWA Anda sekarang dapat mengirim notifikasi!

Kesimpulan

Kami berharap setelah panduan ini, Anda sekarang dapat dengan percaya diri mengatur fungsi pemberitahuan push Anda sendiri. Menjadi teknologi baru, Progressive Web Apps merupakan hal yang rumit bagi pengguna yang tidak paham teknologi, itulah sebabnya ada penyedia solusi yang tersedia seperti SimiCart yang dapat memenuhi setiap kebutuhan Anda dengan pengalaman bertahun-tahun di PWA.

Jelajahi simicart PWA