Co jsou jednostránkové aplikace a progresivní webové aplikace?

Co jsou jednostránkové aplikace a progresivní webové aplikace?

Jednostránkové aplikace (SPA) a progresivní webové aplikace (PWA) způsobují na webu revoluci. Oba jsou to nové technologie, které vypadají podobně, ale nejsou. Tváří v tvář je lidé často používají zaměnitelně.





Pojďme se podívat na základní funkce a architekturu každého z nich, abychom jim lépe porozuměli.



Co jsou jednostránkové aplikace?

SPA, jak znějí, jsou webové stránky, které načítají obsah dynamicky v rámci jedné stránky. V podstatě každá forma obsahu a prvku, který potřebujete k interakci, se táhne na jedné stránce. To znamená, že při navigaci na takovém webu nemusíte načítat samostatné modely objektů dokumentu (DOM).





To znamená, že cílem je udržet uživatele na stejné stránce načtením všeho, co potřebují použít a vidět najednou. To znamená lepší uživatelské prostředí.

Uživatelské rozhraní na druhé straně závisí na tom, jak svůj SPA navrhnete a uspořádáte. Tím se scvrkává na to, proč budete chtít roztaženou stránku rozdělit na navigace. A to nezabrání tomu, aby to byla jedna stránka, protože obsah se stále načítá pouze jednou.



Když tedy procházíte SPA, procházíte předem načtený obsah v jednom DOM a nenavštěvujete různé DOMy, jak jste si možná mylně mysleli.

Rozdělení SPA na samostatné obsahové sekce obvykle zahrnuje poskytnutí každé z nich URL pomocí zobrazení JavaScriptu. The datové spojení konektor spojuje tyto sekce s hlavním DOM a umožňuje vám k nim přistupovat asynchronně.



Ačkoli jiné technologie jako Tak jako a jilm-lázně se blíží, JavaScript je stále nejběžnějším programovacím jazykem pro tvorbu SPA.

Související: Rámce JavaScriptu, které se vyplatí naučit



JavaScript používá příponu asynchronní/čekejte funkce, která vám umožní asynchronně načíst dynamický i statický obsah, aniž by jeden vstup blokoval výstup jiného požadavku. SPA tedy fungují na neblokujícím systému vstupů a výstupů (I/O).

To znamená, že JavaScriptové rámce jako ReactJS, Vue.js, AngularJS, Ember.js a Backbone.js všechny podporují rychlý vývoj SPA. Chcete -li začít, můžete si projít tento úvodní přehled Vue.js.

Protože to poskytuje rychlost, většina podnikových aplikací přijala myšlenku transformace svých webových stránek na jedinou stránku. Netflix, YouTube, PayPal, Facebook, Instagram, Twitter a Pinterest jsou příklady SPA.

Co jsou to progresivní webové aplikace?

PWA je webová aplikace nebo software, který ve své funkčnosti využívá standardní a nově vznikající směrnice pro webový prohlížeč. PWA, na rozdíl od SPA, staví svou architekturu na určité sadě pokynů, díky nimž jsou škálovatelné, uživatelsky přizpůsobitelné, super rychlé, instalovatelné a nativní.

Cílem PWA, které v roce 2015 představila společnost Google, je vytvářet aplikace, které přímo a postupně hovoří se svými uživateli. Jeho cílem je zajistit uživatelům plynulý tok aplikací, a to i v případě špatného nebo neexistujícího síťového připojení.

PWA vždy přináší vše, co potřebujete, okamžitě. Neprochází typickou počáteční charakteristikou načítání obsahu SPA.

V důsledku toho uživatel poté interaguje s aplikací, jako by byla nativní. Ačkoli základní charakteristikou PWA je instalovatelnost, stále k nim máte přístup za běhu prostřednictvím webového prohlížeče bez jakékoli instalace. To znamená, že jako každý jiný web musí mít PWA také URL.

Příbuzný: Co jsou to progresivní webové aplikace a jak si je nainstalujete?

Progresivní webové aplikace jsou jedinečné v tom, že mají pomocníky na pozadí, které dodávají obsah během mrknutí oka. Takže ještě předtím, než se dostanete k webové aplikaci, obsah a komponenty jsou pro vás připraveny k použití. Díky tomu jsou superrychlí a spolehlivější.

Příkladem PWA jsou mimo jiné aplikace jako Spotify, Slack a Uber.

PWA obecně mají společné architektonické pravidlo. Aby PWA fungovala tak, jak má, musí mít následující atributy:

1. Pracovník

Servisní pracovníci dodávají obsah snadno v PWA. Zajišťují, že vaše aplikace může načíst relatable data uložená v mezipaměti, pokud není k dispozici žádné síťové připojení. To je možné pomocí Cache API, které ukládá odpovědi na vaše offline požadavky. Pracovník tedy zasahuje do navigací a požadavků uživatelů.

Příbuzný: Jak funguje CPU Cache?

Používat slib objekt, pracovník může dodat již stažený obsah v případě případného požadavku uživatele (i když jsou offline). Servisní pracovník však PWA uděluje neblokující vlastnost.

2. Bezpečný kontext

Servisní pracovník potřebuje zabezpečené připojení (HTTPS) pro důvěrnost dodaného obsahu. Když odešlete požadavek, pracovník vytvoří zabezpečenou komunikaci mezi PWA a prohlížečem. Zabezpečený kontext tedy brání narušení důvěrnosti jako útok typu man-in-the-middle (MITM) v PWA.

3. Soubor manifestu webové aplikace

Webový manifest je soubor JSON, který definuje vlastnosti PWA. Podrobně popisuje předpoklady pro přístup, objevování a používání obsahu PWA. Obvykle obsahuje název vaší aplikace, její adresu URL a její součásti. Soubor manifestu nakonec obsahuje informace nezbytné k tomu, aby se vaše webová aplikace stala instalovatelnou aplikací.

Jaké jsou podobnosti mezi PWA a SPA?

I když se logika pozadí PWA a SPA liší, stále sdílejí jen několik společných věcí. Přestože se jejich rychlost doručení může výrazně lišit, konvenční webové stránky v rychlosti a přístupnosti stále zaostávají.

Oba si kladou za cíl zlepšit uživatelské prostředí poskytnutím responzivního rozhraní.

Protože oba přinášejí zážitek z aplikace, je snadné je zamíchat a při interakci s nimi jen stěží poznáte, která je která. Nakonec, v této poznámce, oba potřebují URL, než k nim budete mít přístup.

Klíčové rozdíly mezi SPA a PWA

PWA a SPA mohou mít společné některé nápadné vlastnosti, ale jsou to dvě různé věci. Zde jsou rozdíly klíčových funkcí, které byste si měli uvědomit:

Klíčové vlastnosti jednostránkových aplikací

  • Jsou přístupné pouze prostřednictvím prohlížeče.
  • Přestože se to nedoporučuje, můžete je obsluhovat prostřednictvím nezabezpečené sítě (HTTP).
  • Nevyžadují servisní pracovníky.
  • SPA nemají soubor manifestu JSON, což znamená, že je nelze odinstalovat.
  • Musí být jednostránkové.
  • Není přístupné, když není žádná síť.

Klíčové vlastnosti progresivních webových aplikací

  • Přístup k nim prostřednictvím prohlížeče je možnost, protože jsou instalovatelné.
  • Všechny PWA potřebují servisní pracovníky a musí podávat žádosti prostřednictvím zabezpečené sítě (HTTPS).
  • Odpovědi jsou ukládány do mezipaměti a doručovány prostřednictvím a slib objekt.
  • Jsou přístupné i bez připojení k síti.
  • Jsou rychlejší než SPA.
  • Vždy mají soubor manifestu, takže jsou stahovatelné, instalovatelné a snadno dostupné.
  • PWA nemusí být jednostránková aplikace.

SPA a PWA ovlivňují doručování webových stránek

Vzhledem k tomu, že mnoho podnikových webů nyní přijímá tyto nové technologie, nyní dochází k pozitivnímu posunu směrem k poskytování služeb.

Ještě důležitější je, že přijetí PWA zlepšuje celkovou uživatelskou zkušenost, což následně snižuje míru okamžitého opuštění a zvyšuje příjmy pro většinu podnikových aplikací. SPA na druhé straně také omladily sociální média, což lidem usnadnilo interakci přes web bez pomalého načítání stránek.

odstraňte soubory z onedrive, ale ne z počítače
Podíl Podíl tweet E-mailem Synchronní vs. asynchronní programování: Jak se liší?

Měli byste pro další projekt používat synchronní nebo asynchronní programování? Zjistěte zde.

Číst dále Související témata
  • Programování
  • Programování
  • Vývoj aplikací
O autorovi Idisou Omisola(94 publikovaných článků)

Idowu je zapálený pro cokoli chytrého a produktivního. Ve svém volném čase si hraje s kódováním a když se nudí, přepne na šachovnici, ale také se rád jednou za čas odpoutá od rutiny. Jeho vášeň ukazovat lidem cestu kolem moderních technologií ho motivuje psát více.

Více od Idowu Omisola

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru