Uvod

Web push obavijesti postale su bitan alat za angažiranje korisnika izvan tradicionalnih granica web stranica i aplikacija. Tvrtke i programeri obično se oslanjaju na usluge trećih strana kao što su OneSignal ili Firebase Cloud Messaging kako bi se nosili sa složenošću slanja obavijesti. Međutim, ove vanjske usluge često uvode ovisnosti, zabrinutost za privatnost ili ograničenja u prilagodbi.

Ovaj post na blogu predstavlja detaljan, korak po korak tutorial o stvaranju nezavisne usluge web push obavijesti koristeći biblioteku minishlink/web-push. Iskoristit ćemo ovu PHP biblioteku za integraciju web push obavijesti izravno u CodeIgniter 4 (CI4) i Laravel okvire, dopuštajući potpuno autonomni, prilagodljiv i sustav obavijesti usmjeren na privatnost.

Do kraja ovog vodiča, razumjet ćete kako izgraditi i upravljati pouzdanom nezavisnom uslugom push obavijesti koja se ne oslanja na vanjske pružatelje ili platforme poput OneSignala, dajući vam potpunu kontrolu nad vašom infrastrukturom obavijesti.

Zašto odabrati nezavisnu uslugu web push obavijesti?

Prije nego što krenemo u implementaciju, razmotrimo zašto je izgradnja nezavisne usluge obavijesti uvjerljiv izbor:

• Nulta ovisnost o uslugama trećih strana: Izbjegavajte prekide, promjene cijena ili promjene politika koje mogu poremetiti vaše obavijesti.
• Potpuna kontrola nad privatnosti podataka: Podaci o pretplati korisnika i obavijestima ostaju na vašim poslužiteljima, smanjujući izloženost podataka trećih strana.
• Prilagodljivost: Prilagodite svoju logiku obavijesti, raspored i formatiranje sadržaja točno svojim poslovnim potrebama bez ograničenja.
• Učinkovitost troškova: Nema oslanjanja na plaćene razine ili modele cijena koji se temelje na korisnicima, što je uobičajeno za vanjske usluge.
• Jednostavna integracija s postojećom pozadinskom infrastrukturom: Izravno se integrirajte sa svojim bazama podataka i logikom u Laravelu ili CI4, pojednostavljujući razvoj i održavanje.

Dok usluge poput OneSignala pojednostavljuju proces za početnike ili male timove, timovi koji cijene privatnost, neovisnost i naprednu prilagodbu smatrat će da je samostalno hostirano rješenje superiorno.

Početak: Izgradnja vlastite usluge s minishlink/web-push

PHP biblioteka minishlink/web-push kamen je temeljac naše nezavisne usluge. To je zreo, dobro dokumentiran alat koji se bavi složenošću Web Push protokola, uključujući VAPID autentifikaciju, šifriranje tereta i upravljanje pretplatom.

Korak 1: Postavljanje razvojnog okruženja

Prvo, provjerite imate li radno PHP okruženje s instaliranim Composerom i pravilno konfiguriranim Laravelom ili CodeIgniterom 4.

• PHP 7.4 ili noviji.
• Composer za upravljanje ovisnostima.
• Laravel 8+ ili CodeIgniter 4 instaliran u vašoj mapi projekta.

Nastavite s instaliranjem biblioteke putem Composera:

composer require minishlink/web-push

Korak 2: Generiranje VAPID ključeva

VAPID (Voluntary Application Server Identification) ključevi su bitne vjerodajnice za autentifikaciju vašeg poslužitelja s push uslugama preglednika, omogućujući pouzdano i sigurno push slanje poruka.

Generirajte svoje VAPID ključeve pomoću ugrađenog pomoćnika u paketu:

php vendor/bin/web-push generate:vapid

Naredba izlazuje javni i privatni par ključeva. Ovi ključevi moraju biti sigurno pohranjeni; javni ključ dijelit će se s klijentima, a privatni ključ ostaje povjerljiv na vašem poslužitelju.

Korak 3: Implementacija pohrane pretplate na strani poslužitelja

Da biste poslali obavijesti, morate pohraniti podatke o pretplati klijenta, koji uključuju URL krajnje točke i kriptografske ključeve generirane u klijentskom pregledniku.

• Primjer sheme baze podataka:

CREATE TABLE subscriptions (
  id INT AUTO_INCREMENT PRIMARY KEY,
  endpoint TEXT NOT NULL,
  public_key VARCHAR(255),
  auth_token VARCHAR(255),
  content_encoding VARCHAR(50),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Pohranite objekte pretplate nakon što se klijenti pretplate na sučelju.

Korak 4: Pretplate na strani klijenta u JavaScriptu

Na sučelju implementirajte logiku pretplate pomoću Push API-ja i Service Workera. Ključni aspekt ovdje je korištenje javnog VAPID ključa za pretplatu preglednika na vašu push uslugu.

Primjer isječka koda:

const publicVapidKey = '';

if ('serviceWorker' in navigator) {
  send().catch(err => console.error(err));
}

async function send() {
  const register = await navigator.serviceWorker.register('/worker.js', {
    scope: '/'
  });

  const subscription = await register.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
  });

  await fetch('/save-subscription', {
    method: 'POST',
    body: JSON.stringify(subscription),
    headers: {
      'content-type': 'application/json'
    }
  });

  console.log('Push subscription saved.');
}

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/\-/g, '+')
    .replace(/_/g, '/');

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

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

Ovaj JavaScript upravlja registracijom radnika usluge, pretplatom na push uslugu i šalje objekt pretplate putanji na pozadini /save-subscription koju ćete implementirati sljedeće.

Korak 5: Krajnja točka na pozadini za spremanje pretplate

U Laravelu ili CI4, stvorite API krajnju točku koja prima JSON pretplate s prednje strane i pohranjuje ga u vašu bazu podataka pretplata.

Primjer Laravel:

Route::post('/save-subscription', function (Request $request) {
    $data = $request->all();

    // Validate and sanitize input as needed
    DB::table('subscriptions')->updateOrInsert(
        ['endpoint' => $data['endpoint']],
        [
            'public_key' => $data['keys']['p256dh'],
            'auth_token' => $data['keys']['auth'],
            'content_encoding' => $request->header('Content-Encoding', 'aes128gcm')
        ]
    );

    return response()->json(['success' => true]);
});

Primjer CodeIgniter 4:

public function saveSubscription()
{
    $data = json_decode($this->request->getBody(), true);

    $db = \Config\Database::connect();
    $builder = $db->table('subscriptions');

    $existing = $builder->getWhere(['endpoint' => $data['endpoint']])->getRow();

    if ($existing) {
        $builder->where('id', $existing->id)->update([
            'public_key' => $data['keys']['p256dh'],
            'auth_token' => $data['keys']['auth'],
            'content_encoding' => $this->request->getHeaderLine('Content-Encoding') ?? 'aes128gcm',
        ]);
    } else {
        $builder->insert([
            'endpoint' => $data['endpoint'],
            'public_key' => $data['keys']['p256dh'],
            'auth_token' => $data['keys']['auth'],
            'content_encoding' => $this->request->getHeaderLine('Content-Encoding') ?? 'aes128gcm',
        ]);
    }

    return $this->response->setJSON(['success' => true]);
}

Korak 6: Slanje push obavijesti

Koristite klasu WebPush iz biblioteke za slanje obavijesti pohranjenim pretplatama.

Primjer Laravel koda za slanje obavijesti:

use Minishlink\WebPush\WebPush;
use Minishlink\WebPush\Subscription;

$vapid = [
  'VAPID' => [
    'subject' => 'mailto:[email protected]',
    'publicKey' => env('VAPID_PUBLIC_KEY'),
    'privateKey' => env('VAPID_PRIVATE_KEY'),
  ],
];

$webPush = new WebPush($vapid);

$subscriptions = DB::table('subscriptions')->get();

foreach ($subscriptions as $sub) {
    $subscription = Subscription::create([
        'endpoint' => $sub->endpoint,
        'publicKey' => $sub->public_key,
        'authToken' => $sub->auth_token,
        'contentEncoding' => $sub->content_encoding,
    ]);

    $report = $webPush->sendOneNotification(
        $subscription,
        json_encode([
            'title' => 'Hello',
            'body' => 'This is a test push notification',
            'icon' => '/icon.png',
        ])
    );

    if ($report->isSuccess()) {
        // Success handling (optional)
    } else {
        // Optional: remove expired subscriptions here
    }
}

CodeIgniter 4 Slićna logika:

use Minishlink\WebPush\WebPush;
use Minishlink\WebPush\Subscription;

$vapid = [
  'VAPID' => [
    'subject' => 'mailto:[email protected]',
    'publicKey' => $_ENV['VAPID_PUBLIC_KEY'],
    'privateKey' => $_ENV['VAPID_PRIVATE_KEY'],
  ],
];

$webPush = new WebPush($vapid);

$db = \Config\Database::connect();
$subscriptions = $db->table('subscriptions')->get()->getResult();

foreach ($subscriptions as $sub) {
    $subscription = Subscription::create([
        'endpoint' => $sub->endpoint,
        'publicKey' => $sub->public_key,
        'authToken' => $sub->auth_token,
        'contentEncoding' => $sub->content_encoding,
    ]);

    $report = $webPush->sendOneNotification(
        $subscription,
        json_encode([
            'title' => 'Hello',
            'body' => 'This is a test push notification',
            'icon' => '/icon.png',
        ])
    );

    if ($report->isSuccess()) {
        // Handle success if needed
    } else {
        // Handle failures (e.g. remove invalid subscriptions)
    }
}

Korak 7: Rješavanje isteklih ili nevažećih pretplata

Web Push protokol vraća povratne informacije ako pretplata više nije valjana. Važno je ukloniti takve pretplate iz svoje baze podataka kako biste izbjegli nepotrebne ponovne pokušaje.

Provjerite izvješća iz sendOneNotification ili procesa skupnog slanja i izbrišite istekla krajnje točke.

Napredni savjeti i najbolje prakse

• Koristite skupno slanje s metodom WebPush::sendNotification za učinkovito rukovanje s više obavijesti.
• Implementirajte logiku ponovnog pokušaja i praćenje neuspjeha push-a.
• Zaštitite svoje krajnje točke — zaštitite spremanje pretplate i rute slanja push-a autentifikacijom.
• Poboljšajte svoje terete s bogatim podacima i mogućnostima interakcije kao što su radnje i slike.
• Pridržavajte se GDPR usklađenosti: osigurajte da upravljanje pretplatom poštuje privatnost i pristanak korisnika.

Zaključak

Stvaranje nezavisne usluge web push obavijesti pomoću biblioteke minishlink/web-push osnažuje programere i tvrtke da u potpunosti kontroliraju svoj sustav obavijesti bez oslanjanja na vanjske pružatelje kao što je OneSignal. Ovaj pristup poboljšava privatnost, prilagodbu i isplativost.

Slijedeći tutorial korak po korak, možete implementirati robustan sustav push obavijesti u okvirima Laravel i CodeIgniter 4. Ovaj sustav vam omogućuje izravno upravljanje pretplatama, slanje personaliziranih obavijesti i izbjegavanje rizika povezanih s ovisnostima trećih strana.

Izgradnja vlastite infrastrukture push obavijesti ulaganje je u dugoročnu pouzdanost i fleksibilnost, što je u savršenom skladu s modernim ciljevima web razvoja u pogledu angažmana korisnika i zaštite privatnosti.