Серия статей «Обучение и практика PWA» организована в видеgitbook — учебное пособие по PWA, текстовое содержимое было синхронизировано сlearning-pwa-ebook. При перепечатке просьба указывать автора и источник.
Эта статья«Обучение и практика PWA»Вторая статья цикла. Код в тексте можно найти вманифестная ветвь обучения-pwaнайти на (git cloneОбратите внимание, чтобы позже переключиться на ветку манифеста).
Как одна из самых популярных технических концепций в настоящее время, PWA имеет большое значение для повышения безопасности, производительности и удобства веб-приложений, и она очень достойна нашего понимания и изучения. Друзья, интересующиеся PWA, могут обратить внимание на серию статей "PWA Learning and Practice".
1. Введение
Мы знаем, что в Chrome (и некоторых современных браузерах) вы можете добавить посещаемый веб-сайт на рабочий стол, который создаст значок, похожий на «ярлык», на рабочем столе, и когда вы щелкнете значок, вы сможете быстро получить к нему доступ. сайт (веб-приложение). мы начинаем спервая статьяВозьмем для примера демо в , состояние после его добавления на рабочий стол и при повторном открытии следующее:
Однако для PWA есть несколько важных особенностей:
- Веб-приложение может быть добавлено на рабочий стол и иметь собственную иконку приложения;
- В то же время, когда он открывается с рабочего стола, у него будет свой «начальный экран», как у родного приложения;
- Кроме того, веб-приложение выглядит почти так же, как и родное приложение — в нем нет адресной строки браузера и панели инструментов, и кажется, что оно работает в отдельном контейнере, подобно родному приложению.
Как следующее:
Далее мы будем опираться на эту серию — предыдущую статью «Изучение и практика технологии PWA».«2018, начните свое обучение PWA»Демонстрация обычного веб-приложения, упомянутого в статье, преобразована для достижения эффекта PWA. Или клонируйте learning-pwa прямо с гитхаба (Github.com/ залоговое состояние / быть ...
2. Web App Manifest
Манифест — это файл формата JSON, вы можете понимать его как список, определяющий ряд ресурсов, таких как значок рабочего стола веб-приложения, имя, значок открытия, режим работы и т. д.
Цель манифеста — установить веб-приложение на главный экран устройства, предоставляя пользователям более быстрый доступ и более широкие возможности. —— МДН
Давайте посмотрим, в обучении-pwamanifest.jsonсодержание документа
{
"name": "图书搜索",
"short_name": "书查",
"start_url": "/",
"display": "standalone",
"background_color": "#333",
"description": "一个搜索图书的小WebAPP（基于豆瓣开放接口）",
"orientation": "portrait-primary",
"theme_color": "#5eace0",
"icons": [{
"src": "img/icons/book-32.png",
"sizes": "32x32",
"type": "image/png"
}, {
"src": "img/icons/book-72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "img/icons/book-128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "img/icons/book-144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "img/icons/book-192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "img/icons/book-256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "img/icons/book-512.png",
"sizes": "512x512",
"type": "image/png"
}]
}
Видно, что приведенный выше файл конфигурации JSON очень интуитивно понятен.Объявляя значение каждого атрибута, мы можем преобразовать наше веб-приложение. Далее следует краткое введение в каждое конкретное значение.
2.1. name, short_name
Указано имя веб-приложения.short_nameНа самом деле это краткое приложение. В общем, когда недостаточно места для отображения приложенийname, система будет использоватьshort_name. Вы можете видеть, что в примере этой статьи имя, отображаемое на рабочем столе приложения для поиска книг,short_nameКнижный чек.
2.2. start_url
Это свойство указывает URL-адрес, который загружается, когда пользователь открывает веб-приложение. Относительные URL относятся к манифесту. Здесь мы указываемstart_urlдля/, чтобы получить доступ к корневому каталогу.
2.3. display
displayУправляет режимом отображения приложения, имеет четыре значения на выбор:fullscreen,standalone,minimal-uiа такжеbrowser.
-
fullscreen: Полноэкранное отображение, будет пытаться максимально заполнить всю область отображения; -
standalone: Автономный режим приложения, приложение, открытое в этом режиме, имеет собственный значок запуска и не будет иметь адресной строки браузера. Так что это больше похоже на родное приложение; -
minimal-ui:а такжеstandaloneПо сравнению с этим режимом адресная строка будет больше; -
browserВообще говоря, он будет таким же, как обычный стиль открытия браузера.
Давайте посмотрим на различия между этими четырьмя режимами:
Конечно, конкретные стили, демонстрируемые разными системами, не совсем одинаковы. Как и в примере, виртуальные ключи находятся вfullscreenРежим будет скрыт по умолчанию.
2.4. orientation
Управляет ориентацией веб-приложения. Установка определенных значений будет иметь эффект блокировки экрана (отключение поворота), например, в примереportrait-primary. Конкретные значения включают:any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary.
2.5 иконки, background_color
iconsЗначок на рабочем столе, используемый для указания приложения. icons сам по себе представляет собой массив, каждый элемент которого содержит три свойства:
- размеры: размер значка. Указав размер, система выберет наиболее подходящий значок для отображения в соответствующей позиции.
- src: путь к файлу значка. Обратите внимание, что относительные пути относятся к манифесту.
- type: тип изображения значка.
Следует отметить, что упомянутое мной «начальное изображение экрана» на самом деле является режимом отображения цвета фона + значка (и так называемое начальное изображение экрана не будет установлено).background_colorЭто фон по умолчанию перед загрузкой примененного ресурса стиля, поэтому он будет отображаться на начальном экране.background_colorплюс то, что мы только что определилиiconsОн представляет собой «начальное изображение экрана» при открытии веб-приложения.
2.6. theme_color
Определяет цвет темы по умолчанию для приложения. Это иногда влияет на то, как операционная система отображает приложение (например, в переключателе задач Android цвет темы окружает приложение). Также в метатеге можно задать theme_color:<meta name="theme-color" content="#5eace0"/>
2.7. description
Смысл этого поля очень прост, это описание приложения.
3. Используйте манифест
После создания файла манифеста следующим шагом будет узнать, как заставить наше веб-приложение использовать его — очень просто, просто добавьте тег ссылки в заголовок:
<!-- 在index.html中添加以下meta标签 -->
<link rel="manifest" href="/manifest.json">
Таким образом, на андроиде мы используем хром, чтобы добавить приложение на рабочий стол, и у нас будет эффект PWA в начале статьи. Вы можете проверить содержимое manifest.json здесь:Web Manifest Validator
Если вы видите это, поздравляю, вы уже знаете, как сделать наше веб-приложение более похожим на отдельное нативное приложение. Это очень просто?
4. iOS, Windows?
Все вышеперечисленное кажется красивым, но так ли это на самом деле?
До сих пор мы работали довольно хорошо: создали manifest.json, добавили метатеги и добавили наше веб-приложение на рабочий стол. Однако, если мы зайдем на наш сайт на iPhone и «Добавить на главный экран», вы обнаружите — это не работает! Да, вы правильно прочитали, все вернулось на круги своя.
если ты виделcaniuseСовместимость в манифесте, это доставит вам больше головной боли. Однако не расстраивайтесь, на iOS и Windows у нас есть другие способы
5. Обработка в iOS (сафари)
Хотя Safari не поддерживает манифест веб-приложения, он имеет несколько собственных тегов заголовка для определения соответствующих ресурсов и форм представления:
-
apple-touch-icon: Настольные иконки, добавляя в голову<link rel="apple-touch-icon" href="your_icon.png">Вот и все. Вы также можете добавить атрибут размеров, чтобы указать системе использовать наиболее подходящий значок для различных платформ (iphone, ipad...) -
apple-mobile-web-app-title: название приложения. Обратите внимание, что вам нужно использовать метатеги здесь<meta name="apple-mobile-web-app-title" content="AppTitle"> -
apple-mobile-web-app-capable: аналогично функции отображения в манифесте, вы можете войти в автономный режим, установив для него значение yes, которое также является метатегом.<meta name="apple-mobile-web-app-capable" content="yes"> -
apple-mobile-web-app-status-bar-style: это изменит стиль строки состояния на мобильных устройствах iOS и будет действовать только в автономном режиме.<meta name="apple-mobile-web-app-status-bar-style" content="black">, но на iPhoneX черный цвет заставит строку состояния ничего не отображать.
Ниже приведены соответствующие настройки в проекте learning-pwa.
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="图书搜索">
<link rel="apple-touch-icon" href="img/icons/book-256.png">
6. Обработка в IE
Подобно Safari, IE также имеет собственный метатег для указания соответствующего ресурса. Среди наиболее важных из них:
-
application-name: указывает название приложения -
msapplication-TileColor: указывает цвет фона «плитки». -
msapplication-xxxlogo: значки, используемые «плитками» разных размеров, включая следующие:msapplication-square70x70logo, msapplication-square150x150logo, msapplication-wide310x150logo, msapplication-square310x310logo
Ниже приведены соответствующие настройки в проекте learning-pwa, в которых для удобства настройки значков повторно используют существующие файлы значков.
<meta name="application-name" content="图书搜索" />
<meta name="msapplication-TileColor" content="#222">
<meta name="msapplication-square70x70logo" content="img/icons/book-72.png" />
<meta name="msapplication-square150x150logo" content="img/icons/book-144.png" />
<meta name="msapplication-square310x310logo" content="img/icons/book-256.png" />
напиши в конце
В этой статье в основном рассматривается, как сделать веб-приложение, добавленное на рабочий стол, более близким к родному приложению (значки на рабочем столе, страницы открытия экрана, оболочка...).
Поэтому мы использовали манифест веб-приложения. Мы можем использовать его, добавив файл манифеста и установив соответствующий метатег в HTML; в сафари это можно сделать с помощью некоторых уникальных метатегов и тегов ссылок. Это просто и удобно? Это позволяет нам модифицировать наше веб-приложение с очень низкими затратами. Это одна из идей концепции PWA: вы можете постепенно улучшать возможности своего веб-приложения, и в то же время, с точки зрения совместимости, вы также можете предоставлять возможности постепенного улучшения на основе поддержки разных браузеров.
Итак, содержание этой статьи здесь. Надеюсь, вам понравится! В то же время, если вы хотите узнать больше о связанных технологиях, лежащих в основе PWA, обратите внимание«Обучение и практика PWA»Статья вдогонку.
Серия статей "Изучение и практика технологии PWA"
- Первая статья: 2018 год, начните свое обучение PWA
- Часть 2. Научитесь использовать Manifest за 10 минут, чтобы сделать ваше веб-приложение более «нативным» (эта статья)
- Часть 3. С сегодняшнего дня сделайте свое веб-приложение доступным в автономном режиме
- Часть 4. Устранение неполадок: устранение ошибок аутентификации при входе в FireBase
- Часть 5. Оставайтесь на связи с вашими пользователями: функции Web Push
- Часть 6. Отладка PWA в Chrome
- Часть 7. Расширенное взаимодействие: использование API уведомлений для напоминаний
- Часть 8. Использование Service Worker для фоновой синхронизации данных
- Часть 9: Проблемы и решения в практике PWA
- Часть 10. Подсказка по ресурсам. Улучшите производительность и удобство загрузки страниц.
- Статья 11. Изучение различных офлайн-стратегий с помощью набора инструментов для работы в офлайн-режиме PWA (написание...)