Увод у Прогрессиве Веб Аппс

Већина програмера је барем чула неке звукове Прогрессиве Веб Аппс. Они су широко подржани од стране технолошких компанија као што је Гоогле и брзо постају норма за веб апликације за више уређаја.

Али, шта је тачно разлика између типичног и а прогресивно веб апликација?

Фор девелоперс, то је читав свет разлика. Прогрессиве Веб Аппс користе модерне веб АПИ-је за створите изворна искуства апликације у претраживачу. То значи да програмери могу да праве динамичне апликације које се брзо учитавају без употребе хибридних оквира.

У овом водичу ћу покрити основе Прогрессиве Веб Аппс, неке примарне функције и како можете да почнете да правите сопствене.

Шта су Прогрессиве Веб Аппс?

Прогрессиве Веб Аппс (или ПВА) искористите предности АПИ-ја за веб претраживач да бисте креирали изворна искуства апликације у претраживачу на било ком уређају.

На крају, прогресивне веб апликације обухватају а прегршт технологија које програмери могу да користе за креирање снажних апликација налик на материју. Многи долазе Веб АПИ-ји као што је АПИ за раднике услуга или Пусх АПИ.

Постоје неколико захтева назвати нешто ПВА, али ово су најважније:

Ис фулл мобиле респонсиве.
Придржава се прогресивно побољшање.
У стању да инсталирајте локално на паметним телефонима и таблетима.
Рунс оффлине без Интернета, користећи услужне раднике.
Одваја садржај од функционалности користећи љуску апликације.
Направљен на ХТТПС-у за већу сигурност.
Дисцоверабле у Гоогле претрази.
Хас динамичне странице сличне апликацијама али свако још има своју УРЛ адресу.

Ако сте размишљање о изградњи мале веб апликације можда ћете покушати да направите Прогрессиве Веб Апп. Ово долази с мало кривуље учења, али имате толико већу контролу над корисничким искуством као резултат.

Хајде да заронимо у основе Прогрессиве Веб Аппс-а и сазнамо шта их тјера.

Сервисни радници

Сваки појединачни Прогрессиве Веб Апп потребан је сервисер. Су као саобраћајни службеници ко координира кретање саобраћаја, одакле долазе подаци и на који начин све се организује и цацхед.

Једноставно речено, сервисер функционише као ЈаваСцрипт датотека и ради у позадини ваше веб апликације. Кад год корисник обавља догађај, он зове скрипту за сервисера или повлачење података, спремање података или обоје!

Помоћу АПИ за услужног радника је битан да ради са ПВА-ом подржаном од оффлине. Овако сте ви преносити податке између приказа и како можете захтевати податке из локалне базе података. Али, то су углавном напредне ствари које учите радећи на пројекту ПВА.

Завирите у Кухарица за раднике за басиц сниппетс и ливе демос. Ово је фантастичан начин да се научи проучавањем онога што су други урадили и клонирање у властитим апликацијама.

Ако се надате да ћете направити Прогрессиве Веб Апп почните са АПИ-јем Сервице Воркер. Само се позабавите и поставите једноставан демо на локалном нивоу. Ово ће поставити подлогу за касније изградња корисничких функција и страница да сви пролазе кроз услужне раднике.

За почетнички водичи и детаљни исјечци кода, Посебно препоручујем ове ресурсе:

Почетак рада са сервисерима
Почетак рада са сервисерима
Узорак радника у служби: Узорак прилагођене странице без контакта

Љуска апликације

Вецина изворних апликација пратите архитектуру апликација где су подаци и код апликације потпуно одвојено од корисничког интерфејса. Љуска апликације може бити локално спремљено тако да се свака страница невјеројатно брзо учитава.

Ово остаје исто “нативе апп” осећај где увек остаје видљив али садржај / функционалност се учитава другачије сваки пут. Погледајте ову страницу на локацији Гоогле Девелоперс да бисте сазнали нешто више о томе модел схелл апликације.

Већина апликација има а веома једноставна апликација и дизајнирајте своју архитектуру на уму једноставности.

Обично, ова апликација има ово главни елементи:

Линије горње траке за навигацију.
Дугме за освежавање (опционално).
Контејнер позадине странице.

Овде можете наћи лепу студију случаја Гооглеова И / О прогресивна архитектура Веб Апп љуске. Они такође нуде неке савете за изградњу сопствене архитектуре љуске, њено кеширање, и повлачењем аутоматски за сваку страницу.

Замислите архитектуру љуске као сви статички УИ елементи ћете користити на свакој страници. То би требало да буде одвојено од остатка кода и кеширано за једноставну поновну употребу. Такође погледајте Гооглеов увод предмету са много кода исечци који ће вам помоћи да почнете.

Онлине и оффлине подршка

