Pemberitahuan Tolak Web dengan React dan Pad Tekan

Tutorial ini menunjukkan cara menyepadukan pemberitahuan tolak web dengan lancar ke dalam aplikasi React anda menggunakan SDK Pad Tekan. Kami akan mencipta komponen React yang mudah: butang yang membolehkan pengguna melanggan atau menyahlanggan pemberitahuan tolak.

Menyediakan SDK JavaScript Pad Tekan

Mulakan dengan menambahkan service-worker.js fail pada direktori akar tapak web anda. Tambahkan kod berikut pada fail ini:

<code class="language-javascript">importScripts('https://pushpad.xyz/service-worker.js');</code>

Seterusnya, masukkan coretan kod ini dalam tapak web anda:

<code class="language-javascript">(function(p,u,s,h,x){p.pushpad=p.pushpad||function(){(p.pushpad.q=p.pushpad.q||[]).push(arguments)};h=u.getElementsByTagName('head')[0];x=u.createElement('script');x.async=1;x.src=s;h.appendChild(x);})(window,document,'https://pushpad.xyz/pushpad.js');

pushpad('init', PROJECT_ID);</code>

Ingat untuk menggantikan PROJECT_ID dengan ID projek sebenar anda daripada papan pemuka Pushpad.

Nota: Fungsi init Pushpad cuba mendaftar service-worker.js. Jika anda telah mendaftarkan pekerja perkhidmatan, anda boleh memintas ini dengan menggunakan: pushpad('init', PROJECT_ID, { serviceWorkerPath: null });.

Fungsi SDK Pad Tekan

SDK Pad Tekan menyediakan beberapa fungsi berguna:

• pushpad('subscribe'): Melanggan pengguna dan memaparkan gesaan kebenaran penyemak imbas.
• pushpad('status'): Dapatkan semula status langganan semasa.
• pushpad('unsubscribe'): Nyahlanggan pengguna.
• pushpad('uid'): Mengesahkan pengguna.
• pushpad('tags'): Menambah data penyasaran.

Komponen Reaksi: Butang Langgan/Nyahlanggan

Berikut ialah kod React untuk membuat butang langgan/nyahlanggan:

<code class="language-javascript">import React, { useState, useEffect } from 'react';

const PushSubscriptionButton = () => {
  const [subscribed, setSubscribed] = useState(null);

  useEffect(() => {
    pushpad('status', (isSubscribed) => {
      setSubscribed(isSubscribed);
    });
  }, []);

  const subscribe = () => {
    pushpad('subscribe', (isSubscribed) => {
      setSubscribed(isSubscribed);
      if (!isSubscribed) {
        alert('Notifications are blocked by browser settings.');
      }
    });
  };

  const unsubscribe = () => {
    pushpad('unsubscribe', () => {
      setSubscribed(false);
    });
  };

  if (subscribed === null) {
    return null;
  }

  return (
    subscribed ? (
      <button onClick={unsubscribe}>Unsubscribe</button>
    ) : (
      <button onClick={subscribe}>Subscribe</button>
    )
  );
};

export default PushSubscriptionButton;</code>

Komponen ini menyemak status langganan, memaparkan butang yang sesuai ("Langgan" atau "Nyahlanggan") dan mengendalikan tindakan langganan/nyahlanggan. Ia juga menyediakan makluman mesra pengguna jika pemberitahuan disekat.

Menghantar Pemberitahuan

Setelah anda mempunyai pelanggan, anda boleh menghantar pemberitahuan menggunakan papan pemuka Pushpad (penghantaran manual) atau secara pengaturcaraan melalui API Pushpad (menggunakan Node.js atau pustaka bahasa lain mereka). Ini membolehkan anda menghantar pemberitahuan walaupun pengguna tidak aktif di tapak web anda. Contohnya termasuk pengumuman catatan blog baharu atau promosi e-dagang.

Atas ialah kandungan terperinci Pemberitahuan Tolak Web dengan React dan Pad Tekan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!