Push Bildirimi ile WebApp'ı PWA Olarak Dönüştürme

Yayınlanan: 2022-03-20

Bu yazıda, Firebase Cloud Messaging kullanarak bir Web Uygulamasını veya Web Sitesini Push Bildirimi ile PWA'ya nasıl dönüştüreceğimizi görüyoruz.

Modern dünyada çoğu web uygulaması, çevrimdışı destek, anında iletme bildirimi, arka plan senkronizasyonu gibi özellikler sağladığı için bir PWA'ya (Aşamalı Web Uygulaması) dönüştürülmektedir. PWA özellikleri, web uygulamamızı yerel bir uygulama gibi yapar ve zengin bir kullanıcı deneyimi sunar.

Örneğin, Twitter ve Amazon gibi harika şirketler, daha fazla kullanıcı katılımı için Web Uygulamalarını PWA'ya dönüştürdü.

PWA nedir?

PWA = (Web Uygulaması) + (bazı yerel uygulama özellikleri)

PWA, aynı Web Uygulamanızdır(HTML+CSS+JS). Daha önce olduğu gibi tüm tarayıcılarda Web Uygulamanızla aynı şekilde çalışır. Ancak web siteniz modern bir tarayıcıya yüklendiğinde yerel özelliklere sahip olabilir. Web uygulamanızı eskisinden daha güçlü kılar ve ayrıca varlıkları ön uçta önceden getirip önbelleğe alabildiğimiz için daha ölçeklenebilir hale getirir, arka uç sunucunuza gelen istekleri azaltır.

PWA'nın Web Uygulamasından farkı nedir?

Yüklenebilir : Web Uygulamanız yerel bir uygulama gibi yüklenebilir
Aşamalı : Web uygulamanızla aynı şekilde çalışır, ancak bazı yerel özelliklerle
Yerel Uygulama Deneyimi : Kullanıcı, yüklendikten sonra Web Uygulamasını yerel gibi kullanabilir ve gezinebilir.
Kolayca Erişilebilir : Web uygulamamızın aksine, kullanıcılarımızın her ziyaretlerinde web adreslerini yazmalarına gerek yoktur. Kurulduktan sonra tek bir dokunuşla açılabilir.
Uygulama Önbelleğe Alma : PWA'dan önce, web uygulamamızın uyguladığı tek önbelleğe alma mekanizması, yalnızca tarayıcı tarafından kullanılabilen HTTP önbelleğini kullanmaktır. Ancak PWA ile, bir web uygulamasında bulunmayan istemci tarafı kodunu kullanarak şeyleri önbelleğe alabiliriz.
(App/Play) mağaza yayınlama : PWA, Google Play Store ve IOS App Store'da yayınlanabilir.

Uygulamanızı PWA'ya dönüştürmek yalnızca onu daha güçlü hale getirecektir.

İşletmeler neden PWA'yı dikkate almalı?

Müşterilerimizin çoğu bize ulaşıp önce Web Uygulaması çözümünü geliştirmemizi, ardından Android ve iOS uygulamalarını talep ederken. Tek yapacağımız, daha fazla geliştirme maliyeti ve pazara daha fazla zaman harcayan ayrı bir ekip tarafından web Uygulamasından Android/IOS Uygulamasına aynı işlevselliği oluşturmak.

Ancak bazı müşterilerin sınırlı bir bütçesi vardır veya bazı müşteriler ürünleri için pazarlama süresinin daha önemli olduğunu düşünebilir.

İstemci gereksinimlerinin çoğu, PWA özelliklerinin kendileri tarafından karşılanabilir. Onlar için yalnızca PWA'yı öneriyoruz ve Playstore'da dağıtmak istiyorlarsa PWA'larını TWA kullanarak bir Android Uygulaması olarak dönüştürmeleri için onlara bir fikir veriyoruz.

Gereksiniminiz gerçekten PWA tarafından karşılanamayan yerel uygulama özelliklerine ihtiyaç duyuyorsa. Müşteriler her iki Uygulamayı da istedikleri gibi gidip geliştirebilirler. Ama bu senaryoda bile. Android geliştirmesi tamamlanana kadar PWA'yı oyun mağazasında dağıtabilirler.

Örnek: Titan Eyeplus

Başlangıçta bir PWA uygulaması geliştirdiler ve bunu TWA'yı (Güvenilir Web Etkinliği) kullanarak oyun mağazasına yerleştirdiler. Android uygulama geliştirmelerini tamamladıktan sonra. Gerçek Android Uygulamalarını oyun mağazasına yerleştirdiler. Hem PWA'yı kullanarak hem de geliştirme maliyetini kullanarak pazara sunma süresine ulaştılar.

PWA özellikleri

PWA, web uygulamalarımıza yerel uygulama benzeri özellikler sunar.

Ana özellikler şunlardır:

Yüklenebilir: Yerel bir uygulama gibi yüklenen bir web uygulaması.
Önbelleğe alma: Uygulamamıza çevrimdışı destek veren uygulama önbelleğe alma mümkündür.
Anında Bildirim: Kullanıcılarımızı web sitemize çekmek için sunucumuzdan Anında Bildirim gönderilebilir.
Geofencing: Cihaz konumu değiştiğinde uygulama bir olayla bilgilendirilebilir.
Ödeme İsteği: Yerel bir uygulama gibi harika bir kullanıcı deneyimiyle uygulamanızda ödemeyi etkinleştirin.

Ve gelecekte gelecek daha birçok özellik.

Diğer özellikler şunlardır:

Kısayollar: Manifest dosyasına eklenen hızlı erişilebilir URL'ler.
Web Share API: Uygulamanızın diğer uygulamalardan paylaşılan verileri almasına izin verin.
Rozet API'si: Yüklü PWA'nızda bildirim sayısını göstermek için.
Periyodik Arka Plan Senkronizasyonu API'si: ağa bağlanana kadar kullanıcınızın verilerini kaydeder.
Kişi seçici: Kullanıcının cep telefonundan kişileri seçmek için kullanılır.
Dosya Seçici: Dosyaya yerel sistemde/mobilde erişmek için kullanılır

PWA'nın Yerel Uygulamaya Göre Avantajı

Yerel uygulama, PWA'dan daha iyi performans gösterir ve PWA'dan daha fazla özelliğe sahiptir. Ancak yine de yerel uygulamaya göre bazı avantajları vardır.

PWA, Android, IOS, Desktop gibi çapraz platformlarda çalışır.
Geliştirme maliyetinizi düşürür.
Yerel bir uygulamaya kıyasla kolay özellik dağıtımı.
PWA (web sitesi) SEO dostu olduğu için kolayca keşfedilebilir
Yalnızca HTTPS'de çalıştığı için güvenli

PWA'nın yerel uygulamaya göre dezavantajları

Yerel bir uygulamaya kıyasla sınırlı işlevler mevcuttur.
PWA özelliklerinin tüm cihazları desteklemesi garanti edilmez.
PWA'nın markası, uygulama mağazasında veya oyun mağazasında bulunmadığından düşüktür.

Android Güvenilir Web Etkinliği'ni (TWA) kullanarak oyun mağazasında PWA'nızı bir Android uygulaması olarak dağıtabilirsiniz. Markalaşmanıza yardımcı olacaktır.

Web Uygulamasını PWA'ya dönüştürmek için gerekenler

Herhangi bir Web Uygulamasını veya Web Sitesini PWA'ya dönüştürmek için.

Hizmet Çalışanı: Önbelleğe Alma için herhangi bir PWA uygulamasının özü, taleplerimiz için bir proxy olan Pushes Notification.
Manifest dosyası: Web uygulamanızla ilgili ayrıntıları içerir. Ana ekranda yerel bir uygulama gibi uygulamamızı indirirdi.
Uygulama Logosu: Uygulama simgeniz için yüksek kaliteli resim 512 x 512 piksel. Ana ekranda, açılış ekranında vb. PWA için uygulama logosu gerekir. Bu nedenle, herhangi bir araç kullanarak APP'miz için 1:1 oranlı bir görüntü seti oluşturmamız gerekir.
Duyarlı Tasarım: Web uygulaması, farklı ekran boyutlarında çalışmak için duyarlı olmalıdır.

