Anında Bildirimleri PWA'nıza Nasıl Entegre Edebilirsiniz?

Yayınlanan: 2021-04-28

İçindekiler

Bugünkü öğreticimizde, Push Bildirimlerini Firebase kullanarak bir PWA'ya entegre edeceğiz veya daha spesifik olarak, HTTPS isteklerini kullanarak mesajların gönderilmesini sağlayan Bulut Mesajlaşma özelliğini kullanarak.

Aşamalı Web Uygulamaları ve Anında Bildirimler

Aşamalı Web Uygulaması sürekli değişen bir hareket olduğu için, teknolojinin kendisinin yerel uygulama karşılığı ile eşit (işlevsel olarak) hale geldiğini görmek hiç de şaşırtıcı değil.

 Önerilen okuma: PWA vs Yerli: Hangisi Size Daha Çok Yakışıyor?

Bildirim tetikleyicileri, geliştiricilere, kullanıcının cihazı uçak modunda olsa bile bildirimleri planlama yeteneği verir.

Jon Krafcik, Chrome Geliştirici Zirvesi 2019
Anında Bildirim Tetikleyicileri - Chrome Geliştirici Zirvesi 2019
Chrome 80'de yeni olan Bildirim Tetikleyicileri , uçak modunda bile bildirimleri etkinleştirir

Tüm bu radikal değişiklikler yerindeyken, PWA'nıza daha da fazla gelir sağlamak için bundan yararlanmamak bir israf olur. Ve bu öğreticiyi kullanarak kendi Anında Bildirim işlevini kolayca kurabileceğiniz için aşırı karmaşık bir şey bile değil.

 Önerilen okuma: E-Ticaret için Aşamalı Web Uygulamasının (PWA) Olması Gereken 9 Özelliği

Push Bildirimlerini PWA'nıza nasıl entegre edebilirsiniz?

Bugünkü öğreticimizde, Push Bildirimlerini Firebase kullanarak bir PWA'ya , özellikle de HTTPS isteklerini kullanarak mesajların gönderilmesini sağlayan Bulut Mesajlaşma özelliğiyle entegre edeceğiz.

Önkoşullar

  • Bir Firebase hesabı (Firebase içinde bir proje oluşturacağınız için)
  • Aşamalı Bir Web Uygulaması. Basitleştirilmiş bir gösteri için, bir komut kullanılarak oluşturulabilen temel bir PWA olan bir create-tepki uygulaması kullanacağız.
PWA Push Bildirimleri: Bir Firebase projesi oluşturun
Firebase ile proje oluşturun

Adım 1 : Temel bir PWA oluşturun

create-react-app kullanarak temel bir PWA oluşturacağımız için önce NodeJS'yi indirelim. NodeJS'yi yüklemeyi bitirdikten sonra NodeJS Komut İstemi'ni açın ve aşağıdaki komutları çalıştırın.

Belirttiğiniz dizinde basit bir React uygulaması oluşturmak için: 

 npx create-tepki-uygulaması-pwa-dizininiz

Mevcut çalışma dizinini yeni oluşturduğunuz React uygulamanızla değiştirin: 

 cd-pwa-dizininiz

Firebase JavaScript kitaplığını projeye ekleyin: 

 npm firebase'i kurun --save
Firebase'i yükleme

2. Adım: push-notification.js oluşturun

Bir sonraki adım, tüm bildirim işlemlerinizden sorumlu olacak modülü oluşturmaktır. <your-pwa-directory>\src içinde, push-notification.js adlı bir dosya oluşturun.

İlk olarak, Firebase'i başlatan ve projenizin anahtarlarını ileten bir fonksiyon oluşturalım. Projenizin anahtarlarını Firebase > Projeye Genel Bakış → Proje Ayarları'na giderek bu simgeye tıklayarak bulabilirsiniz:

PWA Push Bildirimi için Firebase SDK

Bu sizi PWA'nız için Firebase SDK'sını içeren başka bir sayfaya yönlendirecektir:

