Cara Mengonversi WebApp sebagai PWA dengan Pemberitahuan Push

Diterbitkan: 2022-03-20

Pada artikel ini, kita melihat cara mengonversi Aplikasi Web atau Situs Web menjadi PWA dengan Push Notification menggunakan Firebase Cloud Messaging.

Di dunia modern, sebagian besar aplikasi web dikonversi ke PWA (Progressive Web App) karena menyediakan fitur seperti dukungan offline, pemberitahuan push, sinkronisasi latar belakang. Fitur PWA membuat aplikasi web kami lebih seperti aplikasi asli dan memberikan pengalaman pengguna yang kaya.

Misalnya, perusahaan hebat seperti Twitter dan Amazon telah mengonversi Aplikasi Web mereka ke PWA untuk lebih banyak keterlibatan pengguna.

Apa itu PWA?

PWA = (Aplikasi Web) + (beberapa fitur aplikasi asli)

PWA adalah Aplikasi Web Anda yang sama (HTML+CSS+JS). Ini berfungsi sama seperti Aplikasi Web Anda di semua browser seperti sebelumnya. Tetapi itu dapat memiliki fitur asli ketika situs web Anda dimuat di browser modern. Itu membuat aplikasi web Anda lebih kuat dari sebelumnya dan juga membuatnya lebih skalabel karena kami dapat melakukan prefetch dan cache aset di frontend, ini mengurangi permintaan ke server backend Anda.

Bagaimana PWA berbeda dari Aplikasi Web

  • Dapat Diinstal : Aplikasi Web Anda dapat diinstal seperti aplikasi asli
  • Progresif : Bekerja sama seperti aplikasi web Anda tetapi dengan beberapa fitur asli
  • Pengalaman Aplikasi Asli : Pengguna dapat menggunakan dan menavigasi Aplikasi Web seperti asli, setelah diinstal.
  • Mudah Diakses : Tidak seperti aplikasi web kami, pengguna kami tidak perlu mengetikkan alamat web setiap kali mereka berkunjung. Setelah diinstal, itu dapat dibuka dengan satu ketukan.
  • Caching Aplikasi : Sebelum PWA, satu-satunya mekanisme caching yang diterapkan oleh aplikasi web kami adalah, dengan menggunakan cache HTTP yang hanya tersedia untuk browser. Tetapi dengan PWA kita dapat men-cache sesuatu dengan menggunakan kode sisi klien itu sendiri yang tidak tersedia di aplikasi web.
  • Penerbitan toko (App/Play) : PWA dapat diterbitkan di Google Play Store dan IOS App Store.

Mengonversi aplikasi Anda ke PWA hanya akan membuatnya lebih kuat.

Mengapa bisnis harus mempertimbangkan PWA

Sementara sebagian besar klien kami menghubungi kami dan meminta untuk mengembangkan solusi Aplikasi Web terlebih dahulu dan kemudian mereka meminta aplikasi Android dan iOS. Yang akan kita lakukan hanyalah membangun fungsionalitas yang sama di Aplikasi web ke Aplikasi Android/IOS oleh tim terpisah yang membutuhkan lebih banyak biaya pengembangan dan lebih banyak waktu untuk dipasarkan.

Tetapi beberapa klien memiliki anggaran terbatas atau beberapa klien mungkin berpikir waktu untuk memasarkan lebih penting untuk produk mereka.

Sebagian besar persyaratan klien dapat dipenuhi oleh fitur PWA itu sendiri. Bagi mereka, kami menyarankan PWA saja dan memberi mereka ide untuk mengonversi PWA mereka sebagai Aplikasi Android menggunakan TWA jika mereka ingin menerapkan di Playstore.

Jika kebutuhan Anda benar-benar membutuhkan fitur aplikasi asli yang tidak dapat dipenuhi oleh PWA. Klien dapat pergi dan mengembangkan kedua Aplikasi sesuai keinginan. Tetapi bahkan dalam skenario itu. Mereka dapat menyebarkan PWA di play store hingga pengembangan Android selesai.

Contoh: Titan Eyeplus

Awalnya, mereka mengembangkan aplikasi PWA dan menyebarkannya di play store menggunakan TWA (Aktivitas Web Tepercaya). Setelah mereka menyelesaikan pengembangan aplikasi Android mereka. Mereka menyebarkan Aplikasi Android mereka yang sebenarnya di play store. Mereka mencapai time-to-market menggunakan PWA dan Biaya pengembangan.

Fitur PWA

PWA memberikan aplikasi web kami fitur seperti aplikasi asli.

Fitur utama adalah:

  • Dapat Diinstal: Aplikasi web yang diinstal seperti aplikasi asli.
  • Caching: Caching aplikasi dimungkinkan, yang memberikan dukungan offline aplikasi kami.
  • Pemberitahuan Push: Pemberitahuan Push dapat dikirim dari server kami untuk melibatkan pengguna kami ke situs web kami.
  • Geofencing: Aplikasi dapat diberi tahu oleh suatu peristiwa setiap kali lokasi perangkat berubah.
  • Permintaan Pembayaran: Aktifkan pembayaran di aplikasi Anda dengan pengalaman pengguna yang luar biasa seperti aplikasi asli.

Dan banyak lagi fitur yang akan datang di masa depan.

Fitur lainnya adalah:

  • Pintasan: URL yang dapat diakses dengan cepat ditambahkan dalam file manifes.
  • Web Share API: Biarkan aplikasi Anda menerima data bersama dari aplikasi lain.
  • Badge API: Untuk menampilkan jumlah notifikasi di PWA yang Anda instal.
  • API Sinkronisasi Latar Belakang Berkala: menyimpan data pengguna Anda hingga terhubung ke jaringan.
  • Pemilih kontak: Digunakan untuk memilih kontak dari ponsel pengguna.
  • File Picker: Digunakan untuk mengakses file di sistem lokal/ponsel

Keuntungan PWA dibandingkan Aplikasi Asli

Aplikasi asli berkinerja lebih baik daripada PWA dan memiliki lebih banyak fitur daripada PWA. Tapi tetap saja, ini memiliki beberapa keunggulan dibandingkan aplikasi asli.

  • PWA berjalan di lintas platform seperti Android, iOS, Desktop.
  • Ini mengurangi biaya pengembangan Anda.
  • Penerapan fitur yang mudah dibandingkan dengan aplikasi asli.
  • Mudah ditemukan karena PWA (situs web) ramah SEO
  • Aman karena hanya berfungsi di HTTPS

Kekurangan PWA dibandingkan aplikasi asli

  • Fungsionalitas terbatas tersedia dibandingkan dengan aplikasi asli.
  • Fitur PWA tidak dijamin mendukung semua perangkat.
  • Branding PWA rendah karena tidak tersedia di app store atau play store.

Anda dapat menerapkan PWA Anda sebagai aplikasi Android di play store menggunakan Android Trusted Web Activity (TWA). Ini akan membantu branding Anda.

Hal-hal yang diperlukan untuk mengonversi Aplikasi Web ke PWA

Untuk mengonversi, Aplikasi Web atau Situs Web apa pun ke PWA.

  • Service-Worker: inti dari aplikasi PWA apa pun untuk Caching, Push Notification, proxy untuk permintaan kami.
  • File manifes: Ini memiliki detail tentang aplikasi web Anda. Dulu mengunduh aplikasi kami seperti aplikasi asli di layar beranda.
  • Logo Aplikasi: Gambar berkualitas tinggi 512 x 512 px untuk ikon aplikasi Anda. Logo aplikasi diperlukan untuk PWA di layar beranda, layar splash, dll. Jadi, kita harus membuat gambar dengan rasio 1:1 untuk APP menggunakan alat apa pun.
  • Desain Responsif: Aplikasi web harus responsif untuk bekerja pada ukuran layar yang berbeda.

Apa itu Pekerja Layanan:

Pekerja layanan (skrip sisi klien) adalah proxy antara Aplikasi Web Anda dan sisi luar, mengirimkan pemberitahuan push untuk Aplikasi Web kami dan mendukung Caching.

Service Worker berjalan secara independen dari javascript utama. Jadi tidak memiliki akses ke DOM API. Itu hanya dapat mengakses IndexedDB API, Fetch API, Cache Storage API. Tapi itu bisa berkomunikasi dengan utas utama dengan pesan.

Layanan yang disediakan oleh pekerja layanan:

  • Mencegat permintaan HTTP dari domain asal Anda.
  • Terima Pemberitahuan Push dari server Anda.
  • Ketersediaan offline aplikasi kami

