Vil du oprette progressive webapps baseret på WordPress og WooCommerce? Her er hvordan (w / kodeeksempler)

Som du sandsynligvis allerede kan fortælle, er dette indlæg lidt om "fremskreden" side, men det tackle et emne, der er meget interessant og præsenterer en ny gren for os at følge på hele denne mobile-første sti til vores websteder og / eller apps.


Det, vi kalder "lydhør webdesign" har været med os et stykke tid, og på dette tidspunkt i spillet har de fleste udviklere / websteder / web-værktøjer allerede integreret principperne for det fuldt ud. Men er det slutspil af "mobilvenlige"? Eller måske er det bare begyndelsen.

Nå, Google mener, at det er sidstnævnte. Og der kommer progressive webapps!

Det indlæg, du skal læse, er en anden udgave af vores "inde i dev-huset" initiativ (her er det forrige). Det blev sammensat af Alexandra Anghel fra Appticles.com.

Indtast Alexandra:

Progressive web-apps på WordPress og WooCommerce

Forståelse af progressive webapps

Progressive Web Apps (PWA) er oplevelser, der kombinerer det bedste på nettet og det bedste af apps. Native app store apps er blevet enormt populære i fortiden gennem funktioner som push-meddelelser, arbejder offline, glatte animationer og overgange, indlæser på hjemmeskærmen og så videre.

Mobile Web Apps er JavaScript-applikationer, der fungerede i browseren og forsøgte at bringe nogle af de oprindelige apps-funktioner til internettet, men kunne ikke give push-meddelelser for eksempel. Med den mobile introduktion af nye Web API’er lukker Progressive Web Apps nu kløften og giver den fulde applignende oplevelse på mobilenettet.

Google beskriver dem som værende:

  • Pålidelig – Indlæs øjeblikkeligt
  • Hurtig – Svar hurtigt på brugerinteraktioner
  • spændende – Opfører sig som en indbygget app

For at ramme alle disse punkter skal en progressiv webapp have følgende muligheder:

  • Arbejde offline eller under dårlige netværksforhold
  • Webappinstallation af bannere eller føj til hjemmeskærmen
  • Brug Web Push-underretninger. Med introduktionen af ​​Web Push API kan vi nu sende Push Notifikationer til vores brugere, selv når browseren er lukket.
  • Implementere HTTPS
  • Brug en applikations shell (eller app shell) -arkitektur, der øjeblikkeligt indlæses på brugernes skærme, svarende til originale applikationer.

I det væsentlige er en PWA en enkelt-side-applikation skrevet i JavaScript. Offline-tilstand, Føj til hjemmeskærm og Web Push-underretninger implementeres alle ved hjælp af servicemedarbejdere.

Progressive Web Apps vs. Responsive Web Design

Progressive Web Apps bør ikke forveksles med Responsiv Web Design. Progressive Web Apps har lydhøre egenskaber, fordi de kan tilpasse sig forskellige skærmstørrelser, men deres unikke værdiproposition er de funktioner, der gør dem applignende.

I de sidste år har RWD været go-to-løsningen til mobile webløsninger, men en Forrester rapport fra sidste år identificerede, at RWD har nået mætning – 87% af producenterne af digitale oplevelser omfavner det – og at et skift i kundens forventninger til at foretrække applignende oplevelser på nettet finder sted foran vores øjne.

Er PWA’er løsningen til at engagere mobile webbrugere?

At opbygge en progressiv webapp af høj kvalitet har utrolige fordele, hvilket gør det nemt at glæde brugere, øge engagement og øge konverteringer. Der er adskillige eksempler på virksomheder, især fra e-handelsbranchen, der med succes har brugt Progressive Web Apps til at forbedre deres måling, mange af dem er angivet på Googles websted for udviklere.

  • For eksempel byggede Alibaba.com en PWA, der førte til en hurtig, effektiv og pålidelig mobil weboplevelse. Den nye strategi leverede en stigning på 76% i alt konverteringer på tværs af browsere og en fire gange højere interaktionshastighed fra Tilføj til hjemmeskærm.
  • I en anden brugssag ønskede OLX at engagere mobile webbrugere ved at bruge Tilføj til hjemmeskærm og push-meddelelser. De øget engagement med 250% og forbedrede andre metrics også: tiden, indtil siden blev interaktiv, faldt med 23%, med et tilsvarende 80% fald i afvisningsprocenten. Pengeindtægter forbedrede sig også, da klikfrekvens (CTR) steg 146%.

Hvordan ved vi, at en mobil webapp er progressiv?

For det første er det at score være en score, ikke et Ja eller Nej, og der kaldes et Chrome-plugin Fyrtårn som du kan bruge til at måle denne score. Denne plugin er virkelig nem at bruge og genererer en rapport med alle PWA-kapaciteter, grundlæggende lader det os vide, hvad vi har brug for at ændre, for at en webapp kan blive fuldt progressiv. For vores alfa-version af WooCommerce PWA lykkedes det os at få en 91 score på Lighthouse.

Fyrtårn

Hvordan kan vi opbygge en PWA?

Googles PWA-standard viser ikke nogen særlig teknologi eller rammer til oprettelse af progressive webapps. Det kan være alt, så længe tjeklisten følges. Mange PWA’er er bygget ved hjælp af Vinkel JS eller Reagere, som er de mest populære JavaScript-rammer i øjeblikket.

reagere

Både AngularJS og React har deres fordele:

  • Vinklen / Ionic kombination er temmelig populær i dag. Ionic er en stor ramme, der oprindeligt blev bygget til mobile apps, men har udvidet til Progressive Web Apps og endda desktop-applikationer.
  • Reaktion er virkelig intuitiv og let at forstå. Det drager fordel af en fantastisk kedelplade, create-react-app, som leveres med PWA support som standard.

Udover disse to, VueJS er også stigende i popularitet.

Dernæst vil vi se nogle kodeeksempler fra en e-handelsapplikation bygget med React oven på WordPress og WooCommerce REST API.

Du kan også være interesseret i disse artikler:

  • Bedste kantede admin-instrumentbordskabeloner

Forståelse af WooCommerce REST API

Når det kommer til at opbygge en e-handelsapplikation, er den første ting, vi har brug for, en API, hvor vi kan hente dataene. Heldigvis har inkluderingen af ​​REST API i kernen åbnet døren til at bruge WordPress som en backend. Derudover kan vi til e-handelsapps bruge REST API fra populært WooCommerce-plugin.

WooCommerce har også en NPM-pakke (WooCommerce API) til at foretage API-opkald, men desværre kræver denne pakke både forbrugernøglen og forbrugerhemmeligheden for at autentificere anmodninger. Vi ville have et sikkerhedsproblem, hvis vi brugte forbrugerhemmeligheden i en frontend-app.

Når du opretter nøgler fra administrationssektionen WooCommerce, er det ikke muligt at specificere tilladelser på ruteniveau, for eksempel at give visningsadgang for produkter og skriveadgang til ordrer.

Så vi var nødt til at oprette en proxy i vores WordPress-plugin, der giver adgang til et begrænset sæt API-endpoints. Som base brugte vi WooCommerce REST API PHP-indpakning, som du kan se i nedenstående eksempel:

Se koden til Resumé.

Vi initialiserer først WooCommerce-klienten ved hjælp af forbrugernøglen og hemmeligheden. Den anden og tredje metode er at oprette en brugerdefineret rute, der kaldes produkter, og kortlægger den, der ruter til endepunktet for produkter / kategorier fra WooCommerce API.

På denne måde kan vi give adgang til at læse kategorier og produkter, men kun tillade oprettelsesoperationen for en ordre.

Oprettelse af en ny React-app i fire enkle trin

Når vi har konfigureret API’en, kan vi begynde at arbejde på vores React-applikation. Efter installation NodeJS og NPM globalt kan du bruge create-react-app-pakken til hurtigt at generere en React JS-app, der som standard har PWA-support.

  1. Installere NodeJS og NPM globalt
  2. Installere skabe-reagerer-app standardtekst
    npm installere create-react-app -g
  3. Frembringe ny React-applikation
    Opret-reager-app min-app
  4. Start ansøgning
    cd min-app & npm start

Nedenfor er et skærmbillede af applikationen, der er genereret af create-react-app, den har alt, hvad vi har brug for, så vi kan starte kodning, inklusive live reload:

prøve reagerer app

Der er et par ting, du skal huske på, når du starter en ny app:

