Съдържание
- Изкачването на PWA
- PWA в действие днес
- Инсталация
- Офлайн и незабавно стартиране
- Първокласно изживяване
- Магазини за приложения
- Интеграция на платформата
- Предизвикателства за дизайна и UX
- Годината на PWA
Точно както отзивчивият уеб дизайн запълни разликата между десктоп и мобилни сайтове преди няколко години, прогресивните техники за уеб приложения в момента запълват пропастта между мрежата и света на приложенията. С бързото сближаване на потребителския опит от настолни към мобилни приложения изглежда, че се развива много по-лъскав, по-ефективен интернет - макар и неизбежно не без някои значителни промени в неговия основен генетичен код.
- Как да изградим прогресивно уеб приложение
Очевидно има някои значителни селективни натиски, които движат това. На първо място, създаването на собствени приложения за всяка ниша не е непременно ефективно използване на ресурси: потребителите в крайна сметка получават стотици големи приложения, които губят честотна лента и ценно дисково пространство и компаниите харчат много пари, създавайки приложения само за да бъдат изоставени след първите им версии. И повечето от тези приложения са просто задвижвани от уеб съдържание: информация, идваща от уеб услуги или система за управление на съдържанието.
Определението за прогресивно уеб приложение не е конкретно. PWA е просто уеб приложение, което използва няколко нови API и възможности в уеб платформата, използвайки прогресивно подобрение, за да предложи подобно на приложението изживяване на всяка платформа със същата кодова основа. Това е по-скоро набор от най-добри практики и използване на API, който създава отлично приложение, подобно на приложението за вашите потребители, така че не е като да имате или нямате PWA; по-скоро вашият сайт е горе-долу PWA.
На път ли сте да започнете да изграждате нов сайт? Опитайте да използвате конструктор на уебсайтове. И не забравяйте да получите поддръжката, от която се нуждаете, и от прилична уеб хостинг услуга. Или за нещо малко по-различно, вижте нашето ръководство за най-доброто съхранение в облак.
Изкачването на PWA
Докато името PWA е измислено през 2015 г. в статията Escaping Tabs Without Losing our Soul от Алекс Ръсел, работещ в Google за екипа на Chrome, пътуването им всъщност не започва там. Преди имахме HTML приложения (HTA), които бяха създадени от Microsoft през 1999 г., заедно с много други платформи за уеб приложения от Nokia, BlackBerry и други компании. Тогава, през 2007 г., Стив Джобс представи единствения по това време начин за създаване на приложения за оригиналния iPhone: PWA, макар и с различно име. Chrome стартира от там, подобри API-тата няколко години по-късно и измисли името на PWA.
С толкова много предишни неуспешни опити, опитващи се да донесат уеб съдържание в света на приложенията, защо смятаме, че ще работи сега? Е, преди всичко, зависи от компаниите, които сега работят и популяризират технологиите зад PWA, като Microsoft, Google, Apple и Mozilla, за да назовем само няколко. Също така, производителността на уеб платформата достигна точка, при която няма забелязана разлика, когато сравнявате добре проектиран PWA с родно приложение. Тези условия никога не са съществували досега и това е една от причините уеб общността да реши, че е дошъл моментът за PWA.
PWA в действие днес
Днес PWA са напълно функционални и могат да се инсталират на:
- Android с повечето браузъри, като Chrome предлага най-доброто изживяване
- iOS със Safari
- Chromebook
- Windows 10 от Microsoft Store
- Представени телефони с KaiOS - вилица от Firefox OS - в момента са достъпни за милиони потребители главно в Индия
По-късно тази година поддръжката идва и за macOS, Windows и Linux чрез Chrome. Наличен е днес като експериментален флаг „Desktop PWA“, ако искате да го изпробвате сега. Инсталирането на Windows на Edge без използването на магазина също идва по-късно, въпреки че не е дефинирана конкретна времева рамка.
Ако препрочетете списъка, можете да видите, че всяка платформа има или предстои да има поддръжка за напълно инсталируеми PWA през следващите месеци. И тъй като PWA е просто уебсайт с функции отгоре, които ще се активират само в съвместими браузъри, можем дори да кажем, че е съвместим с всички браузъри от основната си функционалност.
Също така, PWA в момента се генерират от повечето CLI за различни рамки, включително Angular 6+ CLI, React Create App, PWA Starter Kit от Polymer и Preact CLI. И накрая, екипът на Ionic Framework излезе с идеята за Capacitor, заместител на Cordova с отворен код, който прави възможни родните PWA във всеки магазин за приложения.
Инсталация
Един от критичните аспекти на PWA е инсталирането на приложението. Този процес се извършва в две незадължителни стъпки: изтеглянето и съхранението офлайн на файловете на приложението и инсталирането на иконата в операционната система. Тъй като и двете стъпки не са задължителни, можете да предложите офлайн преживяване в браузъра или можете да предложите икона без офлайн инсталация. Но истинската PWA трябва да включва и двете: тя трябва да се обслужва с TLS под HTTPS и потребителят ще реши дали ще я използва в браузъра или в собствената си инсталирана икона.
Офлайн и незабавно стартиране
Мозъкът на PWA е обслужващият работник, JavaScript файл, инсталиран на устройството на потребителя, който отговаря за изтеглянето на файловете на приложението, съхраняването им в кеша и по-късно обслужването им, когато е необходимо. След като сервизният работник е инсталиран, той действа като мрежов прокси за всеки ресурс, от който се нуждае уеб приложението: той може да реши да го извлече от мрежата или да го достави от локалния кеш, което прави приложението достъпно офлайн и също достъпно само за няколко милисекунди, дори ако потребителят има връзка, имитирайки стартиране на собствено приложение.
За да инсталирате сервизен работник, вашият HTML документ ще трябва да включва нещо като:
if (’serviceWorker’ в навигатор) navigator.serviceWorker.register ("sw.js");
Това ще инсталира файла "sw.js" на устройствата на потребителите за текущата папка в текущия домейн - концепция, известна като обхват. След като бъде инсталиран, следващите посещения на всеки URL в обхвата му ще се управляват от този сервизен работник.
Да приемем, че имаме PWA с четири файла: index.html, app.js, app.css и logo.png. Първото нещо е да инсталирате тези файлове в кеша във файла sw.js.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; себе си. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache"). then (cache => cache.addAll (resources)));});
Тогава, за да може PWA винаги да се обслужва от кеша, трябва да прослушаме събитието за извличане в сервизния работник и да вземем решение за използване на кеш политиката, като кеш първо със следния фрагмент.
self.addEventListener ("извличане", e => e.respoWWith (caches.match (e.request). след това (res => res);
В този случай всеки път, когато потребителят има достъп до PWA (както от браузър, така и от инсталирана икона), двигателят ще получава файловете от кеша. Предимство на PWA спрямо родните приложения е, че устройствата не трябва да изтеглят всички файлове отново, когато има промяна, а само файлът, който се е променил с прозрачен процес. Също така все още можем да изтегляме части от приложението при поискване.
Но предизвикателството е как да разберете кои файлове са актуализирани на сървъра, за да можете да ги замените в кеша? Ако не искате да пишете служител на ниско ниво, който да управлява това, можете да използвате библиотеката Workbox с отворен код, която ще ви помогне при генерирането на работника на услугата и манифеста за ресурси, за да актуализирате инсталирания пакет.
Имайте предвид, че файловете на вашия PWA ще бъдат изтрити, ако устройството има натиск за съхранение, освен ако не поискате постоянно съхранение, ако е налично:
if (‘съхранение’ в навигатор && ’persist’ в navigator.storage) navigator.storage.persist ();
В Chrome и повечето браузъри за Android приложението ви не може да използва повече от пет процента от наличното пространство; на iOS това е 50MB (близо 50MB) само за хост; в Edge е променлива според общия размер на паметта, а в Windows Store е неограничен.
Първокласно изживяване
Ние имаме мозъка и сега е време за сърцето: уеб приложението манифест. Целта на превръщането на уебсайт в PWA е не само да се гарантира, че е достъпен бързо или докато е офлайн, но и да му позволи да има своя собствена икона в операционната система и да предложи изцяло самостоятелно изживяване като всяко друго инсталирано приложение.
Манифестът е JSON файл, който дефинира метаданни за PWA, използван от браузър или магазин за приложения, за да дефинира поведението на инсталацията.
Файлът дефинира няколко свойства като метаданни за вашата PWA. Всяка операционна система ще прочете тези свойства и ще направи всичко възможно, за да съответства на предпочитаното от вас изживяване. Например Android ще прочете „display: standalone“ и ще създаде нормално приложение. С ’display: minimal-ui’ ще създаде преживяване с видим URL и TLS сертификат - полезно за приложения, чувствителни към сигурността. С ’display: fullscreen’ той създава напълно завладяващи приложения без лента на състоянието или видим бутон за връщане назад. Набор от икони и цветове определя как ще изглеждат началните екрани или лентите със заглавия за прозореца на приложението ви.
Има някои генератори на манифести, като Web App Manifest Generator или PWA Builder, които също ще преоразмерят иконата вместо вас в различни разделителни способности, ако предоставите такава с висока разделителна способност (минимум 512 пиксела).
Когато файлът на манифеста е свързан във вашия HTML документ, потребителите ще могат да инсталират приложението, като използват различни техники в зависимост от браузъра, обикновено наричани Добавяне към началния екран, Инсталиране или просто Добавяне. Ако вашият PWA може да се обхожда от Bing, Microsoft автоматично ще го добави към магазина на Microsoft, така че потребителите на Windows 10 ще могат да го инсталират от там.
На някои операционни системи вашата PWA ще има способността да улавя връзки. Това означава, че след като потребителят е инсталирал приложението, всеки URL адрес в обхвата на вашия манифест ще бъде отворен в границите на вашето приложение, а не в браузъра, независимо дали се появява в браузъра или други приложения като WhatsApp, Facebook или имейл.
Ако преминете изискванията на PWA, които дефинираме тук, някои платформи ще предлагат емблема за околната среда (малка икона, обикновено в лентата за URL адреси, указваща, че мрежата може да се инсталира) или банер за уеб приложение. Ако предпочитате, можете също да добавите свой собствен потребителски бутон за инсталиране, като използвате следния фрагмент:
window.addEventListener ("beforeinstallpr ompt", функция (e) {e.prompt (); // ще се покаже собствената подкана за инсталация})
Ако PWA е инсталиран, събитието ‘appinstalled’ ще бъде изстреляно върху обекта на прозореца, за да можете да проследявате статистически данни, които го слушат.
Магазини за приложения
Едно от основните предимства на инсталирането от браузър е възможността да се избегне процесът на одобрение на магазина за приложения или да се наложи да платите, за да бъдете издател. Това идва с очевидни предимства, като незабавно публикуване, създаване на частни приложения за компании или приложения, които не трябва да се приемат в магазините.
Но някои компании искат да бъдат в магазина. От днес единствените магазини, които официално приемат PWA, са Windows Store и kaiOS Store. За щастие, с инструменти като Capacitor (в момента в Alpha) или PWA Builder, можем да създаваме и подписваме естествени пакети и за други платформи.
Има някои PWA, които вече са публикувани в Google Play Store, като Twitter Lite и Google Maps Go, понастоящем се изпълняват по поръчка. Chrome ще предложи решение от Chrome 68 чрез доверени уеб дейности. От този момент ще можем да създадем пакет за Android (APK) с стартер към нашия PWA и да го качим в магазина. За Microsoft Store на Windows 10 сайтът PWA Builder в момента помага за генерирането на APPX Windows 10 пакет. С помощта на уеб изглед може да можете ръчно да създадете приложение за iOS за App Store, но бъдете изключително внимателни относно правилата на магазина.
Интеграция на платформата
Чрез прилагане на техники за прогресивно подобрение ще можете да използвате много функции, включително известия за натискане, достъп до камера и микрофон, геолокация, сензори, плащания, диалогови прозорци за споделяне и офлайн съхранение. Всички тези функции се изпълняват директно в модела за защита на браузъра, включително диалоговите прозорци.
Можем също така да комуникираме с други приложения чрез URI схеми, като например отваряне на Twitter, YouTube или WhatsApp чрез техните URL адреси или персонализирани URI, като whatsapp: //.
И накрая, когато създаваме собствени PWA, които се публикуват в магазина с помощта на кондензатор или в Microsoft Store, ще можем да се свържем към собствени API, които ще ни позволят да изпълним практически всеки естествен код. Тази интеграция с Windows 10 включва хардуерен достъп, но също така и интеграция с операционната система, като предлага опции като Pin to Start. Например Twitter PWA ви позволява да прикачите всеки потребител към началния екран.
Предизвикателства за дизайна и UX
Проектирането на PWA има уникални предизвикателства, така че е важно да отделите известно време за проучване, тестване колкото е възможно повече и да вземете предвид следното:
- Потребителите ще очакват подобни приложения.
- Процесът на инсталиране е все още нов, така че трябва да положим допълнителни усилия, за да обясним как да инсталираме приложението.
- Актуализирането на приложението във фонов режим без взаимодействие с потребителя е страхотно, но също така добавя някои предизвикателства за UX.
- На работния плот отзивчивият уеб дизайн има нова граница, тъй като прозорците на PWA могат да бъдат малки, много по-малки от мобилния прозорец. Това означава, че трябва да създадем конкретни изгледи или малки джаджи за този формат, както се вижда в Chrome OS днес.
- Push известията трябва да добавят стойност само за потребителя, така че се научете да питате в точния момент и не губете възможността да изпращате съобщения, които не са полезни или интересни.
- Трябва да проектираме за уеб изпълнение и за офлайн достъп.
Годината на PWA
С добавянето на iOS и настолни компютри тази година, PWA са навсякъде днес. Но трябва да помним, че тяхното пътуване тепърва започва, така че очаквайте чести промени и не забравяйте да се актуализирате с най-новите техники и идеи, за да осигурите отлично потребителско изживяване, докато платформата се развива.
Тази статия първоначално е публикувана в брой 308 от нето, най-продаваното списание в света за уеб дизайнери и разработчици. Купете брой 308 тук или абонирайте се тук.
