Направете прогресивно уеб приложение (PWA) най-добрия си приятел

„PWA е революционен за уеб разработката. Той помага да се повиши производителността ви, като предоставя страхотно потребителско изживяване, което съчетава предимствата както на уеб, така и на мобилни приложения с минимални разходи. "
Ръкостискането е добра практика

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

Време е да направите добра стъпка към PWA и ще ви обясня как вашето приятелство е от полза за вас с PWA!

Не бъркайте с PWA

По някакви причини много хора смятат, че PWA са приложения за една страница (SPA).
Това е грешно, наистина много грешно (с код на състоянието 400 ).

SPA може да бъде PWA, но PWA не трябва да е SPA.

PWA обича да работи с всички

Уебсайт, изграден върху всяка рамка или библиотека като ReactJs, Angular, VueJS или дори в HTML, може да бъде PWA.

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

Ако имате мит, че PWA е технология на Google, тези части от информацията са достатъчни, за да изчистите вашия мит. Прогресивните уеб приложения се базират на уеб стандарти. Работи с всеки браузър и всяка платформа.

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

Прогресивните уеб приложения са уебсайтове, които трябва да отговарят на три технически изисквания:

  • Трябва да се обслужва с HTTPS (Secure)
  • Имайте валиден файл за уеб манифест с минимален специфичен набор от икони
  • Трябва да регистрирате валиден сервизен работник и минимална офлайн поддръжка

Никъде в тези изисквания нищо не казва, че уебсайтът трябва да използва JavaScript. Е, накратко, трябва да регистрирате сервизния работник с помощта на клиентски JavaScript.

PWA поддържа функции като по-долу:

  • Закрепване към начален екран - Можем да добавим иконата на уеб приложението си на началния екран.
  • Push Известия - Можем да интегрираме push известия като в родно приложение чрез Push API и API за известия за мрежата.
  • Splash Screen - Файлът на манифеста управлява екрана за пръскане на вашия PWA за ангажиране с обхват като родно приложение
  • Гео местоположение - Можем да осъществим достъп до текущото местоположение на потребителя чрез API за геолокация
  • Офлайн режим на работа - Поради сервизния работник, който управлява механизма за кеширане, ще получим богато потребителско изживяване, дори ако няма интернет.
  • Достъп до функции на медиите - можем да имаме достъп до устройства с микрофон, видео и камера. Освен това внедрете функционалност за видео и аудио повикване с помощта на WebRTC API.

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

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

PWA ще поддържа следните функции в бъдеще като:

  • Bluetooth - Web Bluetooth API се разработва и скоро ще имаме достъп до Bluetooth на уеб платформата.
  • Сензори - Сензорите са наистина важна част от днешната епоха на развитие. Достъпът на някои сензори вече се развива като сензор за околна светлина, сензор за близост, сензор за акселерометър, сензор за магнитометър и сензор за жироскоп.
  • Native Sharing - Можем да използваме нативен механизъм за споделяне на устройството като част от API на Web Share.
  • Сензор за пръстови отпечатъци - Ние можем да удостоверим потребителите чрез сензора за пръстови отпечатъци, използвайки API за уеб удостоверяване. Но дали все още се разработва поради съображения за сигурност.

Защо всички днес приемат PWA?

След като прочетете някои статистически данни на големите компании, които приемат PWA, ще знаете силата на PWA и ясно ще разберете защо всички искат да отидат за PWA.

Ето, искам да ви покажа някои данни от казуси на PWA на популярни компании:

  • Twitter разработи Twitter Lite Progressive Web App през април 2017 г. и в резултат twitter увеличава страниците на сесия с 65%, туитовете изпращат увеличение със 75% и степента на отпадане с 20%.
  • Flipkart, най-големият сайт за електронна търговия в Индия, реши да затвори стратегията само за приложение през 2015 г. След това, те дойдоха с Flipkart Lite, която е Powered от PWA и ще се изумите, като прочетете страхотните резултати. Потребителите прекарват повече време на сайта със скорост 3x, степента на повторно ангажиране е с 40% по-висока, 70% по-висока степен на реализация сред пристигащите чрез началния екран и 3x по-ниска употреба на данни в сравнение с родното приложение.
  • Alibaba.com, най-голямата в света платформа за онлайн B2B търговия. Alibaba.com дойде с нова стратегия като PWA, за да предостави страхотно потребителско изживяване както за първите посетители, така и за многократните посетители. Новата им стратегия дойде с изненадващи резултати. Alibaba.com получи 76% по-високи проценти на конверсия в браузъри, получи 4% повече месечни активни потребители на iOS и 30% за Android и 4 пъти по-висока степен на взаимодействие от Добавяне към началния екран.

Да, това е невероятно и трябва да приемем красотата на Progressive Web App. Сега разбирате, защо ви принуждавам да направите PWA най-добрия си приятел.

Play Store е готов за публикуване на PWA

Да да да! Play Store и PWA вече станаха приятели. Сега можем да публикуваме PWA-и в магазина за игра с помощта на Trusted Web Activity (TWA). Google Chrome 72 добави надеждни уеб дейности, за да поддържа изглед на цял екран в мрежата, без да показва URL или други елементи, свързани с браузъра. Така можете да генерирате APK на вашето уеб приложение и да го качите в магазина за игра с помощта на Android студио и някои познания за разработката на Android.

Тук ви препоръчвам да гледате по-долу видео, за да получите подробни познания за TWA:

Съществуването на PWA като Facebook Lite, Instagram Lite, Flipkart Lite и Twitter Lite най-вече използват WebView и ни създават усещане за приложение. Но имайте предвид, че Apple все още не дава подкрепа на TWA.

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

Плескайте Клоп Клоп! Защото Класването е добър навик