Tutorial Progressive Web App: Creați primul dvs. PWA

Realizat de Google înșiși și introdus în prezent pe platforme populare, cum ar fi Windows 10, PWA poate face multe dintre lucrurile care anterior erau exclusive aplicațiilor native, inclusiv funcții precum notificări push, interfață captivantă a aplicației, capabilități offline, instalări de aplicații... .

Și acesta este motivul pentru care apariția PWA nu mai este setat să fie momentană, deoarece acum este o mișcare la scară largă, care ar putea schimba fundamental web-ul așa cum îl cunoaștem. Pentru noii veniți, nu este prea târziu să cunoască această tehnologie emergentă, deoarece procesul de construire a unui PWA este acum mult mai simplificat decât înainte, potrivit pentru profanii interesați, cum ar fi dvs.

Pentru cele mai bune scopuri de învățare, astăzi vom crea un PWA complet funcțional folosind React, Node.js și Firebase.

Cerințe preliminare

• Versiunea Node.js >= 8.10
• versiunea npm >= 5.6

Note : versiunea npm nu ar trebui să fie cu adevărat o problemă, deoarece instalarea dvs. de Node.js vine întotdeauna cu cea mai recentă versiune a managerului de pachete npm .

1. Creați un SPA cu create-react-app

În primul rând, avem nevoie de ceva solid la care să lucrăm, iar create-react-app este instrumentul perfect în acest scop.

 npx create-react-app my-PWA
cd my-pwa
npm start

Comenzile de mai sus vă vor ajuta să creați un mediu de învățare, bazat pe React, cu care să lucrați.

Serviți-l prin HTTPS

HTTPS este noul standard pentru web și, odată cu apariția PWA, a devenit din ce în ce mai popular. În mod normal, un PWA trebuie să fie servit prin HTTPS, deoarece lucrătorii de servicii înșiși nu pot lucra fără el; dar din moment ce lucrăm într-un mediu localhost, nu este necesar.

2. Faceți-l să funcționeze offline

În mod implicit, lucrătorii de service de la create-react-app ar trebui să fie preconfigurați pentru a gestiona stocarea în cache offline și încărcarea conținutului atunci când utilizatorul nu are nicio conexiune sau la vizitele ulterioare.

Un lucrător de servicii este, pur și simplu, un script JavaScript care rulează pe un fir separat de pagină și, din această cauză, nu are acces la structura DOM. Această abordare nouă dă naștere la funcții mai progresive, de îmbunătățire a performanței, deoarece lucrătorii din service nu numai că se ocupă acum de toate caracteristicile tipice ale unui PWA (capacități offline, notificări push etc.), dar joacă, de asemenea, un rol important în ameliorarea calculelor grele. site-ului dvs. într-un fir separat.

Pentru a instala lucrători de servicii pe PWA, veți dori să aruncați o privire la /src/index.js .

În index.js , căutați această linie

 serviceWorker.unregister()

Schimbați unregister() în register() și lucrătorii dvs. de service vor fi înregistrați automat când rulați my-pwa în modul producție . Nu este recomandat să activați lucrătorii de servicii în modul de dezvoltare, deoarece poate duce la cazuri în care PWA încarcă numai activele din cache și nu include cele mai recente modificări locale.

Pentru a rula my-pwa în modul producție:

 npm run build
npx serve build 

După aceasta, deschideți Chrome și accesați localhost:5000 , inspectați-l și acum veți vedea lucrătorii de service rulând corect în fila Aplicație .

Și în categoria Cache Storage este locul în care doriți să verificați dacă conținutul offline al site-ului dvs. este stocat în cache în mod corespunzător.

Note : Există o soluție pentru a vă înregistra lucrătorii de service în modul de non-producție. Acest lucru se realizează prin eliminarea liniei process.env.NODE_ENV === 'production' din src/serviceWorker.js .

Dacă doriți să explorați mai mult acest lucru și să vă creați proprii lucrători de service de la zero și să nu vă bazați pe configurațiile preconfigurate ale React, vă avem. În acest tutorial, vă arătăm cum să creați o aplicație web progresivă offline dintr-o aplicație web simplă.

3. Configurați adăugarea la ecranul de pornire

Dacă totul a fost făcut corect până acum, ar trebui să vedeți o pictogramă de instalare (+) când lansați versiunea de producție a my-pwa .

Deoarece totul se face automat pentru tine, probabil te întrebi cum au fost posibile toate acestea. Nu-ți face griji, de aceea suntem aici.

Pentru a pregăti PWA A2HS (Adăugați la ecranul de pornire), avem nevoie de un manifest.json . manifest.json care este livrat cu create-react-app este un fișier JSON de bază care determină modul în care pictogramele aplicației dvs. apar pentru utilizator și definește aspectul ecranului de introducere a acestuia. Pentru a le personaliza, modificați fișierul existent la /public/manifest.json .

 {
  "short_name": "Primul meu PWA",
  "name": "Creați un PWA simplu",
  „icoane”: [
    {
      "src": "favicon.ico",
      "dimensiuni": "64x64 32x32 24x24 16x16",
      "tip": "imagine/pictogramă x"
    },
    {
      "src": "logo192.png",
      "type": "imagine/png",
      "dimensiuni": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "imagine/png",
      "dimensiuni": "512x512"
    }
  ],
  "start_url": ".",
  "display": "autonom",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Majoritatea lucrurilor de aici se explică de la sine, dar dacă dorești să sapi mai mult în manifest.json și evenimentele care duc la o instalare PWA, am scris o bucată despre asta. Nu uitați să verificați.

Note : pentru ca manifest.json să funcționeze, va trebui să îl includeți în index.html . În mod implicit, create-react-app ar fi trebuit să fi făcut deja acest lucru pentru dvs.

 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Când aveți PWA înregistrat la lucrătorii de servicii și un manifest.json corespunzător, un beforeinstallpromt va fi declanșat odată ce utilizatorul lansează aplicația dvs., solicitându-i permisiunea de a instala PWA pe ecranul de pornire al utilizatorului.

Cu toate acestea, ar trebui să rețineți că zgâriem doar suprafața procesului A2HS (Adăugați la ecranul de pornire) și mai sunt încă multe de învățat. Cel mai bun mod, credem noi, prin care poți învăța orice este construirea lui de la zero, motiv pentru care am pregătit pentru tine un scurt ghid despre această caracteristică specifică a PWA. Ghidul vă va ghida prin câteva părți importante ale evenimentelor de instalare a unui PWA.

Ca alternativă, dacă vă simțiți leneși și nemotivați, suntem și aici pentru a vă ajuta. Generatorul nostru de manifeste este creat pentru a automatiza întregul proces pentru dvs.

4. Configurați notificări push

Browserele au parcurs un drum lung în sprijinul notificărilor push. De curând, Chrome a introdus chiar și declanșatoare de notificare pentru a permite afișarea notificărilor în modul avion. Acesta este un pas uriaș înainte pentru notificările push.

Și până acum, trebuie să vă întrebați unde este acea parte care folosește Firebase în acest tutorial. Ei bine, asta este. În această parte, veți afla despre procesul de integrare a notificărilor push într-o PWA utilizând Firebase, în special despre caracteristica Cloud Messaging din cadrul acesteia, care permite trimiterea de mesaje folosind solicitări HTTPS.

Dar, deoarece întregul proces este puțin cam lung și, de asemenea, pentru a vă ajuta să urmăriți mai bine întregul lucru, v-am pregătit propriul nostru tutorial de integrare a notificărilor push. Cu acest tutorial, nu ar trebui să aveți probleme când încercați să trimiteți notificări push fie unui simbol de utilizator, fie unui grup de utilizatori.

Concluzie

Și asta este tot pentru un PWA complet. Simțiți-vă liber să ne trimiteți orice întrebare dacă vă simțiți blocat în orice parte a tutorialului și vom face tot posibilul să vă răspundem!

Citeste mai mult:
Cum se integrează PWA în Magento 2