PWA является подрывной концепцией в веб-сфере, и она была общепринята за границей.Многие сайты были преобразованы в PWA и добились очень хороших результатов. Например, после завершения преобразования PWA в Twitter среднее время пребывания пользователей в twitter lite увеличилось на 65%. В Китае концепция PWA получает все более широкое признание. Многие крупные сайты, такие как Weibo и Ele.me, были преобразованы в PWA, и все больше сайтов претерпевают трансформацию.
Что такое ПВА
Для PWA пользовательский опыт является ядром. PWA — это не отдельная технология. Это веб-приложение, в котором применяется ряд технологий для оптимизации взаимодействия с пользователем. Оно имеет тот же пользовательский интерфейс, что и собственное приложение, и может добавлять значки на главный экран, доступность в автономном режиме и автономные уведомления. Подробнее см. в демо-версии.
PWA имеют три основные функции
-
надежныйС одной стороны, это относится к безопасности PWA, а PWA может работать только по HTTPS, а с другой стороны, это относится к тому факту, что к PWA все еще можно получить доступ, когда сеть нестабильна или ее нет.
-
быстроБыстро реагирует на действия пользователя, обеспечивая плавную анимацию, скорость загрузки, скорость рендеринга и производительность рендеринга.
-
липкость пользователяДобавляя к настольному и автономному обмену сообщениями, вы можете привлечь пользователей к повторным посещениям и полагаться на хороший пользовательский опыт, чтобы привлечь пользователей для повторного доступа.
Основная технология PWA
PWA не является отдельной технологией.Технологии включают Web App Manifest, Service Worker, Push API & Notification API, App Shell & App Skeleton и т. д. Далее мы сосредоточимся на нескольких технологиях и решениях связанных проблем.
Web App Manifest
Web App Manifest — это техническое решение, которое поддерживает сайты для создания значков на главном экране и настраивает значки и цвета начального экрана PWA, как показано ниже:
Хотя манифест веб-приложения является мощным, технически он не сложен.Это внешний файл json, который импортируется по ссылке: , конкретное содержимое файла следующим образом:
В стандарте манифеста веб-приложения есть много других полей, которые можно найти в стандарте W3C.
https://w3c.github.io/manifest
Service Worker
Service Worker — одна из важнейших концепций PWA, это специальный веб-воркер, который работает независимо от основного потока браузера, особенно в том, что он может перехватывать сетевые запросы пользователей, работать с кешем, поддерживать push- и фоновую синхронизацию и т. д. , Функция.
Service Worker управляет локальным кешем через Cache Storage и Cache API и запрашивает данные на стороне сервера через fetch API.Независимо от того, есть ли сетевое подключение или на сайте возникает ошибка 404 или 500, пользователи могут видеть специально настроенную страницу ошибки вместо просмотр Стандартная страница 404 сервера.
App Shell и скелет приложения
PWA обычно являются SPA и обычно следуют модели дизайна App Shell. App Shell — очень важная концепция в PWA, так что же такое App Shell?
App Shell — это минимальный набор ресурсов HTML, CSS и JavaScript, необходимых для поддержки страницы. В автономном режиме он может обеспечить мгновенную и надежную хорошую производительность при повторном посещении пользователем. Снимок экрана ниже является частью оболочки приложения, отображаемой для пользователя.
Взяв в качестве примера проект Vue, AppShell содержит:
-
Входной HTML-файл
-
Упакованные файлы Vendor JS
-
Экспортированный файл CSS
Как показано на рисунке выше, App Shell отображает часть заголовка, поэтому основная часть представляет собой белый экран перед загрузкой данных, что очень плохо для взаимодействия с пользователем. данные, занимайте место на белом экране и старайтесь долго не появляться на белом экране.
Каркас приложения должен быть представлен пользователю в кратчайшие сроки, поэтому, как правило, скелет приложения будет скомпилирован в HTML, как и код ниже. Ожидается, что браузер сможет отобразить экран скелета после загрузки HTML.
Однако заблокирует рендеринг экрана-скелета, и браузер не будет рендерить экран-скелет до тех пор, пока файл CSS не будет загружен, так что пользователь увидит время белого экрана будет дольше, чем ожидалось. Немногие сайты заметят эту проблему. Даже если будет сделан экран-скелет, это не обязательно решит проблему, связанную с тем, что загрузка CSS препятствует рендерингу экрана-скелета. Например, домашняя страница PWA Ele.me не решена.
Итак, как нам решить эту проблему? Это можно решить с помощью предварительной загрузки ссылки. Предварительная загрузка не помешает рендерингу HTML. После загрузки ресурса предварительной загрузки вернитесь к таблице стилей и вызовите mount, чтобы отобразить результат рендеринга JS. Как показано в следующем коде (следующий код нельзя запустить напрямую, он используется только для демонстрации идей)
В дополнение к предварительной загрузке решения вы также можете встроить CSS в ссылку в JS.По умолчанию для проектов Vue используется CSS In JS.
PWA расшифровывается как Progressive Web Apps, то есть должно быть прогрессивным, то есть постепенно добавляться к существующей основе, тем самым улучшая пользовательский опыт, не нужно изобретать велосипед, чтобы преобразовывать весь сайт.
PWA SEO решения проблем
SEO - это забота каждого сайта. PWA обычно являются SPA. Как мы все знаем, традиционные поисковые системы не могут индексировать страницы, отображаемые JS. Итак, как мы можем решить эту проблему?
Первое, что нужно отметить, это то, что Baidu не является традиционной поисковой системой.И Baidu, и Google могут индексировать SPA-страницы на мобильной стороне. Тогда для других поисковых систем единственным способом решить проблему PWA SEO является рендеринг на стороне сервера (SSR).Теперь все основные платформы MVVM на рынке предоставляют решения SSR, такие как React, Vue, San и т. д.
Страница SSR отправляется напрямую с сервера, и одновременно с этим отправляется страница контента.Так как же этот метод совместить с Service Worker для перехода в автономный режим? Как добиться эффекта запуска AppShell? Мы используем решение Service Worker + App Shell + SSR + (Vue/React/San), чтобы идеально решить эту проблему.
Для первого запроса сервер выдает контент сразу после SSR.После загрузки страницы регистрируется Service Worker.Service Worker предварительно кэширует некоторые статические файлы или другие ресурсы на этапе установки.Здесь мы добавляем новый запрос . Адрес: /appshell, this/ Содержимое, возвращаемое запросом appshell, представляет собой HTML-код оболочки приложения. Этот HTML-код содержит ссылки на JS и CSS. Можно привести пример Vue:
https://github.com/lavas-project/lavas-template-vue/blob/release-basic/pages/Appshell.vue
Во втором запросе Service Worker использует request.mode === 'navigate', чтобы определить, является ли текущий запрос запросом страницы. Если это так, он возвращает предварительно кэшированную HTML-структуру /appshell на страницу. После рендеринга App Shell отображает основное содержимое страницы, запрашивая соответствующий JS и данные через текущий URL-адрес.
Таким образом, можно не только решить проблему SEO, сайт может быть полностью отключен, а время белого экрана может быть сокращено, что еще более важно, это также может значительно снизить нагрузку, вызванную SSR сервера. Поскольку пользователю нужен сервер только для запуска логики SSR для первого рендеринга, все последующие запросы являются внешним рендерингом.
Совместимость с ПВА
PWA В начале 2017 года PWA поддерживали только Chrome и Firefox, после года разработки все основные отечественные браузеры уже поддерживают PWA, а iOS также поддерживает PWA в только что выпущенной версии 11.3.
рекомендовать
Для получения дополнительных руководств по PWA, документов, официального сайта Lavas, Codelab, примеров эффектов PWA, совместимости, посетите официальный сайт Lavas, нажмите "читать оригинал" для входа на официальный сайт.
Brilliant Open Web
Команда BOW (Brilliant Open Web) — это специальная группа разработчиков веб-технологий, занимающаяся продвижением разработки технологии Open Web и превращением Интернета в лучший выбор для разработчиков.
BOW фокусируется на интерфейсе и Интернете, анализирует технологии и делится практикой, рассказывает об обучении и управлении.
Следите за разработчиками Open Web, отвечайте на «добавить группу», давайте вместе способствовать развитию технологии Open Web!