9 невероятни тайни на PWA

Прогресивни уеб приложения (PWA) са нова граница в отзивчив уеб дизайн , и те нарастват популярността си. Поддръжката на PWA започна с Chrome на Android и вече е достъпна за повечето други браузъри за Android, като Opera, Firefox, Samsung Internet и UCWeb, както и за iPhone и iPad от iOS 11.3 и Edge за Windows и Chrome за настолни операционни системи.

кибер понеделник амазонка 50 инчов телевизор

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



01. Преки пътища WebAPK срещу Android

През 2017 г. Chrome пусна нова функция за потребителите на Android: WebAPK. Сега, когато вашите потребители инсталират вашия PWA (ако отговаря на изискванията), сървърът на Google Play ще създаде APK (Android Package, роден контейнер за приложения) в движение и ще го инсталира в устройството, сякаш идва от Play Store . Вашият потребител не трябва да активира несигурни източници или да докосва други настройки.



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

Ако вашият PWA не отговаря на всички изисквания, услугата Play не работи, има проблем с връзката или се използва друг браузър за Android като Firefox или Samsung Internet, ще бъде създаден стандартен пряк път към началния екран. Тази икона ще бъде с марка на браузъра от Android 8+.



WebAPK също така дава хубава, но опасна функция, за която трябва да знаете: PWA ще притежава домейна и пътя в границите на Android OS. Въз основа на атрибута на обхвата на вашия манифест на уеб приложение, всяка връзка, която потребителят получи към този обхват, ще бъде препратена към приложението ви на цял екран, а не към браузъра, което означава, че трябва да обърнете внимание на URL адресите, които използвате.

Да предположим, че имате PWA, обслужващ мобилни потребители и той е в основната папка на вашия домейн. Когато приложението бъде инсталирано чрез WebAPK, целият домейн вече ще бъде собственост на PWA. Ако имате анкета в / анкета, която споделяте чрез Facebook, или PDF с условия и условия, които изпращате на потребителите си на адрес /terms.pdf, ОС ще отвори PWA, а не браузъра, когато щракнете върху тези връзки. От съществено значение е да проверите дали вашата система за маршрутизация PWA знае за тези URL адреси и как да ги обслужва и ако не, да ги отваря в браузър с различен обхват.

02. Създайте персонализиран банер за инсталиране на уеб приложение

Ние можем



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

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

Първата стъпка е да отмените появата на банера и да запазите обекта на събитието за по-късна употреба:

// global variable for the event object var installPromptEvent; window.addEventListener('beforeinstallprompt', function(event) { event.preventDefault(); installPromptEvent = event; });

Следващата стъпка е да предоставите потребителски интерфейс, който да обясни предимствата на инсталирането или бутон Инсталиране. Този потребителски интерфейс ще извика следващата ни функция:

function callInstallPrompt() { // We can't fire the dialog before preventing default browser dialog if (installPromptEvent !== undefined) { installPromptEvent.prompt(); } }

03. Споделяйте съдържание от вашия PWA

В съвместими браузъри API за уеб споделяне ще задейства добре познатия диалогов прозорец за споделяне от операционната система

В съвместими браузъри API за уеб споделяне ще задейства добре познатия диалогов прозорец за споделяне от операционната система

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

function share() { var text = 'Add text to share with the URL'; if ('share' in navigator) { navigator.share({ title: document.title, text: text, url: location.href, }) } else { // Here we use the WhatsApp API as fallback; remember to encode your text for URI location.href = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(text + ' - ') + location.href } }

04. Анализ на проследяване

Когато имате PWA, ще искате да проследявате колкото се може повече събития, така че нека да разгледаме всичко, което в момента можем да измерим. Можете да използвате API на Google Analytics или други аналитични инструменти, за да проследявате тези събития по-късно.

window.addEventListener('appinstalled', function(event) { // Track event: The app was installed (banner or manual installation) }); window.addEventListener('beforeinstallprompt', function(event) { // Track event: The web app banner has appeared event.userChoice.then(function(result) { if (result.outcome === 'accepted') { // Track event: The web app banner was accepted } else { // Track event: The web app banner was dismissed } }); });

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

Най-простият начин да направите това е чрез атрибута start_url на манифеста, добавяйки проследяващо събитие в URL адреса, което може автоматично да се използва като начало от скрипт на Google Анализ, като например:

start_url: '/?utm_source=standalone&utm_medium=pwa'

Също така, следният скрипт ни оставя булева стойност, посочваща дали потребителят в момента е в браузър (вярно) или самостоятелен режим на приложение (невярно):

var isPWAinBrowser = true; // replace standalone with fullscreen or minimal-ui according to your manifest if (matchMedia('(display-mode: standalone)').matches) { // Android and iOS 11.3+ isPWAinBrowser = false; } else if ('standalone' in navigator) { // useful for iOS < 11.3 isPWAinBrowser = !navigator.standalone; }

След това, ако използвате push известия, можете да проследявате няколко събития в сервизния работник, като например:

self.addEventListener('push', function(e) { // Track event: Push Message Received }); self.addEventListener('notificationclick', function(e) { // Track event: Push Message Clicked, you can read e.action.id to track actions }); self.addEventListener('notificationclose', function(e) { // Track event: Push Message Dismissed });

05. Създайте съвместим iOS PWA

Когато правите PWA на iOS, винаги проверявайте дефиницията на лентата на състоянието си, което ще създаде различни преживявания на лентата на състоянието

Когато правите PWA на iOS, винаги проверявайте дефиницията на лентата на състоянието си, което ще създаде различни преживявания на лентата на състоянието

Докато мнозина смятат, че поддръжката на PWA е на път да кацне за първи път на iOS 11.3, истината е, че концепцията - макар и с различно име - беше представена от Стив Джобс преди повече от десет години на WWDC 07. Ето защо iOS поддържаше началния екран и офлайн приложения за известно време, използвайки наследени техники. Но от iOS 11.3 той ще започне да поддържа същите характеристики като Android.

Ако все пак искате да предложите опит за инсталиране преди iOS 11.3, трябва да добавите мета тагове или да използвате polyfill, създаден от този автор на https://github.com/firtman/iWAM

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

  1. Иконите в iOS трябва да са квадратни и непрозрачни, за да се избегнат проблеми с потребителския интерфейс. Не използвайте същата икона, която имате на Android. Използвайте 120x120 и 180x180 за iPhone.
  2. Ако имате SPA или свързвате към други страници от обхвата си, бъдете внимателни с навигацията, тъй като потребителите на iOS нямат начин да се върнат назад или напред, ако не предоставите навигационни връзки в потребителския си интерфейс. Жестове с плъзгане не работят на PWA на цял екран.
  3. От първите версии на iOS 11.3, OS презарежда PWA при всеки достъп до приложението, така че ако потребителят трябва да излезе от приложението, за да се върне по-късно (например за двупосочен процес на удостоверяване), не забравяйте приложението ще започне от нулата по подразбиране.

06. Синхронизиране на данни във фонов режим

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

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

navigator.serviceWorker.ready.then(function(reg) { reg.sync.register('myTag') });

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

self.addEventListener('sync', function(event) { if (event.tag === 'myTag') { event.waitUntil(doAsyncOperationForMyTag()); } });

07. Социални мрежи и псевдо браузъри

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

Например, Facebook използва WebView в приложенията за Android и iOS, за да предложи изживяване в браузъра в приложението, когато потребителите щракнат върху връзка. На Android повечето WebViews не поддържат обслужващи работници и не могат да инсталират вашия PWA, така че когато потребителят отвори вашето съдържание от Facebook, вашият PWA ще действа така, сякаш е несъвместим браузър без кеширани файлове или подробности за сесията .

От iOS 11.3 WebView ще поддържа обслужващи работници, но ще бъде клонинг на същия PWA, който потребителят е използвал в Safari или дори в други псевдобраузъри, като Chrome или Firefox на iOS.

Следователно, ако рендирате инсталационен банер или диалогов прозорец за подсказка за инсталация, обясняващ стойността на инсталирането на вашето приложение, проверете дали сте в WebView, защото потребителят няма да може да следва вашите стъпки. Скрийте тази информация или поканете потребителя да отвори URL адреса в браузъра по подразбиране. Това се отнася за Facebook на Android, Facebook на iOS, Chrome на iOS и Firefox на iOS, наред с други приложения. Извършването на проверка на живо дали сте в WebView или не е сложно, но има Наличен помощен инструмент .

08. Тест на Android устройства и емулатори

Тестването на служители на услуги и Web App Manifest изисква https, с изключение на localhost. Въпреки че първоначално тестването на локални настолни компютри е добре, в един момент искаме да видим нашите PWA в действие на устройства с Android. Как можем да направим това? Достъпът до dev сървър от нашия телефон или емулатор на Android няма да работи, защото не е https и не е localhost от гледна точка на Android OS.

Решението се появява с Chrome Developer Tools. Ако отидем на chrome: // проверете и отворете емулатор или реално устройство с USB отстраняване на грешки, ще можем да активираме пренасочването на портове. Тогава http: // localhost на нашето устройство с Android ще бъде препратено към localhost на хост компютъра ни или на друг хост. С този трик Android ще визуализира правилно PWA по незащитена връзка. Имайте предвид обаче, че докато WebAPK ще създаде пакета и ще го инсталира, той може да не работи в самостоятелен режим.

09. Публикуване в магазини

PWA Builder е онлайн инструмент на Microsoft за създаване на съвместими с магазина PWA пакети за Windows 10 и други операционни системи

PWA Builder е онлайн инструмент на Microsoft за създаване на съвместими с магазина PWA пакети за Windows 10 и други операционни системи

Докато подходът на PWA не започна с мисълта за магазините, някои предложения, включително Twitter Lite и Google Maps Go в Play Store, започнаха да обслужват PWA в магазините. Ако това е нещо, което ви интересува, за да разпространявате своя PWA, без да го опаковате с Cordova, наличните опции са:

  • Магазин на Microsoft: Можете да създадете PWA за Windows 10, като използвате официалния инструмент от pwabuilder.com
  • Google Play Store: По време на писането, Доверените уеб дейности, достъпни на Canary Channel, ви позволяват да създадете приложение за Android, което просто отваря PWA, който притежавате, и го разпространява в магазина, създавайки подобно решение на WebAPK. Можете да научите повече тук .
  • Apple App Store: Понастоящем няма официални решения за разпространение на PWA, но WKWebView ще поддържа сервизни работници от iOS 11.3, така че няма да е трудно да се създаде проста обвивка за PWA. Въпросът е, дали Apple ще го одобри в магазина? Apple не иска решения, които са само уебсайтове с обвивка.

Тази статия първоначално е публикувана в брой 304 от нето , най-продаваното списание в света за уеб дизайнери и разработчици. Купете брой 304 тук или абонирайте се тук .

Свързани статии: