Некоторое время назад я кратко ввел несколько PWA Technologies на внутреннем совещании Общества, но в то время я использовал версию карты разума в то время, и теперь я организую его в блог, чтобы поделиться с вами.
Progressive Web App(PWA)
1. Предварительное введение
1. Зачем использовать PWA в качестве обмена технологиями
В ноябре 2017 года Google провел конференцию разработчиков в Шанхае, в ходе которой былиPWA, Ван Эр считает, что Google стремится продвигать эту технологию, поэтому технология все еще очень продвинута, поэтому он имеет следующий обмен.
2. Краткое введение
Китайское название PWAПрогрессивные веб-приложения, еще в 2014 году W3C объявилService Worker, но он не используется в производственной средеChromeПоддержка в 2015 году. Поэтому, если взять одну из ключевых технологий PWAService Workerпоявляется какPWAВремя рождения должно быть 2015.
С 2015 годаPWAСоответствующие технологии постоянно обновляются и оптимизируются, предоставляя очень хорошие решения с точки зрения пользовательского опыта и удержания пользователей.PWAмогуWebа такжеAppСильные стороны каждого из них объединяются: прогрессивный, отзывчивый, автономный, похожийAppинтерактивные, мгновенные обновления, безопасные, извлекаемые поисковыми системами, нажимаемые, устанавливаемые и связываемые.
Необходимо отметить, что,PWAНе ссылаясь на конкретную технологию, но применяя несколько технологийWeb App. Его основные технологии включаютApp Manifest,Service Worker,Web Push,так далее.
3. Почему W3C и Google продвигают эту технологию
Это начинается со статус-кво внешнего интерфейса:
Нативное приложение очень простое в использовании, но оно также имеет свои естественные генетические дефекты:
- Контент не может быть проиндексирован из-за его изначально закрытых генов
- Пользователи тратят 80% своего времени на топ-3 суперприложений, а для сайтов рентабельность распространения приложений становится все менее и менее рентабельной.
- Чтобы им воспользоваться, сначала нужно скачать десятки мегабайт установочных пакетов
Хотя веб-интерфейс по своей сути открыт, во многих случаях страница будет зависать, а взаимодействие с пользователем будет неудовлетворительным. Хотя сообщество уже предприняло много усилий, например,virtual dom,spa, смешанное программирование, сcanvasОтрисовывая всю страницу, пользовательский интерфейс также значительно улучшился, но по-прежнему не может решить несколько важных проблем:
- Пользователь недоступен в автономном режиме
- Невозможно получать push-уведомления
- В мобильном терминале нет записи первого уровня
W3C и Google увидели эти проблемы и запустилиPWA.
4. Основная цель PWA
PWAОсновная цель — повысить производительность веб-приложения и улучшить взаимодействие с пользователем веб-приложения. Плавный опыт, сравнимый с нативным, сочетающий силу сети с силой приложения.
2. Особенности
1. Особенности PWA
PWA обладают некоторыми из следующих характеристик:
Вот особенность PWAсписок список, Заинтересованные студенты могут щелкнуть, чтобы увидеть его.
2. Подробные характеристики
(1), может быть установлен
1. Устанавливаемый означает, что вы можете оставить значок на главном экране, как родное приложение.
2, но это требует от нас предоставленияWeb app manifest,manifest.jsonэто простой файл JSON, мы находимся вhtmlСтраница цитирует его следующим образом:
В нем описывается, как наша иконка отображается на главном экране и на какую страницу запуска она переходит.Его формат JSON выглядит следующим образом:
в:
start_urlURL-адрес запуска может быть установленiconsПоможет мне установить иконку страницы в каждом разрешенииbackground_colorУстанавливается цвет фона, который Chrome использует при запуске веб-приложения и остается на экране до первого отображения веб-приложения.theme_colorцвет темы будет установленdisplayУстановить стиль запуска
оmanifest.jsonДля получения более конкретных значений полей заинтересованные студенты могут обратиться кДокументация MDNили в документации разработчика Googleэта статья
3. На самом делеМобильный терминал Дубантолько одинPWAПриложение, если мы откроем его с более высокой версией браузера, мы обнаружим баннерную подсказку, но следует отметить, что IOS, похоже, не поддерживает его.Следующий Ван Эр использует телефон Android для демонстрации:
После открытия Douban браузер предложит добавить на главный экран:
После нажатия ОК он подскажет, что добавление прошло успешно, а затем оставит на главном экране иконку Douban.
(2), автономное использование
1,PWAЕще одна интересная особенность заключается в том, что ее можно использовать в автономном режиме, технология, лежащая в основе этогоService worker ;
2,Service workerНа самом деле это скрипт, который работает в фоновом режиме. Как независимый поток среда выполнения отличается от среды обычных сценариев, поэтому он не может напрямую участвовать в веб-взаимодействии.Service Workerпоявился именно для того, чтобыWeb Appтакже можно сделать какNative AppТаким образом, вы можете использовать его в автономном режиме и отправлять сообщения.
мы можем поставитьService workerкак клиентский прокси,
3. Давайте посмотрим, как зарегистрироватьService Worker
оService WorkerДля более подробного ознакомления заинтересованные студенты могут обратиться кДокументация MDNили на гитхабеBasic Service Worker SampleЭто введение.
4. КонечноService WorkerСуществует также жизненный цикл, см. следующий рисунок:
оService WorkerДля подробного ознакомления с жизненным циклом обратитесь к следующему рисунку:
оService WorkerДля более подробного ознакомления с жизненным циклом заинтересованные студенты могут обратиться кДокументация MDN
(3), толчок сообщения
Подробнее о push-уведомлениях см. в официальном руководстве Google.Your First Web Push Notification, в котором есть подробный код Demo и описание, а также соответствующая фоновая конфигурация (с хорошим ладдером).
3. Как разработчики узнают, обладают ли они этими характеристиками?
Сказав так много, как мы, разработчики, узнаем, есть ли на веб-страницеPWAКак насчет некоторых функций?
В настоящее время инструменты разработчика Google могут помочь нам вChromeИнструменты разработчика браузера имеютAuditsPanel, это может помочь нам определить, имеет ли веб-страница некоторые характеристики PWA:
3. Какие компании уже используют PWA?
1. Уже есть отечественныеДубан,вы голодныИспользуются некоторые технологии PWA;
2. Есть относительно много иностранных компаний, использующих PWA, таких какTwitter,Filpboard;
3. Особо следует отметить Twitter, запущенный в 2017 году.Twitter Lite PWA, что дает весьма поразительные результаты:
- Среднее время пребывания пользователя увеличилось на 65%
- На 75 % увеличилось количество твитов на веб-сайте.
- На 20% ниже показатель отказов
Twitter Lite может достичь таких результатов благодаря новой технологии PWA и принципу разработки пользовательского опыта в первую очередь: он кэширует файлы через Service Worker, так что страница может быть в автономном режиме при снижении потребления сети; он принимает сообщения, отправленные сервером через Web Push; использует модель дизайна App Shell в сочетании с Service Worker, что позволяет мгновенно отображать страницу.
4. Другие веб-сайты, которые используют PWA, могут ссылаться наэта ссылка
В-четвертых, детали кода
1. Код может относиться к официальному руководству Google.
1,Your First Progressive Web AppПоможет нам понять, как создать приложение PWA с нуля.
2,Debugging Service WorkersУкажет нам, как отлаживатьService Worker.
2. Стратегия кэширования
Кэширование может оптимизировать взаимодействие с пользователем, но без разумной стратегии кэширования мы обнаружим, что наш веб-сайт будет сложно обновлять.
После того, как пользователь перезагрузит новыйService Worker, нам нужно удалить все старые файлы ресурсов, как показано на следующем рисунке:
Студенты, которые заинтересованы в дополнительных стратегиях кэширования, могут обратиться к этой статье —The offline cookbook
3. Официальные инструменты
В дополнение к вышеупомянутому ручному написаниюService Workerскрипт, предоставленный Googlesw-toolboxа такжеsw-precacheДва инструмента для быстрой и легкой генерацииservice-worker.jsдокумент:
- sw-precacheМожет использоваться для создания конфигурации, позволяющей PWA кэшировать статические ресурсы во время установки.
- sw-toolboxПредоставляет общую стратегию динамического кэширования, эти динамические ресурсы не подходят для предварительного кэширования с помощью sw-precache.
V. Резюме
Прогрессивное веб-приложение все еще находится в зачаточном состоянии, и его популярности в Китае недостаточно, но мы не можем игнорировать лежащие в его основе технологии и новое позиционирование интерфейса. Возможно, это изменит экологию интерфейса, как это сделал AJAX десять лет назад.
Справочные статьи (некоторые ссылки нужно привести в виде лестницы)
Результаты поиска Google Developers Site для PWA
Your First Progressive Web App
Exemplary Progressive Web App Checklist
Your First Web Push Notification
Список контрольных списков веб-сайта PWA
Может ли PWA привести к новому раунду масштабных переделок передовых технологий?
Начало работы с PWA: понимание и создание сценариев Service Worker
Документация MDN «ServiceWorker»