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

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

Pojďme se ponořit do základních funkcí a architektury každého z nich, abychom jim lépe porozuměli.

Co jsou jednostránkové aplikace?

SPA, jak zní, jsou webové stránky, které načítají obsah dynamicky na jedné stránce. V podstatě každá forma obsahu a prvku, kterou potřebujete k interakci s úseky na jedné stránce. To znamená, že při procházení takovým webem nemusíte načítat samostatné modely objektů dokumentu (DOM).

To znamená, že cílem je udržet uživatele na stejné stránce tím, že načtou vše, co potřebují k použití, a uvidí je najednou. To znamená lepší uživatelský komfort.

Uživatelské rozhraní naopak závisí na tom, jak svůj SPA navrhujete a uspořádáváte. Tím se snižuje důvod, proč byste chtěli rozdělit roztaženou stránku 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ředinstalovaný obsah v jednom DOM a nenavštěvujete různé DOMy, jak jste si mohli mylně myslet.

Rozdělení SPA do samostatných částí obsahu obvykle zahrnuje poskytnutí každé z nich adresu URL pomocí zobrazení JavaScriptu. The datové spojení spojnice spojuje tyto sekce s hlavním DOM a umožňuje vám asynchronní přístup k nim.

Ačkoli jiné technologie jako Máta a jilmové lázně přicházejí, JavaScript je stále nejběžnějším programovacím jazykem pro vytváření SPA.

Příbuzný: Rámečky JavaScriptu, které se vyplatí naučit

JavaScript používá asynchronní / čekat funkce, která umožňuje 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 rámce JavaScriptu jako ReactJS, Vue.js, AngularJS, Ember.js a Backbone.js všechny podporují rychlý rozvoj SPA. Chcete-li začít, můžete to projít přehled pro začátečníky Vue.js.

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

Co jsou progresivní webové aplikace?

PWA je webová aplikace nebo software, který ve své funkčnosti používá standardní a nově vznikající pokyny pro webový prohlížeč. PWA, na rozdíl od SPA, zakládají svou architekturu na nějaké sadě pokynů, díky nimž jsou škálovatelné, přizpůsobitelné pro uživatele, super rychlé, instalovatelné a podobné nativním.

Cílem PWA, představeného v roce 2015 společností Google, je vytvářet aplikace, které komunikují přímo a progresivně se svými uživateli. Jejím cílem je udržet uživatele plynoucí s aplikací, i když je špatné nebo neexistující síťové připojení.

PWA vždy poskytuje vše, co potřebujete, a to 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ůžete přistupovat za běhu prostřednictvím webového prohlížeče bez jakékoli instalace. To znamená, že jako každý jiný web, PWA musí mít také URL.

Příbuzný: Co jsou progresivní webové aplikace a jak si jednu instalujete?

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

Mezi příklady PWA patří mimo jiné aplikace jako Spotify, Slack a Uber.

PWA mají obecně 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. Zajistí, že vaše aplikace může načíst relatovatelná data v mezipaměti, když není k dispozici žádné síťové připojení. To je možné pomocí rozhraní 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 mezipaměť CPU?

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

2. Bezpečný kontext

Servisní pracovník potřebuje zabezpečené připojení (HTTPS) pro zachování důvěrnosti doručeného obsahu. Když odešlete požadavek, pracovník vytvoří zabezpečenou komunikaci mezi PWA a prohlížečem. Zabezpečený kontext proto 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 zahrnuje název vaší aplikace, její URL a její komponenty. 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 SPAs liší, stále sdílejí jen několik společných věcí. I když se jejich rychlost doručování může výrazně lišit, konvenční weby stále zaostávají v rychlosti a dostupnosti.

Oba mají 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ěží zjistíte, co je které. Nakonec v této poznámce oba potřebují adresu URL, než k nim budete mít přístup.

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

PWA a SPA mohou sdílet některé znatelné společné charakteristiky, ale jsou to dvě různé věci. Zde jsou klíčové rozdíly 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.
• I když se to nedoporučuje, můžete je obsluhovat přes nezabezpečenou síť (HTTP).
• Nevyžadují servisní pracovníky.
• SPA nemají soubor manifestu JSON, což znamená, že jsou odinstalovatelné.
• Musí být jednostránkové.
• Není k dispozici, když není k dispozici 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 služby PWA potřebují servisní pracovníky a musí zadávat požadavky prostřednictvím zabezpečené sítě (HTTPS).
• Odpovědi se ukládají do mezipaměti a doručují se prostřednictvím a slib objekt.
• Jsou přístupné i při absenci síťového připojení.
• Jsou rychlejší než SPA.
• Vždy mají soubor manifestu, takže jsou stahovatelné, instalovatelné a snadno přístupné.
• 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, došlo k pozitivnímu posunu směrem k jejich poskytování služeb.

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

Synchronní vs. Asynchronní programování: Jak se liší?

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

Přečtěte si další

O autorovi