1) Organisering af appfiler
Der er flere gode tutorials derude om, hvordan man bedst strukturerer appen. Jeg foretrækker mapper efter funktion, fordi det giver bedre skalerbarhed. Du kan finde en rigtig god forklaring her.
2) Linters og kodningsstandarder
Kodningsstandarder kan være irriterende, hvis du ikke er vant til dem, men spring ikke over dette trin. De hjælper med at rydde op i ubrugte afhængigheder og sørger for, at data valideres korrekt på komponentniveau. Hvis du desuden installerer et smukkere editor-plugin, der automatisk formaterer din kode, bliver brugen af ​​kodningsstandarder en leg. Med hensyn til selve standarden foretrækker jeg den populære oprettet af Airbnb.
3) Små komponenter
At holde komponenter filer små gør dem lettere at teste og administrere. Du kan begynde at skrive kode i en enkelt komponent, og når den først er blevet større, kan du opdele den i mindre komponent. For UI / UX-komponenter er der flere biblioteker, der er kompatible med React, f.eks Materiale UI, Semantisk UI eller endda bootstrap, bare for at give et par eksempler.

Disse biblioteker indeholder et sæt færdige komponenter, f.eks. Gitre, menuer, kort, knapper og så videre. Her er et eksempel på en e-handelsapplikationsgrænseflade bygget med grundlæggende semantiske UI-elementer:

Du kan se en liste over kategorier, en liste over produkter og en sidemenu. Lad os dykke ned i koden – du kan se, hvor let det er at bruge React til at oprette et sådant eksempel.

eksempel e-handel app

Dykning i ReactJS

Nedenfor er en React-komponent, der læser et sæt produktkategorier fra API’en. Komponentens tilstand initialiseres med en tom liste over kategorier. I componentWillMount-metoden, der automatisk kaldes af React før render, fremsætter vi en anmodning om at hente kategorierne, og vi tilføjer dem til staten efter at have modtaget svaret:

Se koden til Resumé.

Som du kan se, behøver vi ikke at kalde gengivelsesmetoden, når kategorierne modtages, React tager sig af det for os og gengiver komponenten igen. Render-metoden returnerer bare en anden brugerdefineret komponent, der kaldes CategoryList, der modtager kategoridataene og ser sådan ud:

Se koden til Resumé.

Ovenstående komponent itererer over listen over kategorier, den modtager som en prop, og kalder en anden brugerdefineret komponent kaldet CategoryCard for at gengive et enkelt kategorielement.

Alle disse komponenter kommunikerer ved at sende rekvisitter mellem dem. Hovedkategorikomponenten kalder API’en og videregiver en liste over kategorier til kategorilisten, som igen videregiver en kategoris detaljer til kategorikortene.

Håndtering af den globale appstat ved hjælp af Redux

Problemet med ovenstående tilgang er, at vi nogle gange har data, der skal administreres på det øverste applikationsniveau, for eksempel en liste over produkter, der blev føjet til indkøbskurven. Antallet af produkter vises i indkøbskurvikonet fra overskriftslinjen, men disse vises også som en liste på kassen siden.

Hvis vi tilføjer alle disse data i den overordnede applikationskomponent, vil det blive meget vanskeligt at administrere på større applikationer. Det er her biblioteker som f.eks ReduxJs kom ind. Bare for at afklare, Redux kan bruges i kombination med alle JavaScript-rammer, det er ikke specifikt for React.

Brug af Redux betyder ikke, at vi ikke kan bruge tilstand eller rekvisitter på komponentniveau. Redux bør kun bruges til at opbevare data, der giver mening på applikationsniveau.

Lad os se, hvordan vi kan læse produkter fra API’en og gengive dem på en liste, der ligner det, vi har brug for i kategorier, men denne gang ved hjælp af Redux. Først skal vi oprette forbindelsen med Redux ved at indpakke vores vigtigste app-komponent i en global butik:

Se koden til Resumé.

I dette eksempel vil den globale app store indeholde en liste over kategorier og en liste over produkter, som flettes sammen ved hjælp af combineReducers-metoden fra Redux.

Derefter fortsætter vi med at definere Redux-handlinger, som er meget enkle funktioner, der returnerer objekter, der skal indeholde en type egenskab. Da JS er asynkron, har vi brug for to handlinger: den ene til signalering, når der sendes en anmodning, og den anden til signalering, når der modtages et svar. Hele appen ved, hvornår disse handlinger finder sted.

Nedenfor har vi også tilføjet en funktion kaldet fetchProducts. Som du kan se, er denne funktion:

  • sender anmodningen om produkthandlingen,
  • kalder API til hentning af produkter,
  • afsender handlingen modtage produkter, når et resultat modtages.

Se koden til Resumé.

For at ændre apptilstanden tilføjer vi en såkaldt Redux "reducering". Reduceringsenheden er bare en funktion, der lytter til bestemte handlinger og ændrer en del af den globale tilstand, i dette tilfælde listen over produkter.