Servis Çalışanı Nedir:

Bir hizmet çalışanı (istemci tarafı komut dosyası), Web Uygulamanız ile dış taraf arasında, Web Uygulamamız için anında iletme bildirimleri sağlayan ve Önbelleğe Alma özelliğini destekleyen bir proxy'dir.

Service Worker, ana javascript'ten bağımsız olarak çalışır. Yani DOM API'sine erişimi yok. Yalnızca IndexedDB API, Fetch API, Cache Storage API'ye erişebilir. Ancak ana iş parçacığı ile bir mesajla iletişim kurabilir.

Servis çalışanı tarafından sağlanan servis:

Kaynak alanınızdan gelen HTTP isteklerini engelleme.
Sunucunuzdan Push Bildirimi alın.
Uygulamamızın çevrimdışı kullanılabilirliği

Hizmet çalışanı uygulamanızı kontrol eder ve isteklerinizi değiştirebilir, ancak bağımsız olarak çalışır. Bu nedenle, ortadaki adam saldırısını önlemek için kaynak etki alanı HTTPS ile etkinleştirilmelidir.

Manifest dosyası nedir

Bir bildirim dosyası (manifest.json), tarayıcıya anlatmak için PWA uygulamamız hakkında ayrıntılara sahiptir.

isim: Uygulamanın adı
short_name: Uygulamamızın Kısa Adı. Sağlanırsa
hem özellik adı hem de kısa_adı ile tarayıcı kısa_adı alacaktır.
açıklama: Uygulamamızı açıklamak için açıklama.
start_url: PWA'mız başlatıldığında uygulamanın ana sayfasını belirtmek için.
simgeler: Ana ekran için PWA vb. için görüntü kümesi.
background_color: PWA uygulamamızda açılış ekranının arka plan rengini ayarlamak için.
görüntüleme: Tarayıcı kullanıcı arabirimimizi PWA uygulamamızda gösterilecek şekilde özelleştirmek için.
theme_color: PWA uygulamasının tema rengi.
kapsam: PWA için göz önünde bulundurulacak uygulamamızın URL kapsamı. Bulunan bildirim dosyasının konumu için varsayılandır.
kısayollar: PWA uygulamamız için hızlı bağlantılar.

Web Uygulamasını PWA'ya Dönüştür

Demo amacıyla, statik dosyalar içeren bir Geekflare web sitesi klasör yapısı oluşturdum.

index.html – ana sayfa
nesne/
- index.html – makaleler sayfası
yazarlar/
- index.html – yazarlar sayfası
aletler/
- index.html – araçlar sayfası
fırsatlar/
- index.html – fırsatlar sayfası

Halihazırda herhangi bir web siteniz veya Web Uygulamanız varsa, aşağıdaki adımları izleyerek onu PWA'ya dönüştürmeyi deneyin.

PWA için Gerekli görüntüleri oluşturun

İlk olarak, uygulama logonuzu alın ve 1:1 oranında 5 farklı boyutta kırpın. Farklı görüntü boyutlarını hızlı bir şekilde elde etmek için https://tools.crawlink.com/tools/pwa-icon-generator/ kullandım. Böylece siz de kullanabilirsiniz.

Bir bildirim dosyası oluşturun

İkinci olarak, uygulama ayrıntılarınızla birlikte Web uygulamanız için bir manifest.json dosyası oluşturun. Demo için Geekflare Web Sitesi için bir bildirim dosyası oluşturdum.

 {
	"isim": "Geekflare",
	"short_name": "Geekflare",
	"description": "Geekflare, yüksek kaliteli teknoloji ve finans makaleleri üretir, işletmelerin ve insanların büyümesine yardımcı olacak araçlar ve API'ler yapar.",
	"start_url": "/",
	"simgeler": [{
		"src": "varlıklar/icon/icon-128x128.png",
		"boyutlar": "128x128",
		"type": "resim/png"
	}, {
		"src": "varlıklar/icon/icon-152x152.png",
		"boyutlar": "152x152",
		"type": "resim/png"
	}, {
		"src": "varlıklar/icon/icon-192x192.png",
		"boyutlar": "192x192",
		"type": "resim/png"
	}, {
		"src": "varlıklar/icon/icon-384x384.png",
		"boyutlar": "384x384",
		"type": "resim/png"
	}, {
		"src": "varlıklar/icon/icon-512x512.png",
		"boyutlar": "512x512",
		"type": "resim/png"
	}],
	"background_color": "#EDF2F4",
	"ekran": "bağımsız",
	"theme_color": "#B20422",
	"dürbün": "/",
	"kısayollar": [{
			"isim": "Makaleler",
			"short_name": "Makaleler",
			"description": "Güvenlik, Sysadmin, Dijital Pazarlama, Bulut Bilişim, Geliştirme ve diğer birçok konuda 1595 makale.",
			"url": "/makaleler",
			"simgeler": [{
				"src": "/assets/icon/icon-152x152.png",
				"boyutlar": "152x152"
			}]
		},
		{
			"isim": "Yazarlar",
			"short_name": "Yazarlar",
			"description": "Geekflare - Yazarlar",
			"url": "/yazarlar",
			"simgeler": [{
				"src": "/assets/icon/icon-152x152.png",
				"boyutlar": "152x152"
			}]
		},
		{
			"ad": "Araçlar",
			"short_name": "Araçlar",
			"description": "Geekflare - Araçlar",
			"url": "/araçlar",
			"simgeler": [{
				"src": "/assets/icon/icon-152x152.png",
				"boyutlar": "152x152"
			}]
		},
		{
			"ad": "Fırsatlar",
			"short_name": "Fırsatlar",
			"description": "Geekflare - Fırsatlar",
			"url": "/ fırsatlar",
			"simgeler": [{
				"src": "/assets/icon/icon-152x152.png",
				"boyutlar": "152x152"
			}]
		}
	]
}

Servis çalışanına kaydolun

kök klasörde register-service-worker.js ve service-worker.js adlı bir komut dosyası oluşturun.

İlki, register-service-worker.js, DOM API'ye erişebilen ana iş parçacığında çalışacak javascript dosyasıdır. Ancak service-worker.js, ana iş parçacığından bağımsız olarak çalışan bir hizmet çalışanı betiğidir ve ömrü de kısadır. Olaylar hizmet çalışanlarını aradığında çalışır ve işlemi bitirene kadar çalışır.

Ana iş parçacığı javascript dosyasını kontrol ederek, servis çalışanının içinde kayıtlı olup olmadığını kontrol edebilirsiniz. değilse, hizmet çalışanı komut dosyasını (service-worker.js) kaydedebilirsiniz.

aşağıdaki pasajı register-service-worker.js'ye yapıştırın:

 if (navigatörde 'serviceWorker') {
    window.addEventListener('yük', function() {
        navigator.serviceWorker.register('/service-worker.js');
    });
}

Aşağıdaki snippet'i service-worker.js'ye yapıştırın

 self.addEventListener('install', (event) => { // servis çalışanı kurulduğunda olay
    konsol.log('kurulum', olay);
    self.skipBekliyor();
});

self.addEventListener('activate', (event) => { // servis çalışanı etkinleştirildiğinde olay
    konsol.log('etkinleştir', olay);
    self.clients.claim() döndür;
});

self.addEventListener('getir', function(event) { // HTTP istek önleyicisi
    event.respondWith(getir(event.request)); // tüm http isteklerini önbellek mantığı olmadan gönder
    /*event.respondWith(
        caches.match(event.request).then(function(yanıt) {
            dönüş yanıtı || getir(olay. istek);
        })
    );*/ // yeni isteği önbelleğe al. zaten önbellekte ise önbellekle birlikte hizmet verir.
});

Çevrimdışı destek için önbelleğin nasıl etkinleştirileceğine odaklanmadık. Yalnızca Web uygulamalarının PWA'ya nasıl dönüştürüleceği hakkında konuşuyoruz.

HTML sayfanızın all head etiketine manifest dosyası ve komut dosyası ekleyin.

 <link rel="manifest" href="/manifest.json">
<script src="/register-service-worker.js"></script>

Ekledikten sonra sayfayı yenileyin. Artık mobil chrome'da aşağıdaki gibi uygulamanızı yükleyebilirsiniz.

Ana ekranda uygulama eklenir.

WordPress kullanıyorsanız. Mevcut PWA dönüştürücü eklentisini kullanmayı deneyin. vueJS veya tepkiJS için yukarıdaki yöntemi takip edebilir veya geliştirmenizi hızlandırmak için mevcut PWA npm modüllerini kullanabilirsiniz. PWA npm modülleri çevrimdışı destek önbelleğe alma vb. ile zaten etkinleştirildiğinden.

Anında Bildirimi Etkinleştir

Web push bildirimleri, kullanıcılarımızın uygulamamızla daha sık etkileşim kurmasını/etkileşimini sağlamak için tarayıcıya gönderilir. Kullanarak etkinleştirebiliriz

Bildirim API'si: Push bildirimimizin kullanıcıya nasıl gösterileceğini yapılandırmak için kullanılır.
Push API: Sunucumuzdan tarayıcıya gönderilen bildirim mesajlarını almak için kullanılır.

Uygulamamızda push bildirimini etkinleştirmenin ilk adımı, Bildirim API'sini kontrol etmek ve kullanıcıdan bildirim göstermesi için izin almaktır. Bunun için aşağıdaki pasajı kopyalayıp register-service-worker.js dosyanıza yapıştırın.

 if (pencerede 'Bildirim' && Notification.permission != 'verildi') {
    konsol.log('Kullanıcı izni iste')
    Notification.requestPermission(durum => {  
        konsol.log('Durum:'+durum)
        displayNotification('Bildirim Etkinleştirildi');
    });
}


const displayNotification = noticeTitle => {
    konsol.log('görüntüleme bildirimi')
    if (Notification.permission == 'verildi') {
        navigator.serviceWorker.getRegistration().then(reg => {
            konsol.log(reg)
            const seçenekler = {
                    body: 'Push bildirimine izin verdiğiniz için teşekkürler!',
                    simge: '/assets/icons/icon-512x512.png',
                    titret: [100, 50, 100],
                    veri: {
                      DateOfArrival: Date.now(),
                      birincilAnahtar: 0
                    }
                  };
    
            reg.showNotification(notificationTitle, seçenekler);
        });
    }
};

Her şey doğru gittiyse. Uygulamadan bir bildirim alacaksınız.

Penceredeki 'Bildirim' bize o tarayıcıda Bildirim API'sinin desteklendiğini söyleyecektir. Notification.permission , kullanıcının bildirimi göstermesine izin verildiğini söyleyecektir. Kullanıcı uygulamamıza izin verdiyse, değer 'verilecektir'. kullanıcı reddetmişse değer 'engellenir'.

Firebase Bulut Mesajlaşmayı Etkinleştirin ve Abonelik Oluşturun

Şimdi asıl kısım başlıyor. Sunucunuzdan kullanıcıya bildirim göndermek için her kullanıcı için benzersiz bir uç noktaya/aboneliğe ihtiyacımız var. Bunun için firebase bulut mesajlaşmasını kullanacağız.

İlk adım olarak, bu bağlantıyı https://firebase.google.com/ ziyaret ederek bir firebase hesabı oluşturun ve Başla'ya basın.

