техническое образование
Всем известно, что H5 намного хуже нативных приложений по скорости загрузки и пользовательскому опыту по следующим причинам:
- Оставьте пустым слишком долго. Мобильная сеть очень нестабильна, и часто бывают слабые сетевые среды (такие как лифты, метро и горы), из-за чего скорость загрузки ресурсов будет очень низкой, а время гашения будет намного медленнее, чем нативное.
- Офлайн-доступ недоступен. Поскольку все ресурсы находятся на онлайн-сервере, каждое посещение страницы H5 сильно зависит от сети, а поскольку все ресурсы находятся в пакете приложения, даже если сеть отключена, это даст относительно удобный интерфейс отображения и пользователя. напоминания.
- Полноэкранный доступ недоступен. Большая часть H5 связана с просмотром веб-страниц, но основные производители браузеров будут иметь неприятный заголовок и неприятный конец, из-за чего видимая область пользователя будет сильно сжата. Всем известно, что областью зрения можно управлять по желанию.
- Не удалось отправить сообщение.
- Без собственного значка запуска вам нужно вводить URL-адрес или каждый раз полагаться на поисковые системы для перенаправления трафика.
В это время появился герой, спасший H5, и он был PWA.
Что такое ПВА
Полное название PWA: Progressive Web Apps. Это концепция веб-приложения следующего поколения, предложенная на конференции Google I/O в 2016 году. Это не технология, а набор технологий, которые могут заставить вас чувствовать, что вы используете приложение при использовании Интернета.
Что может PWA
- сообщение
- ЗНАЧОК главного экрана, полноэкранный доступ
- Автономное хранилище
Похож ли он на оригинал? Эта статья в основном посвящена офлайн-хранилищу, то есть кэшированию содержимого этого куска, о push-уведомлениях и ICON главного экрана речь пойдет позже.
Принцип кэширования pwa
Почему можно реализовать кеширование или автономное хранилище? Суть в том, чтобы использовать сервис-воркер браузера для запуска другого потока. Этот поток отвечает за мониторинг всех запросов https (обратите внимание, что это https). Когда он обнаруживает, что некоторые ресурсы необходимо кэшировать, он вытягивает ресурсы в локальный браузер и получить к нему доступ.При перехвате запросов вместо того, чтобы принимать сетевые запросы, читать локальные ресурсы напрямую. Таким образом, ресурсы эквивалентны локальным ресурсам пользователя, а скорость отклика определенно высока, и все ресурсы находятся в браузере пользователя, даже если сеть отключена, доступ к ресурсам возможен в обычном режиме.
Насколько быстр кэш pwa?
Ниже приведена сравнительная диаграмма ресурсов загрузки одного и того же кэша PWA и кэша без pwa в существующем бизнесе участника PLUS:
На следующем рисунке показано время запроса ресурсов сети 3G без кэша PWA:
На следующем рисунке показано время запроса ресурсов сети 3G с использованием кэша PWA:
На следующем рисунке показано время запроса ресурсов сети 4G без кэша PWA:
На следующем рисунке показано время запроса ресурсов сети 4G с использованием кэша PWA:
Сравнение данных с кэшированием PWA и без него:
| 3G не нуждается в кэше PWA | 3G использует кеш PWA | 4G не использует кеш PWA | 4G использует кеш PWA | |
|---|---|---|---|---|
| время загрузки страницы | 4.16s | 989ms | 1.8s | 975ms |
| единый ресурс среднее время загрузки |
около 1 с | Около 60 мс | Около 550 мс | Около 60 мс |
Как видно из приведенных выше данных, эффект ускорения кэша pwa очень очевиден, что может гарантировать, что ваша страница будет открываться за секунды в слабом сетевом окружении, а большинство ресурсов имеют время отклика около 50 миллисекунд. . Время отклика нашего теста браузера Safari быстрее, в основном около 15 мс!!!
Стратегия кэширования для кэша pwa
Как упоминалось выше, некоторые ресурсы необходимо кэшировать. Как долго кэшировать? Всегда брать кеш или всегда брать сеть? Или какая-то конкретная стратегия кэширования? Вот некоторые часто используемые стратегии кэширования:
cache-first
Блок-схема загрузки без кэшированияСтратегия Cache-First будет возвращать кеш, если кеш есть, и будет запрашивать и кэшировать результат запроса, если кеша нет. То есть нет никакой разницы между первой загрузкой страницы и обычной загрузкой страницы, а ресурсы, к которым обращаются во второй раз, попадают непосредственно в данные локального кеша.
Эта стратегия подходит для: css, js, фоновых изображений, больше подходят статические ресурсы с низкой частотой изменения в реальном времени! Одним из недостатков этой стратегии является то, что кеш может существовать только в вашем браузере.Если вы обнаружите, что некоторые файлы необходимо заменить, вы будете зависеть от версии релиза или кеш будет существовать всегда. Есть ли хороший способ?Настройка времени кэша может избежать этой проблемы, Будет обновляться каждый раз, когда кеш. Например, через час или три часа вы также можете изменить кэш данных на какой-то относительно низкочастотный интерфейс, на этот раз в основном для того, чтобы увидеть свои бизнес-потребности. (PS: новая версия в Service-Worker однажды повлечет за собой новую инициативу.)
network-first
network-first — более сложная стратегия. Ресурсы сначала отправляются в сеть. После успеха ресурсы будут добавлены в кеш. При сбое сети кеш будет считан обратно. Здесь есть момент, сколько времени нужно, чтобы засчитать отказ сетевого запроса? В это время вам нужно настроить период ожидания, если вы не настроите резервный кеш, время будет больше. Это время зависит от вашего собственного проекта.
Эта стратегия подходит для: часто обновляемых ресурсов, таких как данные о погоде, статьи и ресурсы интерфейса игровых рейтингов В обычных условиях ничем не отличается от обычных веб-страниц При слабой или отключенной сети время отклика ресурсов является относительно длинным.Стратегия резервного использования ресурсов, данная в случае разницы в цене, которая может улучшить взаимодействие с пользователем в слабой сетевой среде.
stale-while-revalidate
Эта стратегия ближе к cache-first, разница между ними в том, что сначала идет к кешу, а после завершения кеша отправляет запрос, а результат запроса используется для обновления кеша. вы вернетесь, вы можете получить последние данные.
Подходит для: ресурсов, html, аватарок, которые не требуется часто обновлять до последней версии.
cache-only
Он будет обращаться только к кешу, чтобы получить данные, если кеша нет, он выйдет из строя.
Этот очень простой сценарий приложений может быть статической страницей, которая оставалась без изменений в течение 10 000 лет.
network-only
сеть только запрашивает онлайн, не читает и не записывает кеш.
Выше приведены пять наиболее часто используемых стратегий кэширования. Разные сценарии соответствуют разным стратегиям кэширования. Как написать эти стратегии или как сгенерировать эти стратегии, будет подробно объяснено в следующей статье.
будущее пва
Сейчас все последние версии отечественных производителей браузеров поддерживают кеш сервис-воркеров PWA, iOS, на которую жаловались раньше, не будет его поддерживать, но последняя версия IOS11.3 тоже поддерживает сервис-воркер.
pwa — это набор технологий, включая оболочку приложений, push-уведомления и одностраничные приложения. Кэширование — это лишь часть этого. Есть еще много технологий, которые нам нужно изучить и попрактиковать. Я верю, что эта технология принесет больше преимуществ для H5.хорошее будущее.