Рідні додатки приречені (частина 1)

image

Віднині я не буду більше створювати рідні додатки. Всі мої додатки у подальшому будуть прогресивними веб-додатками (PWA, Progressive Web Apps). Це такі програми, які призначені для ще більш органічною роботи на мобільних пристроях, ніж рідні додатки.

Що я маю на увазі під «більш органічною роботою»? Велика частина веб-трафіку йде від мобільних пристроїв і користувачі встановлюють в середньому від 0 до 3 нових додатків в місяць. Це означає, що люди не витрачають багато часу на пошук нових додатків в App store, але вони проводять багато часу в мережі, де можуть знайти і використовувати ваш додаток.

Прогресивні веб-додатки починають свою роботу як будь-який інший веб-додаток, але коли користувач повертається в додаток і показує (фактом використання), що він зацікавлений у більш регулярному зверненні до додатка, браузери запропонують користувачеві встановити додаток на свій домашній екран. PWA також можуть використовувати push-уведомления як і рідні додатки.

І тут починається цікава частина. Як і будь-нативне додаток, прогресивне веб-додаток буде мати власну іконкою для домашнього екрану і коли ви натискаєте на неї додаток запускається без оболонки браузера Chrome. Це означає відсутність адресного рядка і кнопок навігації. Тільки звичайна рядок стану телефону і ваш додаток в усьому своєму майже повноекранному красі.

До цього вже давно йшло. Жодна з технологій не є особливо нової, за примітним виключенням розвивається крос-платформного стандарту.

Трохи історії
На зорі iPhone не існувало app store. Стів Джобс хотів, щоб розробники створювали програми для iPhone, використовуючи стандартні веб-технології.

Іноді мрійники праві, але вони на 10 років випереджають свій час. Озираючись назад на 2 роки, рекомендація Стіва Джобса про створення веб-додатків для iPhone була названа журналом Forbes його "найбільшою помилкою", оскільки рідні додатки придбали нищівний успіх.

Сьогодні, озираючись назад, здається очевидним, що він дійсно щось намацав, але тільки далеко попереду можливостей існуючий веб-стандартів того часу.

Зараз десятиліття потому, мобільні веб-стандарти підтримують багато функцій, які були потрібні розробникам рідних додатків і первісне бачення мобільних веб-додатків Стіва Джобса тепер сприймається серйозно усім світом. Практично з самого початку Apple підтримував «apple-mobile-web-capable» веб-додатки, які ви можете додати собі на домашній екран, використовуючи мета теги, які допомагають пристроїв iOS знаходити такі речі як відповідні іконки.

Інші виробники послідували прикладу, кожен створював свою власну колекцію мета-тегів для оголошення можливостей мобільних веб-додатків. Але нещодавно була введена крос-платформеная специфікація і тепер крос-платформні мобільні веб-додатки нарешті стають реальністю.

Програми, що виконують стандарт називаються прогресивними веб-додатками, не плутати з такими сбивающими з пантелику, схожими термінами як прогресивне вдосконалення або чуйні програми.