Pekerja layanan mengontrol aplikasi Anda dan dapat memanipulasi permintaan Anda, tetapi itu berjalan secara independen. Jadi untuk alasan itu, domain asal harus diaktifkan dengan HTTPS untuk menghindari serangan man-in-the-middle.

Apa itu file Manifest

File manifes (manifest.json) memiliki detail tentang aplikasi PWA kami untuk memberi tahu browser.

  • nama: Nama aplikasi
  • short_name: Nama Singkatan untuk aplikasi kita. Jika disediakan
  • dengan nama properti dan short_name, browser akan mengambil short_name.
  • deskripsi: Deskripsi untuk menggambarkan aplikasi kita.
  • start_url: Untuk menentukan beranda aplikasi saat PWA kami diluncurkan.
  • ikon: Kumpulan gambar untuk PWA untuk layar Beranda, dll.
  • background_color: Untuk mengatur warna latar belakang layar splash di aplikasi PWA kita.
  • tampilan: Untuk menyesuaikan UI browser kami agar ditampilkan di aplikasi PWA kami.
  • theme_color: Warna tema aplikasi PWA.
  • lingkup: Lingkup URL aplikasi kami untuk dipertimbangkan untuk PWA. Default ke lokasi file manifes berada.
  • pintasan: Tautan cepat untuk aplikasi PWA kami.

Konversi Aplikasi Web ke PWA

Untuk tujuan demo, saya telah membuat struktur folder situs web Geekflare dengan file statis.

  • index.html – halaman beranda
  • artikel/
    • index.html – halaman artikel
  • penulis/
    • index.html – halaman penulis
  • peralatan/
    • index.html – halaman alat
  • kesepakatan/
    • index.html – halaman penawaran

Jika Anda sudah memiliki situs web atau Aplikasi Web, cobalah mengonversinya menjadi PWA dengan mengikuti langkah-langkah di bawah ini.

Buat gambar yang diperlukan untuk PWA

Pertama, ambil logo aplikasi Anda dan potong dalam ukuran rasio 1:1 dalam 5 ukuran berbeda. Saya telah menggunakan https://tools.crawlink.com/tools/pwa-icon-generator/ untuk mendapatkan berbagai ukuran gambar dengan cepat. Jadi Anda juga bisa menggunakannya.

Buat file manifes

Kedua, buat file manifest.json untuk aplikasi Web Anda dengan detail aplikasi Anda. Untuk demo, saya telah membuat file manifes untuk Situs Web Geekflare.

 {
	"nama": "Geekflare",
	"short_name": "Geekflare",
	"description": "Geekflare menghasilkan artikel teknologi & keuangan berkualitas tinggi, membuat alat, dan API untuk membantu bisnis dan orang tumbuh.",
	"start_url": "/",
	"ikon": [{
		"src": "assets/icon/icon-128x128.png",
		"ukuran": "128x128",
		"ketik": "gambar/png"
	}, {
		"src": "assets/icon/icon-152x152.png",
		"ukuran": "152x152",
		"ketik": "gambar/png"
	}, {
		"src": "assets/icon/icon-192x192.png",
		"ukuran": "192x192",
		"ketik": "gambar/png"
	}, {
		"src": "assets/icon/icon-384x384.png",
		"ukuran": "384x384",
		"ketik": "gambar/png"
	}, {
		"src": "assets/icon/icon-512x512.png",
		"ukuran": "512x512",
		"ketik": "gambar/png"
	}],
	"background_color": "#EDF2F4",
	"tampilan": "mandiri",
	"theme_color": "#B20422",
	"lingkup": "/",
	"jalan pintas": [{
			"nama": "Artikel",
			"short_name": "Artikel",
			"description": "1595 artikel tentang Keamanan, Sysadmin, Pemasaran Digital, Komputasi Awan, Pengembangan, dan banyak topik lainnya.",
			"url": "/artikel",
			"ikon": [{
				"src": "/assets/icon/icon-152x152.png",
				"ukuran": "152x152"
			}]
		},
		{
			"nama": "Penulis",
			"short_name": "Penulis",
			"deskripsi": "Geekflare - Penulis",
			"url": "/penulis",
			"ikon": [{
				"src": "/assets/icon/icon-152x152.png",
				"ukuran": "152x152"
			}]
		},
		{
			"nama": "Alat",
			"short_name": "Alat",
			"deskripsi": "Geekflare - Alat",
			"url": "/alat",
			"ikon": [{
				"src": "/assets/icon/icon-152x152.png",
				"ukuran": "152x152"
			}]
		},
		{
			"nama": "Penawaran",
			"short_name": "Penawaran",
			"description": "Geekflare - Penawaran",
			"url": "/deals",
			"ikon": [{
				"src": "/assets/icon/icon-152x152.png",
				"ukuran": "152x152"
			}]
		}
	]
}

