Въведение в прогресивните уеб приложения

Повечето разработчици поне са чули някакъв шум Прогресивни уеб приложения. Те са широко подкрепени от технологични компании като Google и бързо се превръщат в норма за уеб приложения с множество устройства.

Но какво точно е разликата между типичното и a прогресивен уеб приложение?

За разработчиците, това е цял свят на различия. Прогресивните уеб приложения използват модерни уеб API за създайте собствени преживявания на приложения в браузъра. Това означава, че разработчиците могат да създават бързо зареждащи се динамични приложения, без да използват хибридни рамки.

В това ръководство ще разгледам основите на прогресивните уеб приложения, някои основни функции и как можете да започнете да създавате свои собствени.

Какво представляват прогресивните уеб приложения?

Прогресивни уеб приложения (или PWA) Възползвайте се от API на уеб браузъра да създадете собствени приложения на приложения в браузъра на всяко устройство.

В крайна сметка Progressive Web Apps обхващат a няколко технологии които разработчиците могат да използват, за да създават мощни, подобни на местни приложения. Много от тях идват Уеб API Както и API за работници на услуги или Push API.

Има много изисквания да наричам нещо като PWA, но това са най-важните:

• Е напълно мобилен отзивчив.
• Придържа се прогресивно подобрение.
• Способен да инсталирайте локално на смартфони и таблети.
• Изпълнява се офлайн без интернет, като се използват работници от услугите.
• Разделя съдържанието от функционалността използвайки обвивката на приложението.
• Включва се в HTTPS за по-голяма сигурност.
• Откриваемо в търсенето с Google.
• Има динамични страници, подобни на приложения но все още има собствен URL адрес.

Ако ти си мислене за изграждане на малка уеб ап вместо това можете да опитате да създадете прогресивно уеб приложение. Това идва с малко крива на обучение, но имате толкова много по-голям контрол върху потребителския опит като резултат.

Нека се потопим в основите на Progressive Web Apps и да научим какво ги кара да кърлят.

Служители на услуги

Всяка отделна Progressive Web App нуждае се от работници. Това са като пътнически служители които координират движението на трафика, откъде идват данните и как всички се организират и кешират.

По-просто казано, работникът на услугата работи като JavaScript файл и се изпълнява във фонов режим на уеб приложението ви. Всеки път, когато потребителят изпълнява събитие, той призовава скрипт на работник на услугата за изтегляне на данни, запазване на данни или и двете!

Използвайки API за сервизен работник е съществен да работи с PWA, поддържан от офлайн. Ето как вие предават данни между изгледи и как можете искане на данни от локална база данни. Но това е предимно напреднали неща, които научавате, като работите по проект на PWA.

Погледни Готварска книга за работниците на услуги за основни фрагменти и живи демонстрации. Това е фантастичен начин да се учим чрез изучаване на това, което другите са направили и клониране, че в собствените си приложения.

Ако се надявате да създадете прогресивно уеб приложение започнете с API на Service Worker. Просто се заемете с нея и настройте проста демо на местно ниво. Това ще постави основата за по-късно изграждане на персонализирани функции и страници за приложения всички те преминават през сервизни работници.

За начинаещи водачи и подробни кодови фрагменти, Специално препоръчвам тези ресурси:

• Първи стъпки с работниците в сферата на услугите
• Първи стъпки с работниците в сферата на услугите
• Пример за служител на услугата: потребителски пример за страница в офлайн режим

Черупката на приложението

Повечето местни приложения следвайте архитектурата на обвивката на приложението където са данните и кодът на приложението напълно отделен от потребителския интерфейс. Черупката на приложението може да бъде кеширани локално така че всяка страница се зарежда невероятно бързо.

Това продължава със същото “родно приложение” чувство, когато интерфейсът винаги остава видим но съдържанието / функционалността се зарежда различно всеки път. Разгледайте тази страница в сайта на Google за разработчици, за да научите повече за модел на обвивката на приложението.

Повечето приложения имат a много просто приложение черупка и трябва да проектирате архитектурата си простота в ума.

Обикновено обвивката на приложенията ги има основни елементи:

• Връзки към горната лента за навигация.
• Бутон за опресняване (по избор).
• Контейнер за фон на страницата.

Тук можете да откриете хубав казус Архитектурата на Google I / O Progressive Web App. Те също така предлагат някои съвети за изграждане на собствена архитектура на черупката, кеширане и го дърпа автоматично за всяка страница.

Помислете за черупката като всички статични елементи на потребителския интерфейс ще използвате на всяка отделна страница. Те трябва да бъдат отделени от останалата част от кода ви и кеширани за лесно повторно използване. Също така проверете Въведение на Google на обекта с много код откъси, които да ви помогнат да започнете.

Онлайн и офлайн поддръжка

Повечето местни приложения работи добре без интернет. Прогресивните уеб приложения са предназначени да следват същото поведение.

Чрез работниците в сферата на услугите можете изграждане на местни кешове с JSON код за всяка страница. По този начин потребителите могат разглеждате уеб приложението си локално. Може би включва файл с манифест за да дефинирате иконите, началния екран и други настройки за стартиране.

Ако използвате API на Service Worker, прегледайте API за кеш кое е част от същата рамка. По принцип това е най-добрият начин съхранявайте данни локално и достъп до нея от служители на услуги по късно.

Можете също тествайте всяко уеб приложение използвайки фар, безплатен инструмент за проверка на съответствието на функциите и поддръжка на технологиите PWA.

PWAs винаги изискват офлайн поддръжка чрез API на Service Worker, така че те могат работа в държави с ниска свързаност. Лайтхаус е най-добрият начин за тестване за офлайн поддръжка заедно с множество други функции.

Примери на живо

Изучаването на PWA и да се види как те работят е чудесен начин да се научите. Пазарът на прогресивните уеб приложения обаче е все още се появяват, толкова много от най-добрите са разпръснати в различни ъгли на интернет.

Но, благодарение на Галерия с камъни в PWA, Курирах няколко невероятни примера, за да покажа какво могат да направят PWA.

1. Валутен конвертор

Това е доста просто конвертор на валути взема обменни курсове и изчислява текущия различията между тона валути по света.

Ще забележите, че това уеб приложение е напълно отзивчив, поддържа докосване, и автоматични актуализации без опресняване на страницата.

Това са само някои от функциите, които очаквате типичен Progressive Web App. Това приложението може да се запази и локално в телефона си, за да работи офлайн, въпреки че се свързва с JSON файл, за да проверява текущите обменни курсове.

2. Английски акценти

Просто обожавам това уеб приложение, защото е едновременно уникално и невероятно добре проектирано. Най- Карта на английските акценти курира видеоклипове онлайн където хората носят акценти от определени региони на САЩ и Великобритания.

Като кликнете някъде на картата, можете да чуете как хората произнасят определени думи в различни части на света. Приложението е мълния бързо и това е отворен код на GitHub за всеки да провери.

Вътрешните работи Реагират / Redux с Firebase и API връзка с Google Карти. Определено е чудесен пример за нещо сравнително просто за начинаещи, за да учат и учат.

3. Pokedex.org

Друг доста прост PWA е това Pokedex приложение създаден от Нолън Лоусън. Той също публикува този код свободно в GitHub, така че това е още един проект си струва да навикваш и да учиш.

Тъй като тези данни могат да останат статични, това е обработват чрез локален двигател Наречен PouchDB. Всички данни идват от PokeAPI и след това се записват като обикновен JavaScript. Това означава, че можете запазете я локално в телефона си като истински роден ап и той ще работи с или без достъп до интернет. Много хладно, нали?

Цялото нещо е задвижван от JavaScript, така че това е доказателство за това колко можете да направите с кода на интерфейса. Той използва много кеширане с API на Service Worker, така че това е луд бързо и супер лесен за използване.

4. Flipkart

Накрая и най-изненадващо, нека видим Уебсайт на Flipkart. Това е пълно Магазинът за електронна търговия всъщност е прогресивно уеб приложение.

е напълно отзивчив и динамично зарежда страници. URL адресите на страниците се добавят към браузъра, така че можете да ги копирате / поставите и да ги споделите като типичен уебсайт.

Това е лесно най-сложната PWA, която съм виждал. Учуден съм, че разработчиците успяха да създадат такова безпроблемно преживяване в интернет за всички потребители, да не говорим за това поддържане на локално офлайн хранилище, също.

И докато не можах да намеря репо за целия изходен код на Flipkart, има Flipkart страница в GitHub с по-малки кодови фрагменти от екипа на разработчиците.

Научете повече

Прогресивни уеб приложения са невероятно популярни и със сигурност ще спечелят пара тъй като повече разработчици преминават от родните / хибридни приложения.

Има годишна среща на върха, наречена Прогресивна среща на уеб приложенията и публикуват видеоклипове в YouTube, които можете да гледате безплатно. Това е чудесен начин вземете някои професионални знания, без да плащате за билет.

Но, ако търсите по-подробно PWA кодиращи водачи определено проверете тези уроци:

• Ръководство за начинаещи за прогресивни уеб приложения
• Създайте първото си прогресивно уеб приложение с React
• Изграждане на прогресивно уеб приложение с полимер