Hvad er applikationer med én side og progressive webapps?

Enkeltsides applikationer (SPA'er) og Progressive webapps (PWA'er) revolutionerer internettet. De er begge nye teknologier, der ligner hinanden, men ikke er det. I ansigtet bruger folk dem ofte om hverandre.

Lad os grave i kernefunktionerne og arkitekturen i hver af dem for at forstå dem bedre.

Hvad er applikationer med en side?

SPA'er, som de lyder, er websteder, der indlæser indhold dynamisk inden for en enkelt side. I det væsentlige strækker hver form for indhold og element, du har brug for for at interagere med, på en side. Det betyder, at du ikke behøver at indlæse separate dokumentobjektmodeller (DOM'er), når du navigerer på et sådant websted.

Når det er sagt, er målet at holde brugerne på den samme side ved at indlæse alt, hvad de har brug for at bruge og se på én gang. Dette oversættes til en bedre brugeroplevelse.

Brugergrænsefladen afhænger derimod af, hvordan du designer og indretter din SPA. Dette koger ned til, hvorfor du måske vil opdele den strakte side i navigationer. Og det forhindrer ikke det i at være en enkelt side, da indholdet stadig kun indlæses en gang.

Så når du navigerer på en SPA, gennemser du forudindlæst indhold i en enkelt DOM og ikke besøger forskellige DOM'er, som du måske fejlagtigt har troet.

At opdele en SPA i separate indholdssektioner indebærer normalt at give hver af dem en URL ved hjælp af JavaScript-visninger. Det data link connector forbinder disse sektioner med den primære DOM og giver dig adgang til dem asynkront.

Selvom andre teknologier som Mint og alm-spa kommer, er JavaScript stadig det mest almindelige programmeringssprog til udformning af SPA'er.

Relaterede: JavaScript-rammer, der er værd at lære

JavaScript bruger en asynkroniser / afventer funktion, der lader dig indlæse både dynamisk og statisk indhold asynkront, uden at en input blokerer output fra en anden anmodning. Så SPA'er fungerer på et ikke-blokerende input / output-system (I / O).

Når det er sagt, understøtter JavaScript-rammer som ReactJS, Vue.js, AngularJS, Ember.js og Backbone.js alle den hurtige udvikling af SPA'er. For at komme i gang kan du gå igennem dette begynderoversigt over Vue.js.

Fordi det giver hastighed, har de fleste virksomhedsapps vedtaget ideen om at omdanne deres websteder til en enkelt side. Netflix, YouTube, PayPal, Facebook, Instagram, Twitter og Pinterest er alle eksempler på SPA'er.

Hvad er progressive webapps?

En PWA er en webapplikation eller -software, der bruger standard og nye webbrowserretningslinjer i sin funktionalitet. PWA'er, i modsætning til SPA'er, baserer deres arkitektur på nogle sæt retningslinjer, der gør dem skalerbare, brugertilpasningsdygtige, superhurtige, installerbare og native-lignende.

Introduceret i 2015 af Google er målet med en PWA at opbygge apps, der taler direkte og progressivt til sine brugere. Det sigter mod at holde brugerne flydende med appen, selv når der er en dårlig eller ikke-eksisterende netværksforbindelse.

En PWA leverer altid alt, hvad du har brug for på et øjeblik. Det går ikke gennem den typiske indledende indlæsningskarakteristik for en SPA.

Derfor interagerer en bruger derefter med appen som om den er hjemmehørende. Selvom en kerneegenskab ved PWA'er er installerbarhed, kan du stadig få adgang til dem i farten via din webbrowser uden nogen installation. Når det er sagt, skal ligesom ethvert andet websted en PWA også have en URL.

Relaterede: Hvad er progressive webapps, og hvordan installerer du en?

Progressive webapps er unikke, fordi de har baggrundshjælpere, der leverer indhold inden for et glimt af et øje. Så selv inden du går til webappen, er indhold og komponenter let tilgængelige for dig at bruge. Det gør dem superhurtige og mere pålidelige.

Apps som blandt andet Spotify, Slack og Uber er eksempler på PWA'er.

PWA'er har generelt en fælles arkitektonisk regel. For at en PWA skal fungere som den skal, skal den have følgende attributter:

1. En arbejder

Servicemedarbejdere leverer let indhold i PWA'er. De sikrer, at din app kan indlæse relaterede cachelagrede data, når der ikke er nogen netværksforbindelse. Dette er muligt ved hjælp af Cache API, der gemmer svar på dine offlineanmodninger. Således forstyrrer en arbejdstager navigationer og brugeranmodninger.

Relaterede: Hvordan fungerer CPU-cache?

Brug af en løfte objekt, kan en medarbejder levere allerede downloadet indhold i tilfælde af en eventuel anmodning fra en bruger (selv når de er offline). En servicearbejder tildeler imidlertid en ikke-blokerende ejendom til PWA'er.

2. En sikker kontekst

En servicearbejder har brug for en sikker forbindelse (HTTPS) for fortroligheden af ​​det leverede indhold. Når du sender en anmodning, opretter en arbejdstager sikker kommunikation mellem PWA og browseren. En sikker kontekst forhindrer derfor fortrolighedsbrud som et mand-i-midten-angreb (MITM) i PWA'er.

3. En webapplikationsmanifestfil

Et webmanifest er en JSON-fil, der definerer egenskaberne ved en PWA. Den beskriver forudsætningerne for at få adgang til, opdage og bruge indholdet af en PWA. Det inkluderer normalt navnet på din app, dens URL og dens komponenter. I sidste ende indeholder en manifestfil de oplysninger, der er nødvendige for at gøre din webapp til en applikation, der kan installeres.

Hvad er ligheden mellem PWA'er og SPA'er?

Mens baggrundslogikken for PWA'er og SPA'er er forskellige, deler de stadig kun et par ting til fælles. Selvom deres leveringshastighed kan variere markant, falder konventionelle websteder stadig bagefter med hensyn til hastighed og tilgængelighed.

De sigter begge mod at forbedre brugeroplevelsen ved at tilbyde en lydhør grænseflade.

Fordi de begge leverer en appoplevelse, er det let at blande dem sammen, og du kan næppe fortælle, hvad der er, når du interagerer med dem. Endelig, på denne note, har begge brug for en URL, før du kan få adgang til dem.

De vigtigste forskelle mellem SPA'er og PWA'er

PWA'er og SPA'er deler muligvis nogle mærkbare egenskaber til fælles, men de er to forskellige ting. Her er de nøglefunktionsforskelle, du skal bemærke:

Nøglefunktioner i applikationer med en side

• De er kun tilgængelige via browseren.
• Selvom det ikke anbefales, kan du betjene dem over et usikkert netværk (HTTP).
• De kræver ikke servicearbejdere.
• SPA'er har ikke en JSON-manifestfil, hvilket betyder, at de kan afinstalleres.
• De skal være på én side.
• Ikke tilgængelig, når der ikke er noget netværk.

Nøglefunktioner i Progressive Web Apps

• Adgang til dem via browseren er en mulighed, da de kan installeres.
• Alle PWA'er har brug for servicearbejdere, og de skal fremsætte anmodninger via et sikkert netværk (HTTPS).
• Svar cachelagres og leveres via en løfte objekt.
• De er tilgængelige selv i mangel af en netværksforbindelse.
• De er hurtigere end SPA'er.
• De har altid en manifestfil, så de kan downloades, installeres og let tilgængelige.
• En PWA er muligvis ikke en applikation med en enkelt side.

SPA'er og PWA'er påvirker levering af websteder

Da mange virksomhedswebsteder nu anvender disse nye teknologier, er der nu et positivt skift i retning af deres servicelevering.

Endnu vigtigere forbedrer vedtagelsen af ​​PWA'er den generelle brugeroplevelse, hvilket følgelig reducerer afvisningsprocenten og øger indtægterne for de fleste virksomhedsapps. SPA'er har derimod også forynget sociale medier, hvilket gør det let for folk at interagere over internettet uden træg sideindlæsning.

Synkron vs. Asynkron programmering: Hvordan er de forskellige?

Skal du bruge synkron eller asynkron programmering til dit næste projekt? Find ud af her.

Læs Næste

Om forfatteren