Úvod do progresívnych webových aplikácií

Väčšina vývojárov aspoň počula nejaké bzučanie Progresívne webové aplikácie. Tie sú široko podporované technickými spoločnosťami ako Google a rýchlo sa stávajú normou pre webové aplikácie s viacerými zariadeniami.

Ale, čo je presne to rozdiel medzi typickým a a progresívne webovú aplikáciu?

Pre vývojárov, je to celý svet rozdielu. Progresívne webové aplikácie používajú moderné webové rozhrania API vytvárať natívne skúsenosti s aplikáciami v prehliadači. To znamená, že vývojári môžu vytvárať dynamické aplikácie s rýchlym načítaním bez použitia hybridných rámcov.

V tejto príručke sa budem zaoberať základy progresívnych webových aplikácií, niektoré základné funkcie a ako môžete začať vytvárať svoje vlastné.

Čo sú progresívne webové aplikácie?

Progresívne webové aplikácie (alebo PWA) využite API webového prehliadača na vytvorenie natívnych skúseností s aplikáciami priamo v prehliadači ľubovoľného zariadenia.

Nakoniec, progresívne webové aplikácie zahŕňajú a technológií ktoré vývojári môžu používať na vytváranie výkonných prirodzených aplikácií. Mnoho z nich pochádza Web API ako API servisných pracovníkov alebo Stlačte rozhranie API.

Existujú pomerne málo požiadaviek zavolať niečo PWA, ale toto sú najdôležitejších:

• Je plne mobilné.
• Dodržiava progresívne vylepšenie.
• Schopný lokálne nainštalovať na zariadeniach smartphone a tabletoch.
• Beží v režime offline bez internetu, pomocou pracovníkov služieb.
• Oddeľuje obsah od funkcie pomocou shell aplikácie.
• Buduje na HTTPS pre väčšiu bezpečnosť.
• zistiteľný vo vyhľadávaní Google.
• má dynamické stránky podobné aplikáciám ale každý stále má svoju vlastnú adresu URL.

Ak si myslenie na vytvorenie malej webovej aplikácie môžete skúsiť namiesto toho vytvoriť Progresívnu webovú aplikáciu. To prichádza s trochou učebnej krivky, ale máte toľko väčšiu kontrolu nad skúsenosťami používateľov ako výsledok.

Poďme sa ponoriť do základov Progressive Web Apps a dozvedieť sa, čo ich robí kliešťami.

Servisní pracovníci

Každá progresívna webová aplikácia potrebuje servisných pracovníkov. Toto sú ako dopravné dôstojníci koho koordinujú, odkiaľ premáva, odkiaľ prichádzajú dáta a ako to všetko sa organizuje a uchováva vo vyrovnávacej pamäti.

Jednoducho povedané, servisný pracovník funguje ako súbor JavaScript a beží na pozadí vašej webovej aplikácie. Kedykoľvek používateľ vykoná udalosť, volá skript servisných pracovníkov buď vytiahnuť dáta, uložiť dáta, alebo oboje!

Použitie Aplikácia Worker API je nevyhnutný na spustenie offline PWA. Takto vy prenášať dáta medzi zobrazeniami a ako môžete požadovať údaje z lokálnej databázy. To je však väčšinou pokročilé veci, ktoré sa naučíte prácou na projekte PWA.

Pozrite sa na Servisní pracovníci Kuchárka pre základné úryvky a živé ukážky. Je to fantastický spôsob, ako sa učíte tým, že študujete to, čo robili iní klonovanie vo vašich vlastných aplikáciách.

Ak dúfate, že vytvoríte progresívnu webovú aplikáciu začnite s API služby Service Worker. Stačí sa s ním a vytvoriť jednoduché demo lokálne. Toto nastaví základy pre neskoršie vytváranie vlastných aplikačných funkcií a stránok že všetci prechádzajú cez služby.

pre začiatočníckych sprievodcov a podrobné úryvky kódu, Tieto zdroje konkrétne odporúčam:

• Začíname so servisnými pracovníkmi
• Začíname so servisnými pracovníkmi
• Vzorka servisného pracovníka: Vzorka vlastnej offline stránky

Obal aplikácie

Väčšina natívnych aplikácií postupujte podľa architektúry aplikácie shell kde sú údaje a kód aplikácie úplne oddelené od používateľského rozhrania. Aplikačný shell môže byť lokálne uložené v cache takže každá stránka sa načíta veľmi rýchlo.

To sa drží rovnako “natívna aplikácia” pocit, kde rozhranie zostane vždy viditeľné ale obsah / funkčnosť sa načíta inak zakaždým. Pozrite sa na túto stránku na stránkach vývojárov Google a dozviete sa o nej viac model shell aplikácie.

Väčšina aplikácií má a veľmi jednoduchá shell aplikácie a mali by ste navrhnúť vašu architektúru jednoduchosť v mysli.

Zvyčajne má shell aplikácie tieto hlavné prvky:

• Horné odkazy na navigačnej lište.
• Obnoviť tlačidlo (voliteľné).
• Kontajner pozadia stránky.

Nájdete tu peknú prípadovú štúdiu Architektúru shell aplikácie Google I / O Progressive Web App. Ponúkajú tiež niekoľko tipov na vytvorenie vlastnej shell architektúry, ukladanie do vyrovnávacej pamäte a automaticky ho vytiahne pre každú stránku.

Premýšľajte o štruktúre škrupín ako všetky statické prvky používateľského rozhrania budete používať na každej stránke. Tie by mali byť oddelené od zvyšku kódu a uložené do vyrovnávacej pamäte pre jednoduché opätovné použitie Tiež vyskúšajte Úvod Google k predmetu s dostatkom kódu úryvky vám pomôžu začať.

Podpora online a offline

Väčšina natívnych aplikácií bežte bez internetu. Progresívne webové aplikácie majú sledovať toto správanie.

Prostredníctvom servisných pracovníkov môžete vybudovať lokálne pamäte s kódom JSON pre každú stránku. Týmto spôsobom môžu používatelia prehľadajte webovú aplikáciu lokálne. Môžete tiež obsahovať súbor manifestu definovať ikony, úvodnú obrazovku a ďalšie nastavenia spustenia.

Ak používate rozhranie Service Worker API, pozrite sa na Cache API ktorý je súčasťou toho istého rámca. Vo všeobecnosti je to najlepší spôsob uchovávať údaje lokálne a prístup k nim od pracovníkov poskytujúcich služby neskôr.

Môžete tiež otestovať akúkoľvek webovú aplikáciu použitím maják, bezplatný nástroj na kontrolu dodržiavania funkcií a podporu technológií PWA.

PWA vždy vyžaduje offline podporu pomocou služby API služby Service Worker, aby mohli pracovať v podmienkach s nízkym pripojením. Maják je najlepší spôsob, ako otestovať offline podporu spolu s celým radom ďalších funkcií.

Živé príklady

Študovanie živých PWA a videnie toho, ako fungujú, je skvelý spôsob, ako sa učiť. Avšak je to trh progresívnej webovej aplikácie stále sa objavujú, toľko z najlepších je rozptýlené do rôznych kútov internetu.

Ale vďaka Galéria PWA skál, Vyskúšal som niekoľko úžasných príkladov, aby som ukázal, čo môžu PWA skutočne robiť.

1. Prevodník mien

To je pomerne jednoduché prevodník mien prijíma výmenné kurzy a počíta aktuálne rozdiely medzi tonou mien vo svete.

Všimnete si, že táto webová aplikácia je plne reagovať, podporuje dotyk, a automatické aktualizácie bez akéhokoľvek obnovenia stránky.

To sú len niektoré z funkcií, ktoré očakávate typická progresívna webová aplikácia. toto Aplikácia môže byť tiež uložená lokálne do telefónu pracovať v režime offline, hoci sa pripojí k súboru JSON, aby skontroloval aktuálne výmenné kurzy.

2. Akcenty v angličtine

Jednoducho si túto webovú aplikáciu zbožňujem, pretože je jedinečná a neuveriteľne dobre navrhnutá. Mapa akcií v angličtine čistí videá online kde ľudia nesú akcenty z určitých regiónov USA a Veľkej Británie.

Kliknutím kdekoľvek na mape môžete počúvať, ako ľudia vyslovujú určité slová v rôznych častiach sveta. Aplikácia je bleskovo rýchla a je to open-source na GitHub pre každého, kto sa pozrie.

Vnútorné prvky bežia Reagovať / Redux s Firebase a an Pripojenie rozhrania API do Máp Google. Určite skvelý príklad niečoho pomerne jednoduchého pre začiatočníkov na štúdium a učenie sa.

3. Pokedex.org

Ďalším pomerne jednoduchým PWA je to Aplikácia Pokedex vytvoril Nolan Lawson. Taktiež uverejnil tento kód voľne na GitHub, tak to je ešte ďalší projekt, ktorý je stojí za to snooping a študovať.

Keďže tieto údaje môžu zostať statické, je to s lokálnym motorom volal PouchDB. Všetky údaje prichádzajú z PokeAPI a potom sa ukladajú ako jednoduchý JavaScript. To znamená, že môžete uložte ho lokálne do telefónu ako pravá natívna aplikácia a bude bežať s prístupom na Internet alebo bez nej. Docela cool, správne?

Celá vec je powered by JavaScript, takže je to dôkaz toho, koľko môžete urobiť s kódom frontend. Používa to veľa caching s API služby Service Worker, takže je to blázon rýchle a super ľahko sa používa.

4. Flipkart

Napokon a veľmi prekvapujúco, pozrime sa Webová stránka flipkartu. Toto je plné e-commerce shop je v skutočnosti progresívna webová aplikácia.

to je plne reagovať a dynamicky načíta stránky. Adresy URL stránky sú pripojené k prehliadaču, takže ich môžete skopírovať / prilepiť a zdieľať ich ako bežné webové stránky.

To je jednoduché najkomplexnejšia PWA, akú som kedy videl. Som prekvapený, že vývojári dokázali vytvoriť takú bezproblémovú skúsenosť na webe pre všetkých používateľov, nieto podpora lokálneho offline ukladania, tiež.

A kým som nemohol nájsť repo pre celý zdrojový kód Flipkart, existuje a Flipkart na stránke GitHub s menšie útržky kódu od svojho vývojového tímu.

Viac informácií

Progresívne webové aplikácie sú neuveriteľne populárne a bude určite získať paru ako viac vývojárov prechádza z natívne / hybridné aplikácie.

Každoročný summit sa nazýva Progresívny summit webových aplikácií a oni uverejňujú videá na YouTube môžete sledovať zadarmo. Je to skvelý spôsob vyzdvihnúť niektoré poznatky, bez platenia za vstupenku.

Ale ak hľadáte podrobnejšie PWA kódovacie vodítka určite skontrolujte tieto návody:

• Príručka pre začiatočníkov k progresívnym webovým aplikáciám
• Vytvorte si prvú progresívnu webovú aplikáciu pomocou programu React
• Vytváranie progresívnej webovej aplikácie s polymérom