Bir adla yeni bir proje oluşturun ve devam et'e basın. Onu Geekflare adıyla oluşturacağım.
Sonraki adımda, Google Analytics varsayılan olarak etkindir. Şimdi buna ihtiyacımız yok arasında geçiş yapabilir ve devam düğmesine basabilirsiniz. Gerekirse, daha sonra firebase konsolunuzda etkinleştirebilirsiniz.
Proje oluşturulduğunda, aşağıdaki gibi görünecektir.

Ardından proje ayarlarına gidin ve bulut mesajlaşma ve anahtar oluştur'u tıklayın.

firebase bulut mesajlaşma anahtar üretimi

Yukarıdaki adımlardan 3 anahtarınız var.

proje sunucusu anahtarı
Web push sertifikaları özel anahtarı
Web push sertifikaları ortak anahtarı

Şimdi aşağıdaki pasajı register-service-worker.js dosyasına yapıştırın:

 const updateSubscriptionOnYourServer = abonelik => {
    console.log('Kullanıcı aboneliğini DB'nize kaydetmek için buraya ajax kodunuzu yazın', abonelik);
    // aboneliği daha sonra kullanmak üzere sunucunuza kaydetmek için fetch, jquery, axios kullanarak kendi ajax istek yönteminizi yazın.
};

const aboneUser = zaman uyumsuz () => {
    const swRegistration = navigator.serviceWorker.getRegistration() bekle;
    const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // webpush sertifikanızın genel anahtarını yapıştırın
    const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
    swRegistration.pushManager.subscribe({
      userVisibleOnly: doğru,
      uygulamaSunucuAnahtarı
    })
    .then((abonelik) => {
        konsol.log('Kullanıcı yeni abone oldu:', abonelik);
        updateSubscriptionOnServer(abonelik);
    })
    .catch((hata) => {
        if (Notification.permission === 'reddedildi') {
          konsol.warn('Bildirimler için izin reddedildi')
        } başka {
          console.error('Kullanıcıya abone olunamadı: ', hata)
        }
    });
};
const urlB64ToUint8Array = (base64String) => {
    const padding = '='.repeat((4 - base64String.length % 4) % 4)
    const base64 = (base64String + dolgu)
        .replace(/\-/g, '+')
        .replace(/_/g, '/')

    const rawData = pencere.atob(base64);
    const outputArray = new Uint8Array(rawData.length);

    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    çıktıArray döndür;
};

const checkSubscription = zaman uyumsuz () => {
    const swRegistration = navigator.serviceWorker.getRegistration() bekle;
    swRegistration.pushManager.getSubscription()
    .then(abonelik => {
        if (!!abonelik) {
            console.log('Kullanıcı Zaten Abone Olmuştur.');
            updateSubscriptionOnYourServer(abonelik);
        } başka {
            konsol.log('Kullanıcı abone DEĞİLDİR. Kullanıcıya yeni abone olun');
            aboneUser();
        }
    });
};

checkSubscription();

Aşağıdaki parçacığı service-worker.js dosyasına yapıştırın.

 self.addEventListener('push', (olay) => {
  const json = JSON.parse(event.data.text())
  console.log('Push Data', event.data.text())
  self.registration.showNotification(json.header, json.options)
});

Şimdi her şey ön uçta. Aboneliği kullanarak, push servisleri reddedilene kadar kullanıcınıza istediğiniz zaman push bildirimleri gönderebilirsiniz.

node.js Backend'den itin

Bunu kolaylaştırmak için web-push npm modülünü kullanabilirsiniz.

NodeJS sunucusundan anında iletme bildirimi göndermek için örnek snippet.

 const webPush = require('web-push');
    // pushSubscription, DB'ye kaydetmek için kullanıcı arabiriminizden gönderdiğiniz abonelikten başka bir şey değildir
    const pushSubscription = {"bitiş noktası":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg"6,7":"wMcg"auth":"wMcg","auth":"WJXA," :"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}};
    // web sertifikalarınız genel anahtarı
    const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY';
    // web sertifikalarınız özel anahtarınız
    const vapidPrivateKey = 'web sertifikası özel anahtarı';

    var payload = JSON.stringify({
      "seçenekler": {
        "body": "Arka uçtan PWA push bildirim testi",
        "rozet": "/assets/icon/icon-152x152.png",
        "icon": "/assets/icon/icon-152x152.png",
        "titreşim": [100, 50, 100],
        "veri": {
          "kimlik": "458",
        },
        "hareketler": [{
          "eylem": "görünüm",
          "başlık": "Görüntüle"
        }, {
          "eylem": "kapat",
          "başlık": "Kapat"
        }]
      },
      "header": "Geekflare-PWA Demo'dan Bildirim"
    });

    var seçenekler = {
      vapidDetails: {
        konu: 'mailto:[e-posta korumalı]',
        publicKey: vapidPublicKey,
        privateKey: vapidPrivateKey
      },
      TL: 60
    };

    webPush.sendNotification(
      pushAbonelik,
      yük,
      seçenekler
    ).then(veri => {
      return res.json({durum : doğru, mesaj : 'Bildirim gönderildi'});
    }).catch(hata => {
      return res.json({durum : false, mesaj : err });
    });

