Основен / Изчислителна Техника

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

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

Обслужването както на потребители на светкавично бързи връзки в Сеул, така и на потребители в селските райони на Индия по остарял телефон, е най-новото предизвикателство за използваемост, а Progressive Web Apps са решението.

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

10 стъпки към ангажиращо потребителско изживяване

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

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

01. Сервирайте през HTTPS

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

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

Вашата обвивка на приложението е първото нещо, което се зарежда - първото нещо, което потребителят вижда. Той трябва да съществува изцяло във вашия индекс HTML документ, с вграден CSS, за да се гарантира, че се появява възможно най-бързо и потребителят ви не се взира в бял екран по-дълго от необходимото. Черупката на приложението е част от модела на прогресивно подобрение. Вашето приложение трябва да дава на потребителското съдържание възможно най-скоро и след това постепенно да го подобрява, когато се зареждат повече данни (вероятно JavaScript).

Примерът по-долу е взет от приложение React.js. Потребителят се представя с контур на приложението и индикатор за зареждане в index.html. След това, след като JavaScript се зареди и React се зареди, пълното приложение се изобразява в черупката.

    Chat
  // index.js ReactDOM.render( ,  document.getElementById('root') );

03. Регистрирайте сервизен работник

За да се възползвате от пълния спектър на PWA екстри (push известия, кеширане, подкани за инсталиране), ще ви е необходим сервизен работник.

За щастие те са доста лесни за настройка. По-долу първо проверяваме дали браузърът на потребителя поддържа сервизни работници. Тогава, ако е така, можем да продължим с регистрацията на файла на работника в услугата, наречен тук service ‑ worker.js . Обърнете внимание, че в този момент не се нуждаете от нищо специално в този файл - той може да бъде празен.

В примера по-долу обаче показваме как да използваме трите ключови събития от жизнения цикъл на работника в сферата на услугите. Те са „инсталиране“, когато потребителят за първи път посети вашата страница; „активиране“, точно преди регистрацията да завърши; и „извличане“, когато приложението прави мрежова заявка. Последният е важен за кеширане и офлайн възможности.

   if ('serviceWorker' in navigator) {   window.addEventListener('load', function() {   navigator.serviceWorker.register('service-worker.js').then(function(registration) {   // Registration was successful   console.log('Registered!');   }, function(err) {   // registration failed :(   console.log('ServiceWorker registration failed: ', err);   }).catch(function(err) {   console.log(err);   });   });   } else {   console.log('service worker is not supported');   }    // service-worker.js self.addEventListener('install', function() {   console.log('Install!'); }); self.addEventListener('activate', event => {   console.log('Activate!'); }); self.addEventListener('fetch', function(event) {   console.log('Fetch!', event.request); });

04. Добавете push известия

Сервизните служители позволяват на вашите потребители да получават push известия чрез уеб API на Push. За достъп до него можете да се включите self.registration.pushManager от файла на вашия сервизен работник. Тъй като изпращането на push известия зависи в голяма степен от настройката на вашия бекенд, ние няма да се потопим в него тук.

Ако стартирате приложение от нулата, услугата на Google Firebase се предлага с Firebase Cloud Messaging за относително безболезнени известия за натискане. Кодът по-долу показва как да се регистрирате за push известия чрез Push API.

navigator.serviceWorker.ready.then(function(registration) {   if (!registration.pushManager) {     alert('No push notifications support.');     return false;   }   //To subscribe `push notification` from push manager   registration.pushManager.subscribe({   userVisibleOnly: true //Always show notification when received   })   .then(function (subscription) {   console.log('Subscribed.');   })   .catch(function (error) {   console.log('Subscription error: ', error);   }); })

05. Добавете манифест на уеб приложение

За да направите приложението си инсталируемо, трябва да включите a manifest.json в основната директория на приложението. Можете да мислите за това като описание на вашето приложение, подобно на това, което бихте могли да изпратите в App Store. Включва икони, начален екран, име и описание.

Има и някои конфигурации за това как вашето приложение се появява, когато се стартира от началния екран на потребителя: Искате ли да покажете адресната лента в браузъра или не? Какъв цвят искате да бъде лентата на състоянието? И така нататък. Имайте предвид, че правилното manifest.json трябва да включва пълен спектър от размери на икони за различни устройства. Кодът по-долу е визуализация на някои от свойствата, които вашият манифест може да включва.

{   'short_name': 'Chat',   'name': 'Chat',   'icons': [   {   'src':'img/',   'sizes': '192x192',   'type': 'image/png'   }   ],   'start_url': '/?utm_source=homescreen',   'background_color': '#e05a47',   'theme_color': '#e05a47',   'display': 'standalone' }

06. Конфигурирайте подканата за инсталиране

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

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

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

window.addEventListener('beforeinstallprompt', e => {   console.log('beforeinstallprompt Event fired');   e.preventDefault();   // Stash the event so it can be triggered later.   this.deferredPrompt = e;   return false;   }); // When you want to trigger prompt: this.deferredPrompt.prompt();   this.deferredPrompt.userChoice.then(choice => {   console.log(choice);   }); this.deferredPrompt = null;

07. Анализирайте ефективността на приложението си

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

За целта полезен набор от показатели е системата RAIL. RAIL е това, което Google нарича „модел, ориентиран към потребителя“ - набор от насоки за измерване на ефективността на нашето приложение.

Съкращението означава „Отговор“ (колко време отнема на приложението ви да отговори на действията на потребителя), „Анимация“ (поддържане на скоростта на анимацията на 60 кадъра в секунда), „неактивност“ (използване на времето, когато приложението ви не прави нищо друго, за да зареди и кешира допълнителни активи) и Зареждане (зареждане на приложението ви за една секунда или по-малко).

Ето таблица със значими критерии за зареждане на приложения, предоставени от Меггин Кеърни, технически писател в Основи на Google Web .

Щракнете върху иконата в горния десен ъгъл, за да увеличите изображението

08. Одитирайте приложението си с Lighthouse

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

По-рано наричан Lighthouse и доставен като разширение за Chrome, от Chrome 60 той е част от Chrome DevTools, в раздела „Одити“. Това, което Lighthouse прави, е да стартира приложението ви при различни условия и да измери реакцията и успеха му в съответствие с насоките на PWA. След това ви дава резултат от 100. Той може едновременно да вкара приложението ви и в най-добрите практики в мрежата.

Следващият текст е списък на измерените стойности Лайтхаус. В употреба също показва описания.