Firebase SDK'sı

Artık projemizin anahtarlarına sahip olduğumuza göre, aşağıdaki kodu push-notification.js dosyanıza ekleyelim. 

 firebase'i 'firebase'den içe aktarın;
dışa aktarma const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXX",
    veritabanıURL'si: "XXXXXXXXXXXXX",
    proje Kimliği: "XXXXXXXXXXXXX",
    depolamaBucket: "XXXXXXXXXXXXX",
    mesajlaşmaSenderId: "XXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXX"
  });
}

Bununla, tüm bildirim işlemlerinizden sorumlu işlevi oluşturdunuz, şimdi içe aktarmanız ve aramanız gerekecek. index.js dosyanızı şu şekilde düzenleyin: 

 React'i 'react'ten içe aktar;
ReactDOM'u 'react-dom'dan içe aktarın;
'./index.css' dosyasını içe aktarın;
Uygulamayı './App' içinden içe aktarın;
* './serviceWorkerRegistration' adresinden serviceWorkerRegistration olarak içe aktar;
ReportWebVitals'i './reportWebVitals' dosyasından içe aktarın;
firebase'i 'firebase'den içe aktarın;
'./push-notification' içinden { initializeFirebase } dosyasını içe aktarın;
ReactDOM.render(<Uygulama />, document.getElementById('root'));
initializeFirebase();

3. Adım: Bir servis çalışanı oluşturun

Service Workers, çevrimdışı yeteneğini, anında iletme bildirimlerini ve kaynak önbelleğe almayı destekleyen Progressive Web App'in arkasındaki teknolojinin adıdır.

SimiCart, Progresif Web Uygulamaları Hakkında Bilmeniz Gereken Her Şey

onMessage olayının alınması ve dolayısıyla kullanıcının cihazına bildirimlerin gönderilmesine izin vermek için bir hizmet çalışanı gereklidir. Varsayılan olarak Firebase, firebase-messaging-sw.js adlı dosyayı otomatik olarak arar.

Dosyalarınızın sunulduğu dizine firebase-messaging-sw.js . Bizimki bir create-react-app projesi olduğundan, bu firebase-messaging-sw.js ortak klasörümüzde olacak: 

 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: "XXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXX",
    veritabanıURL'si: "XXXXXXXXXXXXX",
    proje Kimliği: "XXXXXXXXXXXXX",
    depolamaBucket: "XXXXXXXXXXXXX",
    mesajlaşmaSenderId: "XXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXX"
});
const mesajlaşma = firebase.messaging();

PWA Service Worker'ı henüz duymadıysanız, bu harika teknoloji hakkında her şeyi öğrenmeniz için özel bir makalemiz var.

4. Adım: Bildirim göndermek için kullanıcı izinlerini isteyin

Gizlilik çağı ve istenmeyen ve yetkisiz bildirimler göndererek kullanıcılarınızı rahatsız etmek istemezsiniz!

Kullanıcınızın iznini istemek için bunu push-notification.js dosyanıza eklemeniz yeterlidir: 

 firebase'i 'firebase'den içe aktarın;
 
dışa aktarma const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXX",
    veritabanıURL'si: "XXXXXXXXXXXXX",
    proje Kimliği: "XXXXXXXXXXXXX",
    depolamaBucket: "XXXXXXXXXXXXX",
    mesajlaşmaSenderId: "XXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXX"
  });
}
 
dışa aktarma const askForPermissionToReceiveNotifications = zaman uyumsuz () => {
  denemek {
    const mesajlaşma = firebase.messaging();
    mesajlaşmayı bekleyin.requestPermission();
    const belirteci = mesajlaşmayı bekleyin.getToken();
    konsol.log('Jetonunuz:', jeton);
    
    dönüş belirteci;
  } yakalama (hata) {
    konsol.hata(hata);
  }
}