Що таке прогресивні веб-додатки
Прогресивні веб-застосунку веб-додатками, розробленими та адаптованими під мобільні пристрої. Якщо браузер зазначає, що користувач хоче продовжити використання програми, то він може запропонувати встановити програму на свій домашній екран. Але для того щоб він це зробив, додатки повинні задовольняти специфічним критеріям:

  • Повинні бути HTTPS (дивись let's encrypt)
  • Валідний маніфест з обов'язковими властивостями ( Web Manifest Validator)
  • Повинні мати service worker
  • start_url прописаний в маніфесті, повинен завжди завантажуватися навіть в offline (використовуючи service worker)
  • Повинні предоставлятьсвою власну навігацію
  • Повинні бути чуйними до різних розмірів екрану і орієнтаціям
Звичайно, використання HTTPS і service worker для оффлайн користувачів сьогодні є рекомендованою нормою для будь-якого сучасного програми.

Що забувають багато творці додатків так це те, що якщо ви робите прогресивне веб-додаток, ви повинні мати можливість керувати програмою без браузерною оболонки і навігаційних жестів. Мобільні пристрої вважають, що ви вбудували власну навігацію в додаток.

Наприклад, якщо у вас є сторінка, то ця сторінка повинна мати посилання на інтерфейс додатка, або користувачам доведеться закривати і повторно відкривати додаток, щоб повернутися назад до головного екрану.

Прогресивні програми — інструкція
У мережі існує безліч інформації про створення прогресивних веб-додатків, але здебільшого вона застаріла, а багато джерела містять лише фрагменти того, що вам потрібно, щоб створити додаток. Давайте виправимо це.

Активувати HTTPS
Щоб включити HTTPS вам знадобиться:

Маніфест
Файл маніфесту називається
manifest.json
і він досить простий. Він складається з імені (
short_name
іконки для домашнього екрану і опціонального
name
для більш повної назви), початкового url, великого списку іконок щоб ви могли підтримувати широкий спектр якщо для різних платформ потрібні різні розміри іконки. Для Android і iOS вам знадобиться:

  • 36*36
  • 48*48
  • 60*60 (значок Apple touch на iPhone)
  • 72*72
  • 76*76 (значок Apple на iPad touch)
  • 96*96
  • 120*120 (значок Apple touch на iPhone retina)
  • 152*152 (значок Apple touch на iPad retina)
  • 180*180 (значок Apple touch для iOS 8+ )
  • 192*192
  • 512*512
Я виділив значки Apple touch тому що у них відомі імена:

apple-touch-icon-180x180.png 


Де 180*180 може бути замінено на будь-який потрібний дозвіл. Використання відомих імен не обов'язково, але якщо ви забудете включити теги, iOS все-одно зможе знайти іконки, шукаючи їх в кореневій директорії вашого веб-додатки, якщо ви будете використовувати відомі імена.

Іконки iOS не підтримують прозорість.

Простий manifest.json:

{
"name": "My Progressive Web Application",
"short_name": "Progressive",
"start_url": "/?home=true",
"icons": [
{
"src": "/icons/icon36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "/icons/icon48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/icons/icon60.png",
"sizes": "60x60",
"type": "image/png"
},
{
"src": "/icons/icon72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/icons/icon76.png",
"sizes": "76x76",
"type": "image/png"
},
{
"src": "/icons/icon96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src":"/icons/icon120.png",
"sizes": "120x120",
"type": "image/png"
},
{
"src": "/icons/icon152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/icons/icon180.png",
"sizes": "180x180",
"type": "image/png"
},
{
"src": "/icons/icon192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#000000",
"background_color": "#FFFFFF",
"display": "fullscreen",
"orientation": "portrait"
}

Існують деякі функції, про які вам слід знати.
theme_color
встановлює колір статусного рядка, а заголовок вікна використовується при перемиканні між додатками на Android.

background_color
встановлює колір заставки. На Android заставка буде складатися з властивості
name
(довге ім'я) і великий іконки поверх
background_color
.

Маніфест є не скрізь

Коли створив перше прогресивне веб-додаток, я був вражений тим, що воно працювало як і передбачалося в Chrome на Android, але не в Safari /iOS. Причина в тому, що мобільний Safari, незважаючи на десятилітню підтримку цих функцій, використовуючи свої специфічні теги не підтримує досі специфікацію веб-маніфесту.

Тому в доповнення до файлу маніфесту для підтримуваних браузерів вам також знадобляться спеціальні мета теги для iOS, починаючи з того, який буде запускати програму без оболонки браузера:



Існує безліч тегів, про які треба пам'ятати, хоча є й інший спосіб. web manifest polyfill, який прочитає ваш manifest.json файл і додасть теги виробників для старіших мобільних браузерів, iOS і навіть для Windows phone і Firefox OS.

Переклад: Ольга Чернопицкая

Продовження слід

Підтримка публікації — компанія Edison, яка розробляє автоматичну систему складання прошивки для мережевої техніки, а так само робить переклад на російську для промислової транснаціональної корпорації.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.