На планетата има 6,8 милиарда души, от които 5,1 милиарда притежават мобилен телефон. И днес все по-голям процент от тези устройства са смартфони. Според скорошен Изследване на Pew Research Center , броят на потребителите, които имат достъп до интернет на своите смартфони, се е увеличил повече от два пъти през последните 5 години, както и броят на потребителите, които изтеглят и използват мобилни приложения . От тези, които използват интернет или имейл на телефоните си, повече от една трета влизат в мрежата предимно чрез преносимите си устройства.

Всъщност мобилните компютри стават все по-повсеместни ... и това е страхотно.

Освен, разбира се, когато не е така.

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

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

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

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

Мобилно уеб приложение срещу основно приложение срещу хибридно приложение

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

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

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

Но какъвто и избор да направите - независимо дали става дума за мобилно уеб приложение, естествено или хибридно приложение - бъдете внимателни, за да проучите адекватно и да потвърдите своите предположения. Като пример, за целите на този урок за разработка на мобилни уеб приложения, може да сте решили да разработите собствено мобилно приложение за електронна търговия, за да продавате вашите продукти. Но според Hubspot , 73% от потребителите на смартфони казват, че използват мобилната мрежа повече от местните приложения, за да пазаруват ... Така че, в този случай може да сте заложили на грешен кон.

Но какъвто и избор да направите - независимо дали става дума за мобилна мрежа, естествено или хибридно приложение - бъдете внимателни, за да проучите адекватно и да потвърдите вашите предположения.

И тогава, разбира се, има практически съображения за време и бюджет. Както казва една от любимите ми поговорки, 'По-бързо, по-добре, по-евтино ... изберете две' . Въпреки че ограниченията във времето за пускане на пазара и разходите са от първостепенно значение при разработването на уеб приложения, от решаващо значение е да не се прави компромис с прекалено голямо качество на процеса. Доста трудно е да се възстанови доверието на потребител, който е имал лош първи опит.

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

s corp c corp llc разлики

Разработката на мобилни уеб приложения изисква подробно планиране

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

Друг често срещан проблем за начинаещите разработчици на мобилни уеб приложения е да се предположи, че уеб-базираният код за настолен браузър ще работи „както е“ в мобилния браузър. Не. Там най-категорично са различия и ако не сте наясно с тях, те определено могат да ви ухапят. Функцията за автоматично пускане на HTML5tag например не работи в мобилни браузъри. По същия начин CSS transition и opacity свойствата не се поддържат (или поне не се поддържат постоянно) в повечето мобилни браузъри днес. Ще имате проблеми и с някои методи на уеб API на мобилна платформа, като например API за поточно предаване на музика SoundCloud, който изисква Adobe Flash, който не се поддържа от повечето мобилни устройства.

Често срещано събитие за начинаещи разработчици на мобилни уеб приложения е да се уверите, че базираният в мрежата код за настолен браузър ще работи „както е“ в мобилния браузър.

Особено усложняващ фактор при разработването на мобилни уеб приложения е, че продължителността на живота на мобилните устройства обикновено е много по-кратка от тази на настолните дисплеи (средната продължителност на живота на мобилния телефон в САЩ е около 21 месеца). Тези по-кратки срокове на живот на устройствата, придружени от постоянни издания на нови мобилни устройства и технологии, дават непрекъснато променящ се пейзаж на устройствата, които трябва да бъдат насочени. Докато работата в браузър донякъде облекчава този проблем, като ви предпазва от редица специфични за устройството проблеми, все пак ще трябва да проектирате изглед на базата на браузър, който поддържа много различни разделителни способности на екрана (както и да се коригира по подходящ начин за пейзажна и портретна ориентация ).

Трябва да се помисли и за поддържане на дисплеите на Retina на Apple (дисплеи с течни кристали, които имат достатъчно висока плътност на пикселите, за да не може човешкото око да разпознава отделни пиксели на типично разстояние на гледане). Няколко продукта на Apple - включително iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini и iPad Air - предлагат дисплеи Retina. По-специално за мобилното уеб приложение е важно да знаете, че Retina дисплеят прави изображенията с ниска разделителна способност (които обикновено се сервират на мобилни устройства) да изглеждат размити и пикселация може да се случи. Най-доброто решение за разработка на приложения в тези случаи е сървърът да разпознае, че заявката идва от устройство Retina и след това да предостави на клиента алтернативно изображение с по-висока разделителна способност.

Ако искате да използвате някои от страхотните неща за HTML5, не забравяйте да проверите предварително, че търсената от вас функционалност се поддържа в целия пейзаж на устройството, който клиентите ви вероятно ще използват. Например в iOS 6 и по-нови версии няма поддръжка за навигатора getUserMedia функционалност, тъй като камерата е достъпна само чрез собствени приложения. Два страхотни ресурса за проверка на това, което се поддържа от конкретни устройства и браузъри, са caniuse.com и html5test.com .

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

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

/* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }

Оптимизиране на вашето мобилно уеб приложение за ефективност

„ОМГ, това нещо е толкова много бавно!“ Като разработчик на мобилно уеб приложение това вероятно са последните думи, които някога искате да чуете от някой от вашите потребители. Следователно трябва да помислите внимателно как да намалите и оптимизирате всеки байт и трансфер на сървър, за да намалите времето за изчакване на потребителя. Нереалистично е да очаквате, че прехвърлянията винаги ще се извършват през WiFi мрежа и трябва да знаете това 60% от мобилните потребители на мрежата казват, че очакват сайт да се зареди на мобилния им телефон за 3 секунди или по-малко (източник). По същия начин Google установи, че на всеки допълнителни пет секунди от времето за зареждане трафикът спада с 20% (и също така си струва да се отбележи, че търсачките гледат на времето за зареждане като част от изчисляването на качествения рейтинг на страницата).

60% от потребителите на мобилна мрежа казват, че очакват даден сайт да се зареди на мобилния им телефон за 3 секунди или по-малко.

Като част от този урок за разработка на мобилни уеб приложения, ето няколко съвета, които могат да помогнат за оптимизиране на работата на вашите мобилни уеб приложения и минимизиране на латентността:

• Оптимизация на изображението. Известно е, че времето за зареждане на изображението е един от най-големите проблеми с производителността, засягащ зареждането на страниците на мобилни устройства. Използване на онлайн оптимизатори на изображения, като например smushit.com , може да бъде полезно при решаването на този проблем.
• Компресия на код. Компресирането на вашите JavaScript и CSS файлове, в зависимост от количеството код, което имате, може потенциално да окаже значително влияние върху производителността.
• Заявки към база данни.
  • Някои браузъри за мобилни устройства не приемат толкова много бисквитки, колкото браузърите за настолни компютри, което може да доведе до необходимост от изпълнение на още повече заявки от обикновено. Следователно кеширането от страна на сървъра е особено важно, когато се поддържат клиенти на мобилни уеб приложения.
  • Не забравяйте да използвате подходящи филтри, за да изключите инжектирането на SQL заявки, които иначе биха могли да застрашат сигурността на вашия сайт и сървър.
• Мрежи за доставка на съдържание (CDN). Ако планирате да предоставите много видеоклипове, изображения, аудио файлове или други видове медии, силно се препоръчва използването на CDN. Някои от най-често срещаните търговски CDN включват Amazon S3 , Microsoft Windows Azure , и MaxCDN . Предимствата от използването на CDN са многобройни и включват:
  • Подобрена производителност при изтегляне. Използването на ресурси на CDN ви позволява да разпределите натоварването, да спестите честотна лента и да увеличите производителността. По-добрите CDN предлагат по-висока наличност, по-ниска латентност на мрежата и по-ниска загуба на пакети. Освен това много CDN осигуряват глобално разпределена селекция от центрове за данни, позволявайки изтегляне от сървър по-близо до местоположението на потребителя (в резултат на по-малко мрежови скокове и по-бързо изтегляне).
  • Още едновременни изтегляния. Обикновено браузърите ограничават броя на едновременните връзки до един домейн, след което допълнителните изтегляния се блокират, докато завърши едно от предишните изтегляния. Често можете да видите това ограничение в действие, когато изтегляте много големи файлове от един и същ сайт. Всеки допълнителен CDN (в различен домейн) позволява допълнителни едновременни изтегляния.
  • Подобрена аналитика. Много търговски CDN осигуряват отчети за използването, които могат да допълнят вашия собствен анализ на уебсайтове и които могат да предложат по-добро количествено определяне на гледанията и изтеглянията на видеоклипове. GTmetrix например има отличен инструмент за отчитане на уебсайтове за наблюдение и оптимизиране на източниците, заредени на вашия сайт.

Инструменти за разработка на мобилни уеб приложения

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

Избор на подходящата рамка за мобилни уеб приложения на JavaScript

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

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

Друга алтернатива, Sencha Touch , бързо набира и пазарен дял. Той предлага отлична производителност като цяло и помага за създаването на мобилен уеб потребителски интерфейс, който до голяма степен изглежда и се чувства като роден. Неговата пълнофункционална библиотека с джаджи е базирана на Sencha’s ExtJS JavaScript библиотека.

Ето някои ключови разлики, които трябва да имате предвид при сравняване на jQuery Mobile и Sencha Touch:

• Погледнете и усетете. Най-общо казано, външният вид на приложението Sencha Touch е по-отчетлив и превъзхожда този на мобилното приложение jQuery, но е важно да се помни, че подобни реакции са склонни да бъдат силно субективни.
• Разширяемост. jQuery Mobile предлага много разширения на трети страни и по своята същност е проектиран да бъде силно разширяем, докато Sencha Touch в момента е много по-скоро „затворена“ рамка.
• Поддръжка на устройство. Понастоящем jQuery Mobile е насочен към по-голям разрез на устройства от Sencha Touch.
• HTML „срещу“ JavaScript. jQuery е до голяма степен ориентиран към HTML (т.е. разширяване и манипулиране на съществуващ HTML в JavaScript), докато Sencha Touch кодирането е изцяло базирано на JavaScript. (Това е пример, между другото, за набора от умения на вашия екип за разработка, който е важно да се вземе предвид, когато правите своя технологичен избор.)
• Външни зависимости. jQuery mobile изисква jQuery и jQuery UI за манипулиране на DOM, докато Sencha Touch няма външни зависимости.
• Крива на обучение. Повечето разработчици намират, че времето за увеличаване с jQuery е по-малко от това на Sencha Touch, може би подхранвано от големия процент уеб разработчици, които вече са запознати със стандартните библиотеки jQuery.

Адаптивни рамки и мобилни уеб приложения

Все по-голям брой отзивчиви рамки започнаха да се появяват през последните години, като две от най-популярните в момента са Bootstrap и Фондация . Накратко, отзивчивите рамки опростяват и рационализират уеб-базиран отзивчив UI дизайн и внедряване, капсулиране на най-често срещаните оформления и парадигми на потребителския интерфейс в рамка за многократна употреба, оптимизирана за изпълнение. Основно базирани на CSS и JavaScript, много от тези рамки са с отворен код, безплатни за изтегляне и лесно персонализирани. Освен ако нямате изключително специфичен набор от изисквания, вероятно използването на една от тези рамки ще намали нивото на усилие за проектиране и внедряване на вашето мобилно уеб приложение.

s corp и c corp

Разглеждайки двете водещи опции, Bootstrap и Foundation, някои от основните разлики, които трябва да се вземат предвид, включват:

• Насочени платформи. Въпреки че Bootstrap поддържа мобилни, таблетни и настолни устройства, той е ориентиран предимно към настолна употреба. Фондацията, от друга страна, е предназначена за почти всички размери и типове екрани.
• Съвместимост на браузъра. Bootstrap е съвместим с IE7 или по-нова версия, докато Foundation е съвместим само с IE9 или по-нова версия.
• Разнообразие от оформления и компоненти. Bootstrap има значително по-голяма колекция от елементи на потребителския интерфейс, отколкото се предлага от Foundation.
• Автоматично преоразмеряване. С Foundation мрежата се свива и разтяга в съответствие с текущата височина и ширина на браузъра, докато Bootstrap поддържа само предварително определен набор от размери на мрежата въз основа на стандартен набор от размери на екрана.

Отстраняване на грешки и тестване на мобилни уеб приложения

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

В този контекст едно ясно предимство на мобилната уеб разработка (в сравнение с разработката на собствени приложения) е, че можете да използвате стандартни инструменти за разработчици, базирани на браузър, за отстраняване на грешки в приложението ви. Въз основа на моите лични предпочитания за дистанционно отстраняване на грешки, този, който препоръчвам в този урок за разработка на приложения, е Chrome с неговите DevTools. Други стандартни опции включват Firefox с Firebug или инструментите Dragonfly на Opera.

научете се да кодирате в c++

Някои от причините, които предпочитам Chrome със своите DevTools включват:

• Мобилен емулатор в DevTools на Chrome. Това е може би единствената достатъчна причина да изберете Chrome за отстраняване на грешки в мобилни уеб приложения. Основните характеристики включват емулация на събитията на докосване, подправяне на потребителски агент, регулиране на честотната лента на мрежата, замяна на геолокацията, замяна на ориентацията на устройството и CSS Media Type Emulation.
• Интерактивен редактор. Възможност за редактиране на JavaScript или CSS в движение.
• Превъзходен дебъгер на JavaScript. Позволява точки за прекъсване на DOM и предоставя възможност за профилиране на времето за изпълнение на вашия JavaScript код.
• Вградени JSON и XML зрители. Избягва необходимостта от всякакви приставки за проверка на отговорите на сървъра.
• Поддръжка на протокола Android Debug Bridge (ADB) директно през USB. Улеснява лесното създаване на екземпляр на отдалечена сесия за отстраняване на грешки. ( Тук е добър урок от Google за това как да започнете дистанционно отстраняване на грешки в Chrome.)
• Динамична проверка на ресурсите. Позволява ви да проверите локалните източници на данни на вашето приложение, включително бази данни IndexedDB или Web SQL, локално и сесийно съхранение, бисквитки и ресурси на кеша на приложения. Можете също така бързо да проверите визуалните ресурси на приложението си, включително изображения, шрифтове и таблици със стилове.

За да тествате оформлението и съвместимостта на кръстосаното сърфиране на вашето уеб приложение, можете също да използвате някои полезни онлайн инструменти, като например BrowserStack . Просто въведете URL адреса на вашето приложение, изберете браузъра, версията и операционната система и ще получите емулирания изглед (и скоростта на зареждане) на вашия сайт в тази среда. Друг полезен инструмент за тази цел е CrossBrowserTesting .

Увийте

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

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

Свързани: Направете приложението си печелившо - Използвайте мобилния анализ

Разбиране на основите

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

Мобилните уеб приложения са уеб приложения, оптимизирани за добро телефонно изживяване. Те не са мобилни приложения, а уебсайтове, написани в HTML / CSS и управлявани от браузър. Въпреки че те могат да бъдат проектирани да наподобяват усещането за приложения за смартфони, те нямат много общо.

Какво е родно приложение?

Родното приложение е приложение, написано за конкретна платформа, използващо специфични за платформата API.

Какво е хибридно приложение?

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

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

Родните приложения се пишат на специфични за платформата езици, като се използват API на платформата, като Java или Kotlin за Android и Objective C или Swift за iOS. Хибридните приложения се пишат с помощта на уеб технологии като HTML5 / CSS и Javascript

Родно приложение спрямо уеб приложение: Какво е въздействието върху потребителския опит?

Мобилното уеб приложение е уебсайт, оптимизиран за използване на мобилен телефон. Ако се направи добре, опитът е забележително като родно или хибридно приложение. Като пример вижте https://paperplanes.world/.

Защо естествените приложения обикновено осигуряват превъзходна производителност?

Хибридните приложения обикновено са бъги и по-бавни от родните приложения, тъй като естествените приложения не преминават през обръчи и слоеве контейнери, за да работят. Родните приложения са много по-ефективни. React Native обаче успя да промени играта.