Kuidas rakendada rakenduses Node / React veebipõhiseid teatisi

Tõuketeateid kasutatakse laialdaselt nii brauseri kui ka mobiilirakendustes. Teil pole võimalust mitte kasutajana nendega silmitsi seista. Selle artikli eesmärk on pakkuda mõnda tavaliste tehnoloogiatega veebipõhiste teavituste katteplaati: taustaprogrammil Node.js & Express ja esipaneelil React.js (looge React App).

Esiteks kirjeldame veebiserverite teatiste üldist elutsüklit:

  1. Kliendirakendus installib teenindaja. See on teie brauseris autonoomselt töötav skript, mis võtab viimastel aastatel üha rohkem funktsioone. Nii et isegi kui rakenduse vahekaart pole praegu avatud, võtab teenindaja teate vastu ja kuvab selle.
  2. Kasutaja saab teate kuvamise taotluse.
  3. Pärast teatiste kuvamiseks loa saamist edastab brauser rakendusele mandaadi ja muu teenuseteabe. Need andmed tuleb saata taustaprogrammile ja säilitada db-s.
  4. Varem saadud mandaate kasutades teeb taustaprogramm teenusepakkujale päringu, mis omakorda saadab teenindustöötajale teatise.
  5. Teenindaja saab teatise ja näitab seda.

Nüüd rakendame kõik vajalikud komponendid. Võite paljundada allpool kirjeldatud samme või kasutada valmis katlaplaati, mille lingid on toodud artikli lõpus.

Kapten üritas asja ära mõelda, kui ma olin eemal.

1. samm: rakenduse Node.js käivitamine ja VAPID-võtmete hankimine.

Me lähtestame oma taustarakenduse koos kõigi vajalike sõltuvustega käsuga:
lõng lisada express dotenv body-parser cors web-push
Teavituste edastuskanali kaitsmiseks väliste häirete eest kasutatakse niinimetatud VAPID-võtmeid. Avalik võti saadetakse tellimise ajal tõuketeenusele. Edaspidi kasutab teie taustarakendus neid võtmeid autentimismeetmena, saates tõrketeenuse kaudu teatist. VAPID-võtmeid saate luua käsuga:
./ node_modules/.bin/web-push genereeri-vapid-võtmed
Nüüd, kui meil on paar võtit, läheme üle kliendirakenduse loomisele ja läheme läbi kogu stsenaariumi: tellimisest teatise saatmiseni.

2. samm: rakenduse React ja töötaja teenuse loomine.

Esiplaanina kasutame rakendust React, nimelt CRA. See on üsna populaarne viis üheleheliste rakenduste loomiseks, nii et näitena eelistasin seda vanilla JS-ile. Teisest küljest on reitinguagentuuridel teenindustöötaja kasutamise osas teatavaid puudusi, mida arutatakse allpool.

Seega lähtestame oma rakenduse uues veebipõhises kaustas käsuga:
lõnga luua react-app veebi push-front
Rakenduse töö kontrollimiseks käivitage käsu lõnga algus ja külastage saiti http: // localhost: 3000 /

Vaikimisi töötab CRA selliselt, et teenindav töötaja puudub dev-režiimis ja kõik varem installitud teenindajad asendatakse mannekeeniga.
Alustuseks asendage src / index.js-is rida serviceWorker.unregister (); teenuse serviceWorker.register () kaudu.

Järgmisena muudame faili src / serviceWorker.js funktsiooni register (), eemaldades tingimuse:
protsess.env.NODE_ENV === 'tootmine'
nii et teenindav töötaja laaditakse mitte ainult tooterežiimis.

Vaikimisi antakse lennul loodud näivfail dev-režiimi aadressil http: // localhost: 3000 / service-worker.js. Selle muutmiseks muutke faili nime, mis antakse dev-režiimis kohandatud sw.js-le.

const swFileName = protsess.env.NODE_ENV === 'tootmine'
  ? 'teenindaja.js'
  : 'custom-sw.js'
const swUrl = `$ {process.env.PUBLIC_URL} / $ {swFileName}`;

Nüüd loome avalikus kaustas teenindustöötaja, kes kuulab tõukesündmust ja kuvab teatisi.

Nüüd avage DevTools, kui suvand Värskenda uuesti laadimisel on lubatud või selle ekvivalent oma lemmikbrauseris ja laadige leht uuesti. Seetõttu tuleks kohandatud sw.js installida.
Selle toimivuse kontrollimiseks saatke kohaliku sisuga testteade sellise sisuga:
{“Keha”: “devbody”, “pealkiri”: “devtest”}

3. samm: tellige teatised.

Esiteks loome .env-faili, kuhu sisestame oma taustaprogrammi URL-i ja varem loodud avaliku VAPID-võtme.

Nüüd rakendage kogu skript teatiste tellimiseks failis src / subscription.js

Analüüsime seda üksikasjalikult. Põhifunktsioon subscribeUser () on loodud maksimaalsete võimalike olukordade käsitlemiseks: brauseri poolt push-teavituste toe puudumine, kasutaja märguannete kuvamise keelamine jne. Tellimus ise luuakse, helistades registreeringule.pushManager.subscribe (), kus me edastage meie avalik VAPID-võti. Enne selle teisendamist tuleb kasutada funktsiooni urlBase64ToUint8Array () Google'i õpetuses. Eduka liitumislepingu või olemasoleva tellimuse korral saame volikirjad. Iga brauser rakendab oma teenuse kaudu tõukemärguannete edastamist. Kasutades näitena Google Chrome'i, näevad saadud mandaadid järgmised:

{
  tulemusnäitaja: "https://fcm.googleapis.com/fcm/send/chhjHsBv3DU:APA91bGJCZnXCfkGeAa2nlo5n3fkP4aNw1J7Y34s9neghg0KowAKJcUqIbm97TuuASOD8VD4CpWNpVrKaX3E1f-rwLaINlKOCwGUFCUtZG9qpYNBT3edlEF0mznLK3gJN3rp7XwJAc2y"
  expirationTime: null,
  võtmed: {
    p256dh: 'BBe1YEEq3YuUwYxekAYug5xdjTg18IUkvdTLjRjshN4lnbytK-b7_3iAbYEpgjsFRvboIPsc3h_3wWM8TCRisSc',
    auth: 'uQq5Eyjzvwv66ddqwXa1PA'
  }
}

Pärast seda saatke see objekt taustaprogrammile koos tüüpilise POST-päringuga, kutsudes sendSubscription ().
Lõpuks importige funktsioon subscribeUser () kataloogist subscription.js kataloogi index.js ja lisage selle kõne faili lõpus.

4. samm: mandaatide hankimine taustal ja teatise saatmine.

On aeg hingata elu sõlmerakenduse mallile.
Alustuseks loome .env-faili, milles määrame teatiste saatjaks paar VAPID-võtmeid ja teie kontaktaadressi.

Järgmisena rakendame lihtsuse huvides kogu taustarakenduse loogika ühte index.js faili.

Asjad, mis seal juhtuvad:

  1. Initsialiseerige Expressi raamistik.
  2. Kasutage env-config.
  3. Keela turvapoliitika CORS. Ole ettevaatlik ja häälesta seda tootmises teadlikult.
  4. Rakenda keha parser.
  5. Veebi tõukemoodul lähtestatakse VAPID-klahvide ja kontaktaadressiga.
  6. GET-testi lõpp-punkt, et näha, kas server töötab.
  7. Lõpp-punkt, millega taotlus mandaatidega vastu võetakse. Pärisrakenduses tuleb need andmebaasi salvestada. Meie näites kasutame neid kohe teatise saatmiseks.

Alustame serverit käsuga sõlm index.js ja minge aadressile http: // localhost: 9000, et veenduda selle töös.
Nüüd on mõlemad rakendused valmis ja saate kliendi osa uuesti avada ja näha hüpikakent, kus küsitakse luba teavitamiseks. Kui nõustute, näete, kuidas mandaatidega taotlus taustaprogrammile saadetakse ja pärast tõuketeate saabumist. Palju õnne!

Lisasamm: oodake, mis saab siis tootmisrežiimist?

Sel juhul loob rakenduse Loo reaktor rakendused ehitamiskaustas olevad failid ja sinna paigutatud vaiketöötaja sisaldab kasulikku moodsate rakenduste jaoks. Kui otsustame need alles jätta ja lihtsalt oma tõukefunktsiooni lisada, on vaja ehitamisprotsessi mõnevõrra modifitseerida. Reitinguagentuurides on teenindustöötajate ehitamiseks kasutatav Workbox. Ja selle muutmiseks pole ühtegi sisseehitatud viisi, isegi kui teie eesmärk on lihtsalt lisada mõni kohandatud kood. Leian, et see pakett on kõige veenvam viis selle teostamiseks, kui te ei ole valmis aktiivselt sukelduma reitinguagentuuride kontekstis konfigureerimise Workboxi uurimisse.

Alguses lisage uus sõltuvus:
lõng lisada cra-append-sw
Pärast seda peame laiendama ehituse skripti paketis.json, lisades sinna uue käsu, mis käivitatakse pärast peamist protsessi, nii et kogu rida näeks välja järgmine:
react-scripts build && cra-append-sw --skip-compile ./public/custom-sw.js

Selle tulemusel lisatakse kohandatud sw.js sisu faili build / service-worker.js päris lõppu.

Ja lõpuks - üldised nõuanded tellimistaotluse kuvamise strateegia kohta. Kui kasutaja sellise taotluse tagasi lükkab, pole teil teist võimalust tellimust pakkuda enne, kui kasutaja tühistab brauseri seadetes keelustamise (ja tõenäoliselt ei soovi nad seda teha). Nii et kasutage seda võimalust targalt õige hetke valimisel: see pole kindlasti nii, kui kasutaja esimest korda teie saidile jõuab. Kui soovite, et kasutaja saaks mitu korda häirida, näidake esmalt tellitava pakkumisega kohandatud dialoogi. Ja ainult siis, kui kasutaja on sellega nõus, näidake tõelist.

Kui midagi valesti läheb, saate küsida küttekatla plaadilt:
Sõlmerakendus: https://github.com/seladir/demo-webpush-node
Rakenduse reageerimine: https://github.com/seladir/demo-webpush-react