Uvod

Web push obavijesti postale su ključni alat za angažiranje korisnika izvan tradicionalnih granica web stranica i aplikacija. Tvrtke i programeri često se oslanjaju na usluge treće strane poput OneSignal ili Firebase Cloud Messaging za rukovanje složenostima slanja obavijesti. Međutim, ove vanjske usluge često uvode ovisnosti, zabrinutosti za privatnost ili ograničenja u prilagodbi.

Ovaj blog post prikazuje detaljan, korak-po-korak vodič za stvaranje neovisne web push obavijestne usluge koristeći biblioteku minishlink/web-push. Iskoristit ćemo ovu PHP biblioteku za integraciju web push obavijesti izravno u CodeIgniter 4 (CI4) i Laravel okvire, omogućujući potpuno autonoman, prilagodljiv i usklađen s privatnošću sustav obavijesti.

Na kraju ovog vodiča, shvatit ćete kako izgraditi i upravljati pouzdanom neovisnom uslugom za push obavijesti koja ne ovisi o vanjskim pružateljima ili platformama poput OneSignal, dajući vam potpunu kontrolu nad infrastrukturom obavijesti.

Zašto odabrati neovisnu web push obavijestnu uslugu?

Prije nego što zaronimo u implementaciju, razmotrimo zašto je izgradnja neovisne usluge obavijesti privlačna opcija:

• Nebitno oslanjanje na usluge treće strane: Izbjegavajte prekide rada, promjene cijena ili promjene politika koje mogu poremetiti vaše obavijesti.
• Puna kontrola privatnosti podataka: Pretplate korisnika i podaci o obavijestima ostaju na vašim vlastitim serverima, smanjujući izloženost trećoj strani.
• Prilagodljivost: Precizno prilagodite logiku obavijesti, zakazivanje i formatiranje sadržaja prema potrebama vašeg poslovanja bez ograničenja.
• Ekonomičnost: Nema oslanjanja na plaćene stavke ili modele naplate po korisniku, što je često kod vanjskih usluga.
• Lako se integrira s postojećom backend infrastrukturom: Direktno integrirajte s vašim bazama podataka i logikom u Laravelu ili CI4-u, pojednostavljujući razvoj i održavanje.

Iako usluge poput OneSignal pojednostavljuju proces za početnike ili manje timove, timovi koji cijene privatnost, neovisnost i naprednu prilagodbu pronaći će rješenje koje se samostalno hostira superiornim.

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

PHP biblioteka minishlink/web-push temelj je naše neovisne usluge. To je zrela, dobro dokumentirana alatka koja rješava složenosti Web Push protokola, uključujući VAPID autentifikaciju, enkripciju sadržaja i upravljanje pretplatama.

Korak 1: Postavljanje razvojnih uvjeta

Prvo, provjerite imate li ispravno postavljenu PHP okolinu s instaliranim Composerom i ili Laravelom ili CodeIgniter 4 konfiguriranim.

• PHP verzija 7.4 ili novija.
• Composer za upravljanje ovisnostima.
• Laravel 8+ ili CodeIgniter 4 instalirani u vašem projektu.

Nastavite s instalacijom biblioteke putem Composera:

composer require minishlink/web-push

Korak 2: Generiranje VAPID ključeva

VAPID (Voluntary Application Server Identification) ključevi su ključne vjerodajnice za autentifikaciju vašeg servera s push servisima preglednika, omogućujući pouzdane i sigurne push poruke.

Generirajte VAPID ključeve koristeći ugrađeni helper u paketu:

php vendor/bin/web-push generate:vapid

Ova naredba ispisuje par javnog i privatnog ključa. Ove ključeve treba sigurno pohraniti; javni ključ će biti dijeljen s klijentima, a privatni ostaje povjerljiv na vašem serveru.

Korak 3: Implementacija pohrane pretplata na serveru

Za slanje obavijesti morate pohraniti detalje pretplate klijenata, koji uključuju URL odredišta i kriptografske ključeve generirane u pregledniku klijenta.

• Primjer 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 frontendu.

Korak 4: Pretplata na klijentskoj strani u JavaScriptu

Na frontendu implementirajte logiku pretplate koristeći Push API i Service Workerse. Ključni aspekt ovdje je korištenje javno VAPID ključa za pretplatu preglednika na vaš push servis.

Primjer 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('Pretplata na push pohranjena.');
}

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 obuhvaća registraciju service workera, pretplatu na push servis i slanje objekta pretplate natrag na backend rutu /save-subscription, koju ćete implementirati u nastavku.

Korak 5: Backend ruta za pohranu pretplate

U Laravelu ili CI4-u kreirajte API rutu koja prima pretplatni JSON s frontenda i pohranjuje ga u vašu bazu pretplata.

Primjer u Laravelu:

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

    // Validacija i sanitizacija podataka prema potrebi
    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 u 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 WebPush klasu iz biblioteke za slanje obavijesti pohranjenim pretplatama.

Primjer koda u Laravelu:

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' => 'Pozdrav',
            'body' => 'Ovo je test push obavijest',
            'icon' => '/icon.png',
        ])
    );

    if ($report->isSuccess()) {
        // Obrada uspjeha (neobavezno)
    } else {
        // Opcionalno: uklonite istekle pretplate
    }
}

Slična logika u CodeIgniter 4:

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' => 'Pozdrav',
            'body' => 'Ovo je test push obavijest',
            'icon' => '/icon.png',
        ])
    );

    if ($report->isSuccess()) {
        // Obrada uspjeha ako je potrebno
    } else {
        // Obrada neuspjeha (npr. uklanjanje nevažećih pretplata)
    }
}

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

Web Push protokol pruža povratne informacije ako pretplata više nije važeća. Važno je ukloniti takve pretplate iz vaše baze kako biste izbjegli nepotrebne pokušaje slanja.

Provjerite izvještaje od sendOneNotification ili procesa slanja u batchu i brišite istekle odredišne točke.

Napredni savjeti i najbolje prakse

• Koristite batch slanje s metodom WebPush::sendNotification za učinkovito upravljanje velikim brojem obavijesti.
• Implementirajte retry mehanizme i nadzor neuspjelih pushova.
• Osigurajte svoje odredišne točke — zaštitite rute za pohranu pretplata i slanje pushova autentifikacijom.
• Poboljšajte payloade s bogatim podacima i mogućnostima interakcije, poput akcija i slika.
• Poštujte GDPR: osigurajte da upravljanje pretplatama poštuje privatnost i pristanak korisnika.

Zaključak

Kreiranje neovisne web push obavijestne usluge koristeći biblioteku minishlink/web-push omogućava programerima i tvrtkama punu kontrolu nad sustavom obavijesti bez oslanjanja na vanjske pružatelje poput OneSignal. Ovaj pristup poboljšava privatnost, prilagodljivost i isplativost.

Prateći korak-po-korak vodič, možete implementirati robusni sustav push obavijesti u okvirima Laravel i CodeIgniter 4. Taj sustav omogućava izravno upravljanje pretplatama, slanje personaliziranih obavijesti i izbjegavanje rizika povezivanja s trećim stranama.

Izgradnja vlastite infrastrukture za push obavijesti dugoročno je investicija u pouzdanost i fleksibilnost, što se savršeno uklapa u suvremene ciljeve web razvoja u angažiranju korisnika i zaštiti privatnosti.