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

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

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





Но какво всъщност е прогресивно уеб приложение? Какво прави PWA, което не прави уебсайт? Ето какво трябва да знаете за прогресивните уеб приложения.



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

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





Какво тогава определя PWA?

  • Универсален : PWA трябва да работи безпроблемно (добре, почти) за всеки потребител, независимо от техния браузър.
  • Отзивчив : PWA трябва да работят с всяко устройство, като например лаптоп, таблет, смартфон и т.н.
  • Дизайн : дизайнът трябва да имитира местни мобилни приложения, което означава рационализирани, лесни за намиране менюта, с проста интерактивност за разширени функции.
  • Безопасно : PWA трябва да използват HTTPS за защита на потребителските данни.
  • Откриваеми: потребителите могат да намерят PWA и те лесно могат да бъдат идентифицирани като приложение (а не като „сайт“).
  • Годеж: PWA трябва да има достъп до естествени функции за ангажираност, като например push известия.
  • Актуализации: PWA остават актуални и обслужват най -новите версии на услуга или сайт.
  • Инсталация: позволяват на потребителите лесно да „инсталират“ PWA на началния си екран, без да се нуждаят от магазин за приложения.
  • Споделяне: PWA изискват само един URL адрес за споделяне, без никаква инсталация.

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



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

Ключът към прогресивните уеб приложения са служителите на браузъра.

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



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

Преди обслужващите служители скриптът за кеширане на браузъра беше Application Cache (или App Cache). Кешът на приложенията се предлага в широк спектър от офлайн услуги, но до известна степен е склонен към грешки. Освен това, App Cache има няколко добре известни ограничения, като A List Apart обяснява.



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

Обслужващите работници обаче продължават само толкова дълго, колкото се изисква тяхното действие. В PWA, когато щракнете върху нещо или използвате функция, сервизен работник изниква в действие. Сервизният работник (не забравяйте, че това е скрипт) обработва събитието, решавайки дали офлайн кешът може да завърши заявката. Идеята е, че PWA има множество офлайн кешове, от които да избира, което дава много по -широк спектър от офлайн функции.

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

Прогресивна поддръжка на браузъра за уеб приложения

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

Първо, нека разгледаме браузърите. Имате две възможности да проверите поддръжката на браузъра PWA. Първият е този на Джейк Арчибалд Готов ли е сервизният работник ? който удобно показва състоянието на готовност за PWA на основните браузъри, плюс интернет на Samsung.

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

Таблицата Can I Use Service Workers потвърждава, че всички основни браузъри поддържат PWA. Той също така илюстрира поддръжката на PWA за няколко алтернативни настолни браузъри и мобилни браузъри.

Разбийте го още малко:

  • Настолен браузър (Пълна поддръжка): Chrome, Firefox, Opera, Edge, Safari
  • Настолен браузър (частична поддръжка/остаряла версия): Браузър QQ, браузър Baidu
  • Мобилен браузър (пълна поддръжка): Chrome, Firefox, Safari, UC Browser, Samsung интернет, Mint Browser, Wechat
  • Мобилен браузър (частична поддръжка/остаряла версия): QQ браузър, Android браузър, Opera Mobile

Така че всички основни браузъри поддържат PWA. Microsoft Edge и Safari са най -новите допълнения в пълния списък с поддръжка. Обратно, и QQ Browser, и Baidu Browser сега използват остарели версии и като такива са попаднали на второто ниво.

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

Сега, когато знаете кой браузър да използвате, можете да помислите за търсене и инсталиране на PWA. За този пример ще използвам Samsung Galaxy S8 с Google Chrome.

Прогресивните уеб приложения са навсякъде. Много компании са адаптирали своите сайтове и услуги, за да предложат версия на Progressive Web App. В много случаи за първи път ще срещнете PWA, когато се насочите към началната страница или мобилния сайт на услугата, което задейства Добави към началния екран диалогов прозорец.

Вижте видеото по -долу, за да видите какво се случва, когато посетите Мобилен сайт Twitter .

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

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

Освен това през януари 2019 г. Chrome 72 за Android се доставя с Trusted Web Activity (TWA). TWA позволява разделите на Chrome да се отварят в самостоятелен режим. Това от своя страна позволява на PWA да се включват в магазина за приложения на Google Play. Първите няколко PWA, които се появиха в Google Play, бяха Twitter Lite , Instagram Lite и Google Maps Go , с повече настроени да се появяват с течение на времето.

Галерия с изображения (2 изображения) Разгъване Разгъване Близо

Ще заменят ли прогресивните уеб приложения родните приложения?

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

Поне не засега.

как да инсталирате windows от usb

PWA обаче работят. Данните, налични в PWA Stats, също подкрепят това. Ето няколко интересни числа, които илюстрират как PWA променят взаимодействието ни с често използвани уебсайтове:

  • Trivago отбеляза 150 % увеличение на ангажираността на потребителите, които добавят своята PWA към началния екран.
  • Началната страница на Forbes „PWA“ се зарежда напълно само за 0,8 секунди, докато импресиите на посещение са нараснали с 10 %. PWA на Forbes също видя, че продължителността на потребителските сесии се удвоява.
  • Twitter Lite отбеляза 65 % увеличение на страниците на сесия, с огромно 75 % увеличение на туитовете. Също така е интерактивен „за по -малко от 5 секунди през 3G“.
  • Alibaba отбеляза 76 % увеличение на мобилните реализации.

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

Дял Дял Туит електронна поща Ръководство за начинаещи по анимиране на речта

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

Прочетете Напред Свързани теми За автора Гавин Филипс(945 статии са публикувани)

Гавин е младши редактор за Windows и обяснени технологии, редовен сътрудник на наистина полезен подкаст и редовен рецензент на продукти. Той има бакалавърска степен „Съвременно писане“ с дигитални арт практики, ограбен от хълмовете на Девън, както и над десетилетие професионален опит в писането. Той се радва на обилно количество чай, настолни игри и футбол.

Още от Гавин Филипс

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате