Багато з нас. хто працює над Інтернетом, активно намагаються зменшити розрив між нативними і веб-додатками.
Але що це за розрив? Всього кілька років тому цей розрив був, більшою мірою, технологічним. Якщо ви хотіли отримати доступ до GPS пристрої, вам доводилося писати нативное додаток. Зараз ситуація дещо покращилася: тепер ми можемо отримувати доступ до датчиків пристрою, на зразок GPS. камери і орієнтації пристрою - хоча попереду ще довгий шлях. Завдяки останнім успіхам веб-технологій, тепер у нас є платформа, яка може конкурувати з нативними додатками вже майже на рівних.
Сьогодні розрив між нативними і веб-додатками не так технологічний - справа в зручності користувачів: вони вважають за краще встановлювати додатки, які затишно живуть на домашньому екрані (або навіть на робочому столі, якщо мова про десктопні браузери).
Що таке «установка»?
По суті, «установка» веб-додатки - це додавання «закладки» на домашній екран або в програму запуску додатків. Є деякі досить очевидні речі, які ви, як розробник, повинні надати браузеру, щоб той міг вважати сайт додатком: назва, іконки, і т.д. Є й більш складні функції, які можуть вам стати в нагоді, наприклад, можливість вказати бажану орієнтацію пристрою і чи потрібен вам повноекранний режим.
Специфікація маніфесту пропонує вам стандартний спосіб зробити це за допомогою файлу JSON. Просто пошліться на файл маніфесту в HTML-сторінці наступним чином:
Але що знаходиться в цьому загадковому файлі маніфесту? Добре, що ви запитали!
Дуже простий маніфест
Найпростіший маніфест може складатися всього лише з імені і однієї або декількох іконок.
типовий маніфест
Назва додатка
Додатком потрібна справжня назва або набір назв (які зазвичай зовсім не збігаються з вмістом елемента
документа). Для цього використовуються ключі name і short_name.</p>
<p>Якщо ви опустите назву, то браузер може використовувати <meta name="application-name"> або елемент <title> .</p>
<p>Але будьте уважні: деякі браузери можуть вимагати вказати назву - інакше, ваше додаток може втратити статус «прогресивне веб-додаток».</p>
<p>Замість звичайної іконки браузера, у вашого веб-додатки повинна бути іконка, яка буде з ним асоціюватися. Для цього в маніфесті є ключ icons. Він приймає список іконок, їх розмірів і форматів. Це робить процес вибору іконки дуже ефективним, оскільки у іконок з'являється адаптивне рішення, яке дозволяє уникнути непотрібних навантажень і допомагає іконка завжди виглядати відмінно на широкому діапазоні пристроїв і дозволів екрану.</p>
<p>Якщо ви не вкажете іконки, браузер буде шукати запасні варіанти: <link rel="icon">. favicon.ico або, якщо не знайде їх, може навіть використовувати скріншот вашого сайту.</p>
<h3>призначення іконки</h3>
<p>Більше подробиць про призначення іконок можна знайти в специфікації Web App Manifest.</p>
<h3>Режими відображення і орієнтація</h3>
<p>Додатки при запуску повинні мати можливість контролювати своє відображення на екрані. Якщо це гра, то їй, ймовірно, потрібно бути в повноекранному режимі і в горизонтальній орієнтації. Для цього формат маніфесту надає вам два ключа.</p><p>Доступні значення режимів відображення:</p>
<ul>
<li>Редакція fullscreen займає весь екран.</li>
<li>Автономний standalone відкриває додаток з рядком стану.</li>
<li>Мінімальний minimal-ui. коли додаток відображається в повноекранному режимі, як на iOS. але деякі дії можуть викликати панель навігації і поява кнопок назад і вперед.</li>
<li>Браузерні browser відкриває додаток зі стандартним набором кнопок і панеллю інструментів.</li>
</ul>
<p>Плюс такої вказівки орієнтації в тому, що вона виступає в якості «орієнтації за замовчуванням» для всього програми. Тому, при переході від однієї сторінки до іншої, ваше додаток залишається в правильному положенні. Ви можете змінити орієнтацію за замовчуванням за допомогою API орієнтації екрану.</p>
<p>Також ви можете застосувати інші стилі для застосування в певному режимі за допомогою характеристики display-mode:</p>
<p>Іноді під час запуску програми вам потрібно, щоб користувач завжди потрапляв на певну сторінку. Ключ start_url дає можливість це вказати.</p>
<h3>«Область» додатка</h3>
<p>Нативні додатки мають чіткі межі: як користувач, ви впевнені, що коли ви відкриваєте нативное додаток, воно несподівано не відчинить інше непомітно для вас. Найчастіше, вам гранично ясно, що ви переключилися з одного нативного додатки на інше. Зазвичай ці візуальні підказки надає операційна система (наприклад, виклик диспетчера задач і вибір іншої програми або натискання Cmd Tab або Alt Tab на комп'ютері).</p>
<p>З інтернетом все інакше: це величезна гіпертекстова система, в якій веб-додаток може охоплювати кілька доменів: ви можете з легкістю перейти з gmail.com на docs.google.com і користувач навіть цього не помітить. На практиці, ідея існування кордонів додатки є абсолютно чужою для вебу. Адже, насправді, веб-додаток - це просто серія HTML -документів (уявіть «серію труб» ... м-м, немає, забудьте!).</p>
<p>В інтернеті ми знаємо, що покидаємо область однієї програми і переходимо в інше, тільки завдяки веб-дизайнерам, які були досить добрі, щоб зробити їм унікальний помітний дизайн. У випадках, коли це не так, безліч користувачів виявляються обмануті сайтами, що маскуються під інші (старий добрий фішинг).</p>
<h3>Інтернаціоналізація: lang і dir</h3>
<h3>поширення застосування</h3>
<p>Потрібно написати з подробицями і скріншотами.</p>
<h3>Колір теми і колір фону</h3>
<h3>Як мені визначити, що користувач «встановив» додаток?</h3>
<p>Специфікація дозволяє вам визначити, коли користувач встановлює додаток за допомогою реєстрації події appinstalled.</p>
<p>Однак з причин конфіденційності ви не можете безпосередньо виявити, чи встановлено ваш додаток - тільки дізнатися, що у вашому веб-додатку використовується файл маніфесту.</p>
<h3>Що не так з тегами <meta>?</h3>
<p>В ході обговорення специфікації йшли жваві дискусії про використання тегів <meta> в HTML замість створення нового формату. Зрештою, реалізація функції «додати на домашній екран» в Chrome використовує теги <meta>. та й з найперших днів веба ці теги були рідною домівкою для будь-якої нестандартної нісенітниці.</p>
<p>Причини для використання окремого файлу:</p>
<ul>
<li>це економить купу інформації в шапці документа під час завантаження кожної сторінки встановленої програми або сайту;</li>
<li>після завантаження, файл залишається в HTTP -кеше браузера.</li>
</ul>
<p>У специфікації є більш докладна інформація про те, чому ми вибрали JSON замість HTML теґи.</p>
<h3>Хто це впроваджує?</h3>
<p>Маніфест і прогресивні веб-додатки реалізовані в Chrome. Opera і Samsung Internet для Android. Firefox також подає обнадійливі сигнали, що буде підтримувати ці стандарти (реалізації в Gecko вже більше двох років, але вона не використовується ні в одному з продуктів).</p>
<h3>Взаємодія з пошуковими роботами</h3>
<p>Як і інші веб-ресурси, маніфест веб-додатки повинен бути доступний для будь-якого веб-браузера або пошукового робота.</p>
<p>Якщо розробник веб-додатки хоче сповістити пошукових роботів про заборону на сканування файлу, він може зробити це включивши маніфест веб-додатки в файл robots.txt. Це описано докладніше в протоколі robots.txt. Розробник веб-додатки також може використовувати HTTP -заголовок X-Robots-Tag.</p>
<p>Переводпоясняющей заметкік спеціфікацііWeb App Manifest. ПереводАнни КухаревойіВадіма Макєєва, редактура Вадима Макєєва.</p>
<h4>Схожі статті</h4>
<ul>
<li>
<p><a href="/articles/manifest-veb-dodatki-mdn.php">Маніфест веб-додатки, mdn</a></p>
</li>
<li>
<p><a href="/articles/znajomstvo-z-manifestom-dodatki.php">Знайомство з маніфестом додатки</a></p>
</li>
<li>
<p><a href="/articles/stvorennja-novoi-cerkvi.php">Створення нової церкви</a></p>
</li>
</ul>
</div>
</article>
</div>
</div>
</div>
<footer class="igrzom-footer clearfix">
<p>Copyright © 2024<br></p>
</footer>
</div>
</div></body>
</html>