Yukarıdaki kod, aboneliğe bir anında iletme bildirimi gönderir. Service-worker'daki push olayı tetiklenir.

PHP Arka Uçtan İtin

PHP arka ucu için web-push-php besteci paketini kullanabilirsiniz. Anında iletme bildirimleri göndermek için aşağıdaki örnek kodu kontrol edin.

 <?php if ( !defined('BASEPATH')) exit('Doğrudan komut dosyası erişimine izin verilmez');

__DIR__.'/../vendor/autoload.php' gerektirir;
Minishlink\WebPush\WebPush kullanın;
Minishlink\WebPush\Subscription'ı kullanın;

// DB'de saklanan abonelik
$subsrciptionJson = '{"bitiş noktası":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGjq-uw":"FJWKJ-uw":"FJKJ-uw":"FJKHZ9Z88uGj-uw":"FJQJ-uw"; ":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}}}';
$payloadData = dizi (
'seçenekler' => dizi (
                'body' => 'Arka uçtan PWA push bildirim testi',
                'rozet' => '/varlıklar/icon/icon-152x152.png',
                'icon' => '/assets/icon/icon-152x152.png',
                'titreşim' => 
                dizi (
                  0 => 100,
                  1 => 50,
                  2 => 100,
                ),
                'veri' => 
                dizi (
                  'kimlik' => '458',
                ),
                'eylemler' => 
                dizi (
                  0 => 
                  dizi (
                    'eylem' => 'görünüm',
                    'başlık' => 'Görünüm',
                  ),
                  1 => 
                  dizi (
                    'eylem' => 'kapat',
                    'başlık' => 'Kapat',
                  ),
                ),
),
'header' => 'Geekflare-PWA Demo'dan Bildirim',
);

// yetkilendirme
$kimlik = [
    'GCM' => 'projenizin özel anahtarı', // kullanımdan kaldırıldı ve isteğe bağlı, yalnızca uyumluluk nedenleriyle burada
    'VAPID' => [
        'subject' => 'mailto:[email protected]', // mailto: veya web sitenizin adresi olabilir
        'publicKey' => 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY', // (önerilir) Base64-UR ile kodlanmış sıkıştırılmamış genel anahtar
        'privateKey' => 'web sertifikası özel anahtarınız', // (önerilir) aslında Base64-URL'de kodlanmış özel anahtarın gizli çarpanı
    ],
];

$webPush = yeni WebPush($auth);

$subsrciptionData = json_decode($subsrciptionJson,true);


// web push 6.0
$webPush->sendOneNotification(
  Abonelik::create($subsrciptionData),
  json_encode($payloadData) // isteğe bağlı (varsayılan değer boş)
);

Çözüm

Umarım bu size web uygulamalarını PWA'ya dönüştürme konusunda bir fikir verir. Bu makalenin kaynak kodunu buradan kontrol edebilir ve buradan demosunu yapabilirsiniz. Push bildirimini de örnek kod yardımıyla arka uçtan göndererek test ettim.