Single-page aplikace
Protože SPA je vývoj daleko od bez státní příslušnosti stránka-překreslení modelu, které prohlížeče byly původně navrženy pro některé se objevily nové výzvy. Možná řešení (s různou složitostí, komplexností a řízením autora) zahrnují:
- knihovny JavaScriptu na straně klienta.
- webové rámce na straně serveru, které se specializují na model SPA.
- vývoj prohlížečů a specifikace HTML5, určené pro model SPA.,
Hledat-motor optimizationEdit
Kvůli nedostatku provádění Javascriptu na pásech některé populární Webové vyhledávače, SEO (Search engine optimization) má historicky znamenalo problém pro veřejný čelí webové stránky, které chtějí přijmout SPA model.
Mezi roky 2009 a 2015, Google Webmaster Central navrhla a pak se doporučuje „AJAX crawling režimu“ pomocí počáteční vykřičník v fragment identifikátory pro stavové AJAX stránky (#!)., Zvláštní chování musí být realizován v místě SPA umožnit extrakci relevantních metadat pomocí prohledávače vyhledávače. U vyhledávačů, které nepodporují toto schéma hash URL, zůstávají hash adresy URL lázní neviditelné. Tyto „hash-bang“ Uri byly považovány za problematické řada spisovatelů včetně Jeni Tennison na W3C, protože oni dělají stránky nepřístupné pro ty, kteří nemají aktivován JavaScript ve svém prohlížeči. Rozbijí také záhlaví HTTP referer, protože prohlížeče nesmějí odesílat identifikátor fragmentu v záhlaví refereru., V roce 2015 Google odmítl jejich návrh na procházení hash-bang AJAX.
aplikace mohou alternativně vykreslit první načtení stránky na serveru a následné aktualizace stránky na klientovi. To je tradičně obtížné, protože renderovací kód by mohl být napsán v jiném jazyce nebo rámci na serveru a v klientovi. Pomocí logiky-méně šablony, cross-kompilaci z jednoho jazyka do druhého, nebo pomocí stejného jazyka na serveru a klient může pomoci zvýšit množství kódu, které mohou být sdíleny.,
v roce 2018 Google představil dynamické Vykreslování jako další možnost pro weby, které chtějí nabídnout prohledávačům těžkou verzi stránky bez JavaScriptu pro účely indexování. Dynamické Vykreslování přepíná mezi verzí stránky, která je vykreslena na straně klienta, a předem vykreslenou verzí pro konkrétní uživatelské agenty. Tento přístup zahrnuje váš webový server detekující prohledávače (prostřednictvím uživatelského agenta) a směrování je do vykreslovače, ze kterého se pak podává jednodušší verze obsahu HTML.,
protože kompatibilita SEO není v lázních triviální, stojí za zmínku, že lázně se běžně nepoužívají v kontextu, kdy indexování vyhledávačů je buď požadavkem, nebo žádoucí. Případy použití zahrnují aplikace, které poskytují soukromá data skrytá za autentizačním systémem. V případech, kde tyto aplikace jsou spotřební výrobky, často klasický stránka „překreslení“ model se používá pro aplikace, vstupní stránky a marketing webu, který poskytuje dostatek dat meta pro aplikace se objeví jako zásah do vyhledávače dotaz., Blogy, fóra podpory, a další tradiční stránka překreslit artefakty často sedí kolem lázní, které mohou osivo vyhledávače s příslušnými termíny.
Další přístup server-centric webových rámců, jako je Java-založené ItsNat je poskytnout jakékoliv hypertext na server s použitím stejného jazyka a templating technologie. V tomto přístupu, server ví, s přesností DOM stát na straně klienta, žádné velké nebo malé aktualizace stránky je nutné je generován na serveru, a přepravované Ajax, přesný kód JavaScript, aby klient stránku nového státu vykonávajícího DOM metod., Vývojáři se mohou rozhodnout, které stavy stránek musí být prohledávány webovými pavouky pro SEO a být schopni generovat požadovaný stav v době načítání generující prostý HTML místo JavaScriptu. V případě ItsNat rámec, je to automatické, protože ItsNat udržuje klienta DOM stromu v serveru jako Java W3C DOM stromu; vykreslování tohoto stromu DOM na serveru vygeneruje běžný HTML při načítání a JavaScript DOM akcí pro Ajax., Tato dualita je velmi důležité pro SEO, protože vývojáři mohou stavět se stejný kód v jazyce Java a čisté HTML na bázi šablon požadované DOM státu, na server, na stránce době zatížení, konvenční HTML je generován ItsNat dělat toto DOME státu SEO-kompatibilní.
od verze 1.,3, ItsNat poskytuje nové bez státní příslušnosti režimu, a klient DOM není uchovávány na serveru, protože, s bez státní příslušnosti režimu klient, DOM stát je částečně nebo plně rekonstruován na serveru při zpracování každém Ajaxovém požadavku na základě požadované údaje odeslané klientem informování serveru o aktuálním DOM státu, osoby bez státní příslušnosti režim může být také SEO-kompatibilní, protože SEO kompatibilita se děje při načítání úvodní stránky ovlivněna stavové nebo bez státní příslušnosti režimy., Další možnou volbou je rámců, jako PreRender, Loutkář, Rendertron, které lze snadno integrovat do libovolné webové stránky jako middleware s web server konfigurace umožňující bot žádosti (google bot a další) musí být doručena do middleware, zatímco non-bot žádosti jsou podávány jako obvykle. Tyto rámce pravidelně ukládají příslušné webové stránky do mezipaměti, aby vyhledávače mohly mít k dispozici nejnovější verze. Tyto rámce byly oficiálně schváleny společností google.
existuje několik řešení, aby to vypadalo, jako by web byl prohledávatelný., Oba zahrnují vytvoření samostatných HTML stránek, které odrážejí obsah lázní. Server by mohl vytvořit HTML verzi webu a dodat, že pro prohledávače, nebo je možné použít bezhlavý prohlížeč, jako je PhantomJS spustit aplikaci JavaScript a výstup výsledný HTML.
oba tyto vyžadují poměrně málo úsilí a mohou skončit s udržovací bolestí hlavy pro velké složité stránky. Existují také potenciální SEO úskalí. Pokud je HTML generované serverem považováno za příliš odlišné od obsahu SPA, bude stránka penalizována., Běží PhantomJS výstup HTML může zpomalit rychlost odezvy stránek, což je něco, pro které vyhledávače – Google a to zejména – downgrade žebříčku.
Klient/server kód partitioningEdit
Jeden způsob, jak zvýšit množství kódu, které mohou být sdíleny mezi servery a klienty, je použít logiku-méně jazyk šablony jako Knír nebo Řídítka. Takové šablony mohou být vykresleny z různých hostitelských jazyků, jako je Ruby na serveru a JavaScript v klientovi., Pouhé sdílení šablon však obvykle vyžaduje duplikaci obchodní logiky, která se používá k výběru správných šablon a jejich naplnění daty. Vykreslování ze šablon může mít negativní účinky na výkon, pokud aktualizujete pouze malou část stránky-například hodnotu textového vstupu ve Velké šabloně. Nahrazení celé šablony může také narušit výběr uživatele nebo pozici kurzoru, kde aktualizace pouze změněné hodnoty nemusí., Aby se předešlo těmto problémům, aplikace mohou používat datové vazby UI nebo granulované manipulace Dom pouze aktualizovat příslušné části stránky namísto re-renderování celé šablony.
historie Prohlížečeedit
s tím, že SPA je podle definice „jedna stránka“, model přeruší návrh prohlížeče pro navigaci v historii stránek pomocí tlačítek „vpřed“ nebo „zpět“., To představuje překážku použitelnosti, když uživatel stiskne tlačítko zpět, očekával předchozí stav obrazovky v rámci lázní, ale místo toho, aplikace je jediná stránka uvolní a Předchozí stránka v historii prohlížeče je prezentován.
tradičním řešením pro SPAs bylo změnit identifikátor hash fragmentu adresy URL prohlížeče v souladu s aktuálním stavem obrazovky. Toho lze dosáhnout pomocí JavaScriptu a způsobí, že události historie URL budou vytvořeny v prohlížeči., Dokud je SPA schopen vzkřísit stejný stav obrazovky z informací obsažených v URL hash, očekávané chování zpětného tlačítka je zachováno.
Chcete-li tento problém dále řešit, specifikace HTML5 zavedla pushState a replaceState poskytující programový přístup ke skutečné URL a historii prohlížeče.
AnalyticsEdit
analytické nástroje, jako je Google Analytics, se silně spoléhají na načítání celých nových stránek v prohlížeči, iniciované novým načtením stránky. Lázně nefungují tímto způsobem.,
po prvním načtení stránky jsou všechny následné změny stránky a obsahu zpracovány interně aplikací, která by měla jednoduše zavolat funkci pro aktualizaci balíčku analytics. Nedaří volání uvedené funkce, prohlížeč nikdy spouští novou stránku načíst, nic se přidá do prohlížeče historii, a analytický balíček nemá ponětí, kdo co dělá na webu.
přidání načtení stránky do SPAEdit
je možné přidat události načítání stránky do lázní pomocí HTML5 history API; to pomůže integrovat analytiku., Obtížnost přichází v řízení a zajištění toho, aby bylo vše přesně sledováno-to zahrnuje kontrolu chybějících zpráv a dvojitých záznamů.Některé rámce poskytují integrace analytiky s otevřeným zdrojovým kódem, které oslovují většinu hlavních poskytovatelů analytiky. Vývojáři mohou integrovat do aplikace, a ujistěte se, že vše funguje správně, ale není třeba dělat vše od nuly.
Rychlost počátečního načítání
jednostránkové aplikace mají pomalejší načítání první stránky než aplikace založené na serveru., Je to proto, že první zatížení musí snížit rámec a kód aplikace před vykreslením požadovaného zobrazení jako HTML v prohlížeči. Serverová aplikace musí do prohlížeče vytlačit požadovaný HTML, což snižuje latenci a čas stahování.
urychlení načítání stránky
existuje několik způsobů, jak urychlit počáteční zatížení lázní, jako je těžký přístup k ukládání do mezipaměti a lazy-loading moduly v případě potřeby., Ale to“to není možné se dostat pryč z toho, že to potřebuje stáhnout rámci, alespoň některé z kódu aplikace, a bude s největší pravděpodobností hit API pro data před zobrazením něco v prohlížeči. Jedná se o“ pay me now, or pay me later “ kompromisní scénář. Otázka výkonu a čekacích časů zůstává rozhodnutím, které musí developer učinit.