“Abbiamo bisogno di un’app per poter inviare notifiche push.” Per un decennio, questa è stata l’unica ragione per cui i brand hanno speso 100.000 euro per creare app native. Il web era silenzioso. Se l’utente ha chiuso la scheda, l’hai perso.

Quell’era è finita. Con iOS 16.4 (2023), Apple ha finalmente abilitato il Web Push per le app Web della schermata iniziale. Il divario tra “App nativa” e “Sito Web” si è effettivamente colmato.

A Maison Code Paris, consideriamo Push non come un canale di marketing, ma come un’Estensione dell’interfaccia utente. È un modo per visualizzare lo stato critico (“Il tuo taxi è qui”, “Il tuo ordine è stato spedito”) sulla superficie del dispositivo più personale dell’utente: la schermata di blocco.

Perché Maison Code ne parla

In Maison Code Paris, agiamo come la coscienza architettonica dei nostri clienti. Spesso ereditiamo stack “moderni” costruiti senza una comprensione fondamentale della scala.

Discutiamo di questo argomento perché rappresenta un punto di svolta critico nella maturità ingegneristica. Implementarlo correttamente differenzia un MVP fragile da una piattaforma resiliente di livello aziendale.

L’architettura: come funziona il Web Push

A differenza di Native Push (che si basa su protocolli proprietari APN/FCM), Web Push è uno standard aperto (RFC 8291). Coinvolge tre attori:

L’agente utente (browser): genera un abbonamento.
Il servizio Push: un server gestito dal fornitore del browser (Mozilla, Google, Apple) che instrada i messaggi.
Il server delle applicazioni (tu): attiva il messaggio.

Chiavi VAPID (il livello di sicurezza)

Come fa Apple a sapere che tu sei quello che invia la notifica e non uno spammer che sta effettuando spoofing del tuo dominio? VAPID (identificazione volontaria del server delle applicazioni).

Generi una coppia di chiavi pubblica/privata.

Chiave pubblica: inviata al browser durante l’abbonamento.
Chiave privata: utilizzata per firmare ogni messaggio push (JWT).

Se la firma non corrisponde alla chiave pubblica memorizzata sul dispositivo, il servizio Push elimina il messaggio. Ciò impedisce il “Push Hijacking”.

Fase di implementazione 1: Il lavoratore dei servizi

Il Service Worker è il cervello dell’operazione. Vive in background, anche quando la scheda è chiusa. Non puoi gestire gli eventi push nel tuo bundle React principale (app.js). Devi gestirli in sw.js.

// pubblico/sw.js

self.addEventListener('push', funzione(evento) {
  if (!event.data) ritorno;

  carico utile const = event.data.json();
  const {titolo, corpo, icona, URL, azioni} = carico utile;

  opzioni const = {
    corpo,
    icona: icona || '/icon-192.png',
    badge: '/badge-monochrome.png', // Piccola icona per la barra di stato di Android
    dati: {url}, // Memorizza il collegamento diretto
    azioni: azioni || [], // Pulsanti interattivi
    tag: 'order-update', // Comprime più notifiche in una
    rinotificare: vero,
  };

  evento.waitUntil(
    self.registration.showNotification(titolo, opzioni)
  );
});

// Gestire il clic
self.addEventListener('notificationclick', funzione(evento) {
  event.notification.close(); // Chiude l'avviso
  const urlToOpen = evento.notificazione.data.url || '/';

  evento.waitUntil(
    client.matchAll({ tipo: 'window', includeUncontrollato: true }).then(windowClients => {
      // Se la scheda è già aperta, focalizzala
      for (let client di windowClients) {
        if (client.url === urlToOpen && 'focus' nel client) {
          restituire client.focus();
        }
      }
      // Altrimenti apri una nuova scheda
      se (clients.openWindow) {
        return client.openWindow(urlToOpen);
      }
    })
  );
});

Fase di implementazione 2: l’abbonamento al frontend

Il messaggio del browser (“example.com vuole inviarti notifiche”) è terrificante. Gli utenti lo bloccano di riflesso. Non chiamare mai Notification.requestPermission() al caricamento della pagina.

Utilizziamo il modello di doppia autorizzazione.

contesto: l’utente fa clic su “Avvisami quando disponibile”.
Soft Prompt: mostra una bella modale HTML. “Ti invieremo un avviso una tantum quando questo prodotto tornerà indietro. Consentire?”
Richiesta difficile: se fanno clic su “Sì”, allora attivano la verifica del browser nativo.

“tsx // componenti/PushToggle.tsx import {urlBase64ToUint8Array} da ’./utils’;

const PUBLIC_VAPID_KEY = ‘BM…’; // La tua chiave pubblica

esporta const PushToggle = () => { const abbonamento = asincrono () => { registrazione const = attendono navigator.serviceWorker.ready;

// 1. Richiedi autorizzazione
risultato const = attendono Notification.requestPermission();
if (risultato!== 'concesso') return;

// 2. Iscriviti al servizio Push abbonamento const = attendi la registrazione.pushManager.subscribe({ userVisibleOnly: vero, applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY) });

// 3. Invia l'endpoint della sottoscrizione al tuo backend
attendono fetch('/api/push/subscribe', {
  metodo: 'POST',
  corpo: JSON.stringify(abbonamento),
  intestazioni: { 'Content-Type': 'application/json' }
});

};

return ; };


## Fase di implementazione 3: il backend dispatch

Utilizziamo la libreria Node.js "web-push" per gestire la crittografia e le intestazioni VAPID.

```javascript
// api/push/send.ts
importare webpush da 'web-push';

webpush.setVapidDettagli(
  'mailto:admin@maisoncode.paris',
  process.env.VAPID_PUBLIC,
  process.env.VAPID_PRIVATE
);

funzione di esportazione asincrona sendNotification(userSubscription, message) {
  prova {
    attendono webpush.sendNotification(userSubscription, JSON.stringify({
      titolo: "Ordine spedito",
      body: 'Il tuo pacco è in arrivo tramite DHL.',
      URL: '/ordini/TRX-123',
      azioni: [
        { azione: 'traccia', titolo: 'Traccia pacco' },
        { azione: 'chiudi', titolo: 'Ignora' }
      ]
    }));
  } cattura (errore) {
    if (codiceerrore.status === 410) {
      // L'abbonamento è morto (l'utente ci ha bloccato). Elimina dal database.
      attendono deleteSubscription(userSubscription.endpoint);
    }
  }
}

Avvertenza su iOS 16.4: i requisiti PWA

Apple ha introdotto un importante punto di attrito. Su Safari (iOS), Web Push è disponibile SOLO se l’utente aggiunge il sito alla schermata Home. Una scheda standard non può ricevere push.

Ciò significa che la tua strategia deve concentrarsi innanzitutto sull’installazione PWA. È necessaria un’interfaccia utente “Prompt di installazione” (simile al prompt Push Soft) che guidi l’utente: “Tocca Condividi -> Aggiungi alla schermata iniziale per ricevere aggiornamenti sugli ordini.”

Una volta installata (in genere in modalità di visualizzazione “autonoma”), l’API Push viene sbloccata.

Notifiche e azioni ricche

Le Azioni di notifica consentono agli utenti di interagire senza aprire l’app.

“Nuovo messaggio ricevuto.”
Azione 1: “Rispondi” (apre l’immissione di testo).
Azione 2: “Segna come letto” (chiama l’API in background).

Questo trasforma la notifica da un “Segnaletica” in un “Pannello di controllo”.

Etica: Il ragazzo che gridava al lupo

La percentuale di clic (CTR) del push è elevata (8-12%), ma la percentuale di annullamento dell’iscrizione è brutale. Se invii una notifica irrilevante (“Piove! Compra scarpe!”), l’utente disabiliterà le autorizzazioni a livello globale. A differenza dell’e-mail (cartella spam), non esiste una via di mezzo. È acceso o spento.

La nostra regola: Push è per Servizio. L’e-mail è per Marketing.

✅Ordine spedito.
✅ Articolo di nuovo disponibile (richiesto dall’utente).
✅ Volo in ritardo.
❌ I saldi invernali sono iniziati.
❌ Dai un’occhiata al nostro nuovo post sul blog.

10. Gestione dell’affaticamento da spinta (limite di frequenza)

Le notifiche push hanno rendimenti strettamente decrescenti.

Messaggio 1: CTR 10%.
Messaggio 2: CTR 5%.
Messaggio 3: CTR 0,5% (e 2% annullamenti dell’iscrizione). Implementiamo il limite di frequenza globale in Redis. “Utente INCR:123:push:count” (TTL 24 ore). Se il conteggio è > 3, eliminiamo silenziosamente i messaggi di marketing (ma consentiamo sempre i messaggi transazionali). Implementiamo anche la logica delle “ore di silenzio” (non svegliare l’utente alle 3 del mattino a meno che la sua casa non sia in fiamme).

11. La strategia di installazione della PWA per iOS

Poiché gli utenti devono installare la PWA per ottenere il push su iOS, è necessaria una strategia. Non puoi semplicemente mostrare un banner “Aggiungi alla schermata principale”. Devi offrire Valore dietro il muro di installazione.

“Installa l’App per tracciare il tuo pacco in tempo reale.”
“Installa l’app per sbloccare lo sconto VIP del 10%.” Creiamo “Istruzioni di installazione” personalizzate che rilevano la versione del sistema operativo dell’utente e mostrano la freccia esatta che punta al pulsante Condividi.

13. Rich Media: immagini e GIF

Il testo è noioso. “Le tue scarpe sono state spedite” va bene. “Le tue scarpe sono state spedite” + [Foto delle scarpe reali] è meglio. Web Push supporta la proprietà “immagine”. Tuttavia, devi fare attenzione alle proporzioni.

Android: Orizzontale (2:1).
Finestre: Quadrato (1:1). Costruiamo un lambda “Image Resizer” che genera al volo miniature specifiche del dispositivo durante l’invio push.

14. Attribuzione analitica

Come fai a sapere se Push sta generando entrate? Non puoi fare affidamento sul “Traffico diretto”. Devi taggare i tuoi URL. url: '/product/123?utm_source=web_push&utm_campaign=black_friday'. Inoltre, ascolta l’evento “notificationclick” per attivare un ping Analytics personalizzato prima di aprire la finestra. Ciò cattura il “coinvolgimento” anche se la pagina non viene caricata.

15. Conclusione

Le notifiche push sono l’arma più potente nell’arsenale di fidelizzazione. Per i rivenditori ad alta frequenza (alimentari, articoli di moda), sono essenziali. Ma richiedono un approccio ingegneristico disciplinato: gestione solida dei Service Worker, sicurezza VAPID e una strategia UX rispettosa.

Maison Code aiuta i brand a navigare in questo spazio, trasformando la schermata di blocco in un canale di conversione, non in un fastidio.

**[Assumi i nostri architetti](/contact)**.