Вецина изворних апликација трчање без Интернета. Прогрессиве Веб Аппс треба да прате исто понашање.

Кроз сервисне раднике, можете изградити локалне скровите са ЈСОН кодом за сваку страницу. На овај начин корисници могу прегледајте веб апликацију локално. Можда и ви укључите датотеку манифеста да бисте дефинисали своје иконе, почетни екран и друге поставке покретања.

Ако користите АПИ Сервице Воркер, завирите у Цацхе АПИ која је дио истог оквира. То је углавном најбољи начин локално чување података и приступите од радника касније.

Можете такође тестирајте било коју веб апликацију Користећи Лигхтхоусе, бесплатан алат за проверу усаглашености карактеристика и подршку за ПВА технологије.

ПВА увек захтијевају оффлине подршку преко Сервице Воркер АПИ-ја, тако да могу рад у државама са ниском повезаношћу. Светионик је најбољи начин да тестирате подршку за оффлине и низ других функција.

Примери уживо

Проучавање живих активних лица и гледање како они раде је одличан начин за учење. Међутим, тржиште Прогрессиве Веб Апп је још увек се појављују, толико је најбољих раштркане по различитим угловима Интернета.

Али, захваљујући Галерија ПВА роцкс, Курирала сам неколико невероватних примера да покажем шта ПВА заиста могу да ураде.

1. Конвертор валута

Ово је прилично једноставно конвертор валута узима девизне курсеве и израчунава струју разлике између тона валута широм света.

Приметићете да је ова веб апликација фулл респонсиве, подржава додир, и аутоматско ажурирање без освежавања странице.

Ово су само неке од карактеристика које очекујете у било ком типични Прогрессиве Веб Апп. Ово Апликација се такође може сачувати локално на телефон да ради ван мреже, иако се повезује са ЈСОН датотеком да би проверио тренутне курсеве.

2. Енглисх Аццентс

Једноставно обожавам ову веб апликацију јер је и јединствена и невероватно добро дизајнирана. Тхе Енглисх Аццентс Мап цуратес видеос онлине где људи носе акценте из одређених региона САД и УК.

Кликом на било које место на мапи можете да слушате како људи изговарају одређене речи у различитим деловима света. Апликација је муњевита и то је опен-соурцед на ГитХуб за свакога.

Унутрашњи делови раде Реацт / Редук са Фиребасе и један АПИ веза са Гоогле мапама. Дефинитивно одличан пример нечега што је прилично једноставно за почетнике да уче и уче.

3. Покедек.орг

Још једна прилично једноставна ПВА је ова Покедек апп креирао Нолан Лавсон. Он је такође објавио овај кодекс слободно он ГитХуб, тако да је то још један пројекат који је вреди њушкати около и учити.

Пошто ови подаци могу остати статични, то је управљани преко локалног мотора зове ПоуцхДБ. Сви подаци долазе из ПокеАПИ-ја и чувају се као обичан ЈаваСцрипт. То значи да можеш спремите је локално на телефон као права домаћа апликација и покренут ће се са или без приступа Интернету. Прилично кул, тачно?

Цела ствар је поверед би ЈаваСцрипт, тако да је то доказ колико можете да урадите са фронтенд кодом. Користи много кеширања са АПИ-јем Сервице Воркер, тако то је лудо брзо и супер једноставно за коришћење.

4. Флипкарт

И на крају и најневероватније, да видимо Флипкарт вебсите. Ово је пуно е-цоммерце схоп је заправо Прогрессиве Веб Апп.

Његово фулл респонсиве и динамички учитава странице. УРЛ-ови страница се додају прегледачу, тако да их можете копирати / залијепити и дијелити као типичан веб-локација.

То је лако најсложенији ПВА који сам икада видео. Запањен сам што су програмери успели да створе тако беспрекорно искуство на вебу за све кориснике, а камоли подршка локалном оффлине складиштењу, такође.

И, иако нисам могао да пронађем репо за цео Флипкарт изворни код, постоји а Флипкарт страница на ГитХубу са мањи исјечци кода од њиховог развојног тима.

Леарнинг море

Прогрессиве Веб Аппс су невероватно популаран и сигурно ће добити пару како се више програмера пребацује са изворних / хибридних апликација.

Постоји годишњи састанак на врху који се зове Прогрессиве Веб Апп Суммит и објављују видео записе на ИоуТубе-у које можете гледати бесплатно. Ово је сјајан начин покупите нешто про знања без плаћања карте.

Али, ако тражите детаљније Водичи за кодирање ПВА свакако погледајте ове лекције:

Водич за почетнике за прогресивне веб апликације
Направите своју прву прогресивну веб апликацију са Реацт
Израда Прогрессиве Веб Апп са Полимер-ом