Daftarkan Service-worker

buat file skrip register-service-worker.js dan service-worker.js di folder root.

Yang pertama, register-service-worker.js adalah file javascript yang akan dijalankan pada thread utama yang dapat mengakses DOM API. Tetapi service-worker.js adalah skrip service worker yang berjalan secara independen dari utas utama dan masa pakainya juga singkat. Ini berjalan setiap kali peristiwa memanggil pekerja layanan dan berjalan hingga menyelesaikan proses.

Dengan memeriksa file javascript utas utama, Anda dapat memeriksa apakah pekerja layanan terdaftar di dalamnya. jika tidak, Anda dapat mendaftarkan skrip service worker (service-worker.js).

rekatkan cuplikan di bawah ini di register-service-worker.js:

 if ('serviceWorker' di navigator) {
    window.addEventListener('memuat', function() {
        navigator.serviceWorker.register('/service-worker.js');
    });
}

Rekatkan cuplikan di bawah ini di service-worker.js

 self.addEventListener('install', (event) => { // kejadian saat service worker menginstal
    console.log( 'instal', acara);
    self.skipMenunggu();
});

self.addEventListener('activate', (event) => { // event saat service worker diaktifkan
    console.log('mengaktifkan', peristiwa);
    kembalikan diri.klien.klaim();
});

self.addEventListener('fetch', function(event) { // HTTP request interseptor
    event.respondWith(fetch(event.request)); // kirim semua permintaan http tanpa logika cache apa pun
    /*event.respondDengan(
        caches.match(event.request).lalu(fungsi(respon){
            balas tanggapan || ambil (permintaan acara.);
        })
    );*/ // cache permintaan baru. jika sudah di cache sajikan dengan cache.
});

Kami tidak berkonsentrasi pada cara mengaktifkan cache untuk dukungan offline. Kami hanya berbicara tentang cara mengonversi aplikasi Web ke PWA.

Tambahkan file manifes dan skrip di semua tag kepala halaman HTML Anda.

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

Segarkan halaman setelah Anda menambahkan. Sekarang Anda dapat menginstal aplikasi Anda seperti di bawah ini di chrome seluler.

Instalasi PWA di android chrome

Di layar beranda, aplikasi akan ditambahkan.

pintasan pWA di chrome

Jika Anda menggunakan WordPress. Coba gunakan plugin konverter PWA yang ada. Untuk vueJS atau reactJS Anda dapat mengikuti metode di atas atau menggunakan modul npm PWA yang ada untuk mempercepat pengembangan Anda. Karena modul PWA npm sudah diaktifkan dengan caching dukungan offline, dll.

Aktifkan Pemberitahuan Dorong

Pemberitahuan push web dikirim ke browser untuk membuat pengguna kami lebih sering terlibat/berinteraksi dengan aplikasi kami. Kami dapat mengaktifkannya dengan menggunakan

  • Notification API: Digunakan untuk mengonfigurasi bagaimana push notification kami harus ditampilkan kepada pengguna.
  • Push API: Digunakan untuk menerima pesan notifikasi yang dikirim dari server kami ke browser.

Langkah pertama untuk mengaktifkan pemberitahuan push di aplikasi kita adalah memeriksa API Pemberitahuan dan mendapatkan izin dari pengguna untuk menampilkan pemberitahuan. Untuk itu salin dan tempel cuplikan di bawah ini di register-service-worker.js Anda.

 if ('Pemberitahuan' di jendela && Notification.permission != 'diberikan') {
    console.log('Minta izin pengguna')
    Notification.requestPermission(status => {  
        console.log('Status:'+status)
        displayNotification('Pemberitahuan Diaktifkan');
    });
}


const displayNotification = notificationTitle => {
    console.log('tampilkan pemberitahuan')
    if (Notification.permission == 'diberikan') {
        navigator.serviceWorker.getRegistration().then(reg => {
            console.log(reg)
            opsi konstan = {
                    body: 'Terima kasih telah mengizinkan pemberitahuan push!',
                    ikon: '/assets/icons/icon-512x512.png',
                    getar: [100, 50, 100],
                    data: {
                      dateOfArrival: Tanggal.sekarang(),
                      kunci utama: 0
                    }
                  };
    
            reg.showNotification(notificationTitle, opsi);
        });
    }
};

Jika semuanya berjalan dengan benar. Anda akan menerima pemberitahuan dari aplikasi.

pwa-notifikasi-api-izin
pwa-notification-api-displaying-notification

'Pemberitahuan' di jendela akan memberi tahu kami bahwa API Pemberitahuan didukung di browser itu. Notification.permission akan memberi tahu bahwa pengguna telah diizinkan untuk menampilkan notifikasi. Jika pengguna mengizinkan aplikasi kami, nilainya akan 'diberikan'. jika pengguna telah menolak nilainya akan 'diblokir'.

Aktifkan Firebase Cloud Messaging dan Buat Langganan

Sekarang bagian yang sebenarnya dimulai. Untuk mendorong notifikasi dari server Anda ke pengguna, kami memerlukan titik akhir/langganan unik untuk setiap pengguna. Untuk itu, kita akan menggunakan perpesanan cloud firebase.

Sebagai langkah pertama, buat akun firebase dengan mengunjungi tautan ini https://firebase.google.com/ dan tekan mulai.

  1. Buat proyek baru dengan nama dan tekan lanjutkan. Saya akan membuatnya dengan nama Geekflare.
  2. Pada langkah selanjutnya, Google Analytics diaktifkan secara default. Anda dapat beralih bahwa kami tidak membutuhkannya sekarang dan tekan lanjutkan. Anda dapat mengaktifkannya nanti di konsol firebase jika diperlukan.
  3. Setelah proyek dibuat, itu akan terlihat seperti di bawah ini.
Konsol Firebase

Lalu buka pengaturan proyek dan klik pesan cloud dan buat kunci.

pembuatan kunci perpesanan cloud firebase

Dari langkah-langkah di atas, Anda sudah mendapatkan 3 kunci.

  • kunci server proyek
  • Kunci pribadi sertifikat push web
  • Kunci publik sertifikat push web

Sekarang rekatkan cuplikan di bawah ini di register-service-worker.js:

 const updateSubscriptionOnYourServer = langganan => {
    console.log('Tulis kode ajax Anda di sini untuk menyimpan langganan pengguna di DB Anda', langganan);
    // tulis metode permintaan ajax Anda sendiri menggunakan fetch, jquery, axios untuk menyimpan langganan di server Anda untuk digunakan nanti.
};

const subscribeUser = async() => {
    const swRegistration = menunggu navigator.serviceWorker.getRegistration();
    const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // tempel kunci publik sertifikat webpush Anda
    const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
    swRegistration.pushManager.subscribe({
      userVisibleOnly: benar,
      aplikasiServerKey
    })
    .then((berlangganan) => {
        console.log('Pengguna baru berlangganan:', berlangganan);
        updateSubscriptionOnServer(berlangganan);
    })
    .catch((err) => {
        if (Notification.permission === 'denied') {
          console.warn('Izin untuk pemberitahuan ditolak')
        } kalau tidak {
          console.error('Gagal berlangganan pengguna: ', err)
        }
    });
};
const urlB64ToUint8Array = (base64String) => {
    const padding = '='.repeat((4 - base64String.length % 4) % 4)
    const base64 = (base64String + bantalan)
        .ganti(/\-/g, '+')
        .ganti(/_/g, '/')

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

    for (misalkan i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    mengembalikan keluaranArray;
};

const checkBerlangganan = async () => {
    const swRegistration = menunggu navigator.serviceWorker.getRegistration();
    swRegistration.pushManager.getSubscription()
    .then(langganan => {
        jika (!!berlangganan) {
            console.log('User IS Sudah berlangganan.');
            updateSubscriptionOnYourServer(berlangganan);
        } kalau tidak {
            console.log('Pengguna TIDAK berlangganan. Berlangganan pengguna baru');
            berlanggananPengguna();
        }
    });
};

cekBerlangganan();

Rekatkan cuplikan di bawah ini di service-worker.js.

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

Sekarang semua diatur di front-end. Dengan menggunakan langganan, Anda dapat mengirim pemberitahuan push ke pengguna Anda kapan pun Anda mau sampai mereka tidak ditolak layanan pushnya.

Dorong dari Backend node.js

Anda dapat menggunakan modul web-push npm untuk mempermudah.

Contoh cuplikan untuk mengirim pemberitahuan push dari server nodeJS.

 const webPush = membutuhkan('push web');
    // pushSubscription tidak lain adalah langganan yang Anda kirim dari front-end Anda untuk menyimpannya di DB
    const pushSubscription = {"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg{","aukeys":"p8" :"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}};
    // kunci publik sertifikat web Anda
    const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY';
    //kunci pribadi sertifikat web Anda
    const vapidPrivateKey = 'kunci pribadi sertifikat web';

    var payload = JSON.stringify({
      "pilihan": {
        "body": "Pengujian notifikasi push PWA dari backend",
        "lencana": "/assets/icon/icon-152x152.png",
        "ikon": "/assets/icon/icon-152x152.png",
        "getar": [100, 50, 100],
        "data": {
          "id": "458",
        },
        "tindakan": [{
          "aksi": "melihat",
          "judul": "Tampilan"
        }, {
          "aksi": "tutup",
          "judul": "Tutup"
        }]
      },
      "header": "Pemberitahuan dari Geekflare-PWA Demo"
    });

    opsi var = {
      vapidDetail: {
        subjek: 'mailto:[dilindungi email]',
        kunci publik: vapidPublicKey,
        privateKey: vapidPrivateKey
      },
      TTL: 60
    };

    webPush.sendNotification(
      pushBerlangganan,
      muatan,
      pilihan
    ).lalu(data => {
      return res.json({status : benar, pesan : 'Pemberitahuan terkirim'});
    }).catch(err => {
      return res.json({status : false, pesan : err });
    });

Kode di atas akan mengirimkan pemberitahuan push ke langganan. Acara push di service-worker akan dipicu.

Dorong dari Backend PHP

Untuk backend PHP Anda dapat menggunakan paket komposer web-Push-php. Periksa kode contoh untuk mengirim pemberitahuan push di bawah ini.

 <?php if ( !defined('BASEPATH')) exit('Tidak ada akses skrip langsung yang diizinkan');

memerlukan __DIR__.'/../vendor/autoload.php';
gunakan Minishlink\WebPush\WebPush;
gunakan Minishlink\WebPush\Subscription;

// langganan disimpan di DB
$subsrciptionJson = '{"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-ukeys":"W6dh" ":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}}';
$payloadData = larik (
'pilihan' => larik (
                'body' => 'Pengujian pemberitahuan push PWA dari backend',
                'lencana' => '/assets/icon/icon-152x152.png',
                'icon' => '/assets/icon/icon-152x152.png',
                'getar' => 
                Himpunan (
                  0 => 100,
                  1 => 50,
                  2 => 100,
                ),
                'data' => 
                Himpunan (
                  'id' => '458',
                ),
                'tindakan' => 
                Himpunan (
                  0 => 
                  Himpunan (
                    'aksi' => 'tampilan',
                    'judul' => 'Lihat',
                  ),
                  1 => 
                  Himpunan (
                    'aksi' => 'tutup',
                    'judul' => 'Tutup',
                  ),
                ),
),
'header' => 'Pemberitahuan dari Geekflare-PWA Demo',
);

// auth
$aut = [
    'GCM' => 'kunci pribadi proyek Anda', // tidak digunakan lagi dan opsional, hanya ada di sini untuk alasan kompatibilitas
    'VAPID' => [
        'subject' => 'mailto:[email protected]', // bisa berupa mailto: atau alamat website Anda
        'publicKey' => 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY', // (disarankan) kunci publik terkompresi di Base64-URL enkode P-256
        'privateKey' => 'kunci pribadi sertifikat web Anda', // (disarankan) sebenarnya pengali rahasia dari kunci pribadi yang dikodekan dalam Base64-URL
    ],
];

$webPush = new WebPush($auth);

$subsrciptionData = json_decode($subsrciptionJson,true);


// webpush 6.0
$webPush->sendOneNotification(
  Langganan::buat($subsrciptionData),
  json_encode($payloadData) // opsional (default null)
);

Kesimpulan

Saya harap ini memberi Anda gambaran tentang mengonversi aplikasi web ke PWA. Anda dapat memeriksa kode sumber artikel ini di sini dan demo di sini. Saya telah menguji pemberitahuan push dengan mengirimkannya dari backend dengan bantuan kode contoh juga.