Ve bu işlevin bir yerden çağrılması gerekeceğinden, bir düğmeye tıklayarak ekleyeceğiz. /src/ dizininizdeki app.js dosyasını şu şekilde düzenleyin: 

 logoyu './logo.svg'den içe aktarın;
'./App.css' içe aktarın;
{ askForPermissionToReceiveNotifications } dosyasını './push-notification' içinden içe aktarın;

işlev Uygulama() {
  dönüş (
    <div className="Uygulama">
      <header className="Uygulama başlığı">
        <img src={logo} className="Uygulama logosu" alt="logo" />
        <p>
          <code>src/App.js</code> dosyasını düzenleyin ve yeniden yüklemek için kaydedin.
        </p>
        <a
          className="Uygulama bağlantısı"
          href="https://reactjs.org"
          hedef="_blank"
          rel="noopener noreferrer"
        >
          React'i Öğrenin
        </a>
		 <button onClick={askForPermissionToReceiveNotifications} >
          Bildirimleri almak için tıklayın
        </button>
      </header>
    </div>
  );
}

varsayılan Uygulamayı dışa aktar;

Şimdi projemize başlayalım ve aşağıdaki gibi bir Bildirim almak için tıklayın düğmesini görmelisiniz:

Bildirimleri almak için tıklayın düğmesi

Düğmeye tıklayın ve izninizi isteyen bir açılır pencere görmelisiniz:

Bildirim istemini itin

İzin Ver'e tıklayın ve tarayıcınızın konsolunu kontrol edin. Size jetonunuzu bildiren bir mesaj görmelisiniz:

Oluşturulan kullanım belirteci

Şimdi bu jetonu başka bir yere kaydedin çünkü bir sonraki adımda ona ihtiyacınız olacak.

Adım 5: Postacı ile anında iletme bildirimleri gönderin

Sonraki adımlarda, Firebase'in Bulut Mesajlaşma hizmetini kullanarak bildirim göndermek için Postacı'yı kullanacağız.

Postacı'da, aşağıdaki bilgilerle bir POST isteği oluşturun:

  • İstek URL'si : https://fcm.googleapis.com/fcm/send
  • Başlıklar : POST isteğinizin başlıklarında aşağıdaki anahtarlara sahip olmanız gerekir:

Yetkilendirme: anahtar= SERVER_KEY

İçerik Türü : uygulama/json

Doğru yapılandırılmış Yetkilendirme ve İçerik Türü

Notlar : SERVER_KEY , Firebase ayarlarınızdaki Bulut Mesajlaşma sekmesinde bulunabilir.

  • Gövde : POST isteğinizin gövdesini aşağıdaki kodla doldurun: 
 {
    "bildirim": {
        "başlık": "SimiCart",
        "body": "Test push bildirimi",
        "click_action": "http://localhost:3000/",
        "icon": "https://i.imgur.com/5zO5cce.png"
    }
    "to": "USER_TOKEN"
}

4. Adımda USER_TOKEN elde ettiğiniz token ile değiştirin ( Bildirim almak için tıklayın düğmesine tıklayarak ).

postacı vücut

Şimdi Gönder'e tıklayın ve sağ alt köşenizde bir bildirimin belirdiğini görmelisiniz:

Test push bildirimi sonucu

Notlar : Bu bildirimler yalnızca uygulama arka planda veya simge durumuna küçültülmüş durumdayken görünür.

Tebrikler! PWA'nız artık bildirim gönderebilir!

Çözüm

Bu kılavuzdan sonra, artık kendinize ait bir anında iletme bildirimi işlevini güvenle kurabileceğinizi umuyoruz. Yeni bir teknoloji olan Progresif Web Uygulamaları, teknoloji konusunda bilgili olmayan kullanıcılar için kesinlikle karmaşık bir şeydir; bu nedenle, PWA'lardaki uzun yıllara dayanan deneyimimizle her ihtiyacınızı karşılayabilecek SimiCart gibi hazır çözüm sağlayıcılar bulunmaktadır.

simicart PWA'yı keşfedin