Denne reducer gør ikke noget, når du modtager en anmodning om produkter, den returnerer altid den aktuelle tilstand. For handlingen modtagende produkter returnerer reduktionsdata de data, der sendes til det, i dette tilfælde vil det være en liste over produkter.

Se koden til Resumé.

For at pakke tingene op bruger vi disse handlinger og reducer i en ny produktkomponent.

Se koden til Resumé.

Denne komponent er pakket ind i forbindelsesmetoden fra Redux og sender bare fetchProducts i sin componentWillMount-metode. Komponenten inkluderer også en produktliste, men som du kan se, vises produktlistekomponenten ikke direkte produktdataene. Det skyldes, at produktlistekomponenten er direkte knyttet til den globale app-tilstand, også ved hjælp af Redux.

På denne måde kan den få adgang til produktdataene direkte fra app store, iterere over listen over produkter og bruge en ProductCard-komponent til at gengive et enkelt produktelement.

Se koden til Resumé.

Indtil videre har vi set nogle eksempler på, hvordan man viser data, men hvad nu hvis vi ville tilføje brugerinteraktion, for eksempel at tilføje et produkt til indkøbskurven?

I dette tilfælde, når brugeren klikker på "Tilføj til kurv" -knap, sender vi en handling, der ændrer den globale app-tilstand. Hovedlinjen, der viser antallet af indkøbsprodukter, forbindes med Redux. Det tæller antallet af produkter, der er gemt i programmets indkøbskurv og opdaterer sig selv i overensstemmelse hermed.

tilføj til indkøbseksempel

Link af appen med WordPress

Dette er alle grundlæggende eksempler for at komme i gang, og du undrer dig sandsynligvis over, hvordan vi nøjagtigt kan forbinde denne app med WordPress.

Nå, vi kan være vært for appen på et underdomæne og lade den oprette forbindelse til API, eller vi kan bruge den som et WordPress-tema – hvilket betyder at skabe et meget grundlæggende tema med en index.php-fil, der bare indlæser en JavaScript / CSS-fil. Kedelpladen Create-react-app indeholder kommandoer til oprettelse af applikationens build, så vi kan få produktionsfilerne øjeblikkeligt.

Se koden til Resumé.

Hvor skal man bruge servicemedarbejdere

I offline-tilstand kan vi tilføje en servicemedarbejder, der viser app-shell, selv når brugere er offline. Servicemedarbejderen er bare en JavaScript-fil, der registrerer sig selv i browseren.

Se koden til Resumé.

Der er flere strategier, som du kan bruge til offline-tilstand, såsom netværk først eller cache først, og du kan læse om disse i Googles offline kogebog.

Cache af applikationens shell har fordele, selv når vi har en netværksforbindelse, fordi appen indlæses meget hurtigere.

Hvis du vil gå endnu længere og begynde at cache de data, der kommer fra API, kan du bruge NPM-pakker som redux-persist og ændre din app for at gemme / hente data fra browserens lokale lager.

For meddelelser om web-push anbefaler vi at tage et kig på Ét signal gratis WordPress-plugin. Dette plugin fungerer også med lydhøre temaer, så du bør bestemt tjekke det ud med det samme.

Hvad er det næste?

Du kan Find demo til ovenstående WooCommerce PWA her.

Vi arbejder allerede med betaversionen, og her er bare en del af vores køreplan:

  • Tilføj offline-funktion
  • Tilføj push-meddelelser
  • Afslut kassen

Hvis du vil bidrage eller tilpasse den til dine egne behov, kan du finde alfa-versionen af ​​den e-handels progressive webapplikation på GitHub.

PWA-demo

Hvad synes du om Progressive Web Apps og den rolle, de kan have i det mobile WordPress-landskab? Overvejer du at følge denne sti med dit næste projekt?

Glem ikke at deltage i vores nedbrudskursus om at fremskynde dit WordPress-sted. Med nogle enkle rettelser kan du reducere din indlæsningstid med endda 50-80%:

Layout og præsentation af Karol K.

Om forfatteren: Alexandra Anghel er medstifter og CTO hos Appticles.com – en platform til opbygning af progressive webapps. Som en udvidelse af platformen har Appticles et WordPress-plugin (WordPress Mobile Pack) der har overgået 1M-downloads. Alexandra er en fuld stakudvikler. Hun deltog i to forretningsacceleratorer – Startupbootcamp (København / Danmark) og Prosper Women Accelerator (Saint Louis / US). I begyndelsen af ​​2017 har hun tiltrådt Codette som medstifter.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map