Создание PWA-приложения

Обновлено: 27.04.2021 35755

Написал [не]большой обзор по созданию прогрессивного веб-приложения. Настройка + чек-листы.

Как сделать Progressive Web Apps: руководство для новичка и разработчика

Время прочтения:

Технология Google известна уже не первый год. Рекомендую изучить статью и улучшить свой сайт!

Новички и профессиональные разработчики могут найти ответы по многим тупиковым вопросам связанных с созданием нативного приложения.

Прогрессивные веб приложения

Progressive Web App или PWA -  эта технология позволяет сайтам вести себя как мобильное приложение.

Преимущества PWA-приложений:

  • Не требует установки через Google Play;
  • Добавление на рабочий экрана мобильного устройства в один клик по надписи во всплывающей подсказке "Добавить приложение на главный экран";
  • Более усиленное кэширование данных - снижение передачи данных с сервера (уменьшение нагрузки и ускорение при повторном заходе);
  • Возможность использования сайта без интернета - все ранее открытые и закешированные страницы будут доступны offline;
  • Если выполнить все основные рекомендации, то можно опубликовать свое прогрессивное веб-приложение сразу в трёх соответствующих магазинах: Google Play, iOS App Store, Windows Store.

Поддержка PWA

На момент написания статьи технология поддерживается практически всеми популярными браузерами:

Поддержка service workers браузерами

Сервис: Can I use

Т.е. практически все они поддерживают Progressive Web Apps, за исключением браузеров Opera и IE.

Недостатки PWA-приложений

  • Не передаются данные на сервисы статистики в режиме offline (ну это логично);
  • Нет поддержки в IE, Opera и других древних версиях браузеров;
  • Не все браузеры поддерживают полностью все возможности PWA.

PWA рабочий пример

На своем сайте я внедрил эту технологию. Я использовал свой доработанный скрипт, вместо типового скрипта, полученного с сервиса PWABuilder.

Полный обзор установки и настройки Progressive Web App

Начнем сразу с установки скрипта Service Worker. 

Установка скрипта на сайт

Создаем в корне файл sw.js со следующим содержимым:

var updated = [//тут указываем скрипты которые не должны жестко кешироваться
"https://soltyk.ru/broadcasts/1959750457-widget-3.js",
"https://soltyk.ru/sw.js"//указал сам скрипт service worker, чтобы не кешировался жестко в будущем. Проверил. Оффлайн режим работает без него в этом кеше.
];
const version = "0.0.7";//тут может быть номер вашей версии
const CACHE = "soltyk-cache" + version;//вместо soltyk - используйте свое уникальное название или доменное имя
self.addEventListener('install', function(event) {
var indexPage = new Request('index.html');
event.waitUntil(fetch(indexPage).then(function(response) {
var response2 = response.clone();
return caches.open(CACHE).then(function(cache) {
console.log('[PWA Builder] Cached index page during Install ' + response2.url);
return cache.put(indexPage, response2)
})
}))
});
self.addEventListener('fetch', function(event) {
var updateCache = function(request) {
return caches.open(CACHE).then(function(cache) {
return fetch(request).then(
			function(response2 = response.clone()) {
				if (updated.indexOf(response2.url) != -1){
					console.log('Исключен из кеша ' + response2.url)
				}else{
					console.log('[PWA Builder] add page to offline ' + response2.url)	
					return cache.put(request.clone(), response2)
				}                        
            })
})
};
event.waitUntil(updateCache(event.request));
event.respondWith(fetch(event.request).catch(function(error) {
console.log('[PWA Builder] Network request Failed. Serving content from cache: ' + error);
return caches.open(CACHE).then(function(cache) {
return cache.match(event.request).then(function(matching) {
var report = !matching || matching.status == 404 ? Promise.reject('no-match') : matching;
return report
})
})
}))
})

Потом в своих шаблонах, где-нибудь повыше в Body или в конце в head, поместите следующий скрипт подключения:

<script>
if (navigator.serviceWorker.controller) {
  console.log('[PWA Builder] active service worker found, no need to register')
} else {
  navigator.serviceWorker.register('sw.js', {
    scope: './'
  }).then(function(reg) {
    console.log('Service worker has been registered for scope:'+ reg.scope);
  });
}
</script>

Этот скрипт кеширует содержимое скриптов, стилей, картинок html-страниц и другого - в область кеша Service Worker в браузере.

При отсутствии интернета у пользователя - загружаются страницы из этого кэша.

Это полезно, если отрубился интернет или повис сервер - пользователи продолжают пользоваться вашим сайтом как обычно.

Баги и ошибки

При обращении к внешним ресурсам для кеширования или ресурсам, которые не позволяют парсить, в логах консоли браузера возникает следующая ошибка:

Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Cannot construct a Request with a Request object that has already been used. at sw.js:20

Пробовал решить проблему с помощью создания JS-метода .clone()  [создает копию выбранных элементов, включая дочерние узлы, текст и атрибуты]. Но если создавать копию объекта - нет ошибки и нет кеширования...

Если вы сильны в JavaScript и знаете решение, пожалуйста, напишите решение в комментариях внизу статьи. Спасибо!

Я забил на эту ошибку. Кеширует и автономно работает, значит норм.

Баг 2. Была проблема с тем что жёстко кешируется сам файл sw.js, так и скрипт, который у меня отвечает за динамический вывод постов с Телеграмма.

Решение было найдено в исключении определенного массива URL, которые мы не хотим кешировать.

Баг 3. Нашел еще одно решение: добавлять в параметры при подключении скриптов и стилей - год, месяц и число для Telegramm-скрипта.

Проблема с кешем стоит остро. Если на бою запустить неправильный sw.js то он закешируется у пользователей и придется находить новые пути обновления Service Worker.

Как определить, что скрипт кеширует страницы?

В консоле ошибок ищем следующее объявление:

[PWA Builder] add page to offline https://soltyk.ru/sw.js

Если видим такую строчку, то данный URL был успешно закеширован и при отключении интернета и в целом, будет браться из хранилища ServiceWorker.

Настройка файла manifest

В корне сайта создаем файл со следующим именем manifest.webmanifest. Пример содержимого такого файла:

{"name":"SEO-блог Soltyk.ru",
"short_name":"Soltyk.ru",
"theme_color":"#0c49b1",
"background_color":"#0c49b1",
"display":"standalone",
"Scope":"/",
"start_url":"https://soltyk.ru/",
"icons":[
{"src":"https://soltyk.ru/assets/images/icons/icon-36x36.png","sizes":"36x36"},
{"src":"https://soltyk.ru/assets/images/icons/icon-48x48.png","sizes":"48x48"},
{"src":"https://soltyk.ru/assets/images/icons/icon-72x72.png","sizes":"72x72"},
{"src":"https://soltyk.ru/assets/images/icons/icon-96x96.png","sizes":"96x96"},
{"src":"https://soltyk.ru/assets/images/icons/icon-128x128.png","sizes":"128x128"},
{"src":"https://soltyk.ru/assets/images/icons/icon-144x144.png","sizes":"144x144"},
{"src":"https://soltyk.ru/assets/images/icons/icon-152x152.png","sizes":"152x152"},
{"src":"https://soltyk.ru/assets/images/icons/icon-192x192.png","sizes":"192x192"},
{"src":"https://soltyk.ru/assets/images/icons/icon-384x384.png","sizes":"384x384"},
{"src":"https://soltyk.ru/assets/images/icons/icon-512x512.png","sizes":"512x512"}],
"lang":"Russian",
"screenshots":[],
"description":"Персональный SEO-блог Солтык Алексея",
"orientation":"any"}

Где:

  • name - название вашего веб-приложения;
  • short_name - короткое название PWA-приложения;
  • theme_color - задаем фон верхней панели браузера;
  • background_color - ожидаемый цвет фона приложения;
  • display - выбираем значение "standalone", которое позволит сайту работать как отдельное приложение;
  • Scope - задаем базовый url (подобие тега base), позволяет указать директурию с манифестом;
  • start_url - страница, загружаемая по-умолчанию и создающая стартовую точку в приложении;
  • icons - массив, в котором можно прописать различные форматы изображений, отображаемы в качестве иконок, превьюшек на различных устройствах;
  • lang - задаем язык нашего приложения;
  • screenshots - аналогично иконкам (icons) создается массив скриншотов нашего приложения;
  • description - добавляем небольшое описание своего сайта-приложения;
  • orientation - указываем ориентацию нашего приложения, если у нас адаптивный сайт и можно вращать его как угодно (горизонтальная или вертикальная ориентация), то выбираем значение any.

Это основные параметры манифеста.

Генерация манифеста через конструктор PWABuilder

Автоматически можно сгенерировать такой manifest через конструктор PWA-приложений: Your W3C Manifest

Генерируем файл манифеста

С помощью сервиса PWABuilder можно интуитивно заполнить все поля и сгенерировать код для своего файла манифеста.

Подключение манифеста на сайте

После этого не забудьте положить файл в корень и подключить его в head на всех страницах сайта:

<link rel='manifest' href='/manifest.webmanifest'>

Это основные моменты.

Проверка настройки PWA на сайте

Сайт можно проверить средствами для разработчика в браузере, так и с помощью сторонних сервисов.

Audits в средствах разработчика Google Chrome или Яндекс.Браузера

Проверка PWA средствами браузера

  1. Закрываем все лишние вкладки с проверяемым сайтом;
  2. Нажимаем на клавиатуре F12 (используем ПК);
  3. Переходим во вкладку "Audits" (1);
  4. Выбираем мобильную или ПК версию для проверки (2);
  5. Смотрим, чтобы была включена проверка "Progressive Web App" (3);
  6. Включаем имитацию медленного интернет-соединения (4);
  7. Очищаем Storage-кеш браузера (5)
    Внимание! Если используете мои чеклисты, то этот пункт может обнулить значения!
  8. Нажимаем кнопку "Run audits" (6).

Если написано:

"Multiple tabs are being controlled by the same service worker. Close your other tab on the same origin to audit this page"

- проверьте первый пункт действий.

После завершения теста должно отобразиться следующее:

Результаты проверки сайта через LigthHouse

Значок получен, значит, приложение работает! Все основные пункты выполнены.

Онлайн-валидация через PWABuilder

Второй вариант возможен через сервис онлайн-проверки PWA:

Заходим на главную страницу сервиса и вставляем свой проверяемый url:

Запускаем проверку сайта в PWABuilder

После проверки должны увидеть результат анализа:

Результат проверки приложения через PWABuilder

Результат 95% (1).

Единственно что я не решил, так это следующее предупреждение (2):

Service Worker has a pushManager registration

Согласно чек-листу ниже - пункт необязательный.

  • По факту я реализовал эту штуку, т.к. установлены Push-уведомления от SendPulse.
  • При повторном визите на сайт пояляется иконка "колокольчик" внизу справа на экране.
  • Удобная штука: при публикации новый статей - отправляется всем всплывающее уведомление со ссылкой на новую статью.

Progressive Web App Checklist

С помощью пунктов ниже, можно проверить, насколько соответствует ваш сайт стандарту PWA.

Прогрессивные веб-приложения (PWA) надежны, быстры и привлекательны.

Мы рассмотрим, что необходимо взять для PWA, чтобы продвинуться от базового уровня до образцового.

Для разработчиков составлен  контрольный список, с помощью которого можно добиться соответствия базовому стандарту PWA. 

Вы можете сделать свой сайт образцовым по PWA, обеспечивая более значимый автономный опыт, достигая интерактивности еще быстрее и заботясь о многих более важных деталях.

Ниже приведены пункты проверки из встроенного аудитора в браузере.

Быстрый и надежный

Fast and reliable

Загрузка страниц происходит достаточно быстро в мобильных сетях

Page load is fast enough on mobile networks

Быстрая загрузка страницы по сотовой сети обеспечивает хороший мобильный пользовательский опыт.

Если ваша страница загружается слишком медленно и не является интерактивной в течение 10 секунд. Посмотрите на возможности и диагностики в разделе "Производительность", чтобы узнать, как улучшить.

Мои советы:

  1. Протестируйте сайт в GTMetrix и Google PageSpeed;
  2. Исправьте выявленные технические ошибки, влияющие на скорость загрузки.

Текущая страница отвечает 200 кодом в автономном режиме

Current page responds with a 200 when offline

Если вы создаете прогрессивное веб-приложение, рассмотрите возможность использования работника службы (Service Worker), чтобы ваше приложение могло работать в автономном режиме.

Мои советы:

  1. Согласно инструкции выше - создайте sw.js файл, в скрипте уже есть технология кеширования для автономной работы.

start_url отвечает кодом 200 в автономном режиме 

start_url responds with a 200 when offline

Работник службы позволяет веб-приложению быть надежным в непредсказуемых сетевых условиях.

Мои советы:

  1. start_url задается в файле манифеста.

Устанавливаемый

Installable

Используйтся HTTPS

Uses HTTPS

Все сайты должны быть защищены HTTPS, даже те, которые не обрабатывают конфиденциальные данные. Протокол HTTPS предотвращает несанкционированное вмешательство или пассивное прослушивание сообщений между вашим приложением и пользователями и является необходимым условием для HTTP/2 и многих новых API веб-платформы.

Мои советы:

  1. Установите SSL-сертификат. И проверьте его через сервис.
  2. Протестируйте HTTP/2 через сервис.

Регистрирует работника службы, который управляет page и start_url

Registers a service worker that controls page and start_url

Service worker - это технология, которая позволяет приложению использовать множество прогрессивных функций веб-приложения, таких как автономный режим, добавление на рабочий стол и push-уведомления.

Мои советы:

  1. Следуйте инструкции по подключению файла sw.js в статье выше.
  2. Обязательно пропишите start_url в файле manifest.

Манифест веб-приложения соответствует требованиям к установке

Web app manifest meets the installability requirements

Браузеры могут проактивно предлагать пользователям добавить ваше приложение на свой рабочий стол, что может привести к более высокой вовлеченности.

Пример:

Добавление приложения на рабочий стол

Оптимизация прогрессивного web-приложения

PWA Optimized

Перенаправляет HTTP-трафик на HTTPS

Redirects HTTP traffic to HTTPS

Если вы уже настроили HTTPS, убедитесь, что вы перенаправляете весь HTTP-трафик на HTTPS.

Мои советы:

  1. Почитайте статью про переход на HTTPS-протокол с т.з. поисковых систем.
  2. После настройки редиректа - через сервис проверьте перенаправление.

Настроено для пользовательского экрана заставки

Configured for a custom splash screen

Тематическая экранная заставка обеспечивает высокое качество работы, когда пользователи запускают приложение со своих домашних экранов.

Мои советы:

  1. Создайте логотипы со следующими размерами изображений: 36x36, 48x48, 72x72, 96x96, 128x128, 144x144, 152x152, 192x192, 384x384, 512x512 px.
    "WTF?! А чего так много?" - для разных устройств разные разрешения.
  2. Не забудьте оптимизировать изображения. К примеру, сжать их через сервис TinyPNG.

Задан цвет темы адресной строки

Sets an address-bar theme color

Адресную строку браузера можно настроить в соответствии с оформлением вашего сайта.

Мои советы:

  1. Укажите в файле манифеста значения цвета для параметров: "theme_color, "background_color".

Содержимое имеет правильный размер для окна просмотра

Content is sized correctly for the viewport

Если ширина содержимого вашего приложения не соответствует ширине окна просмотра, ваше приложение может быть не оптимизировано для мобильных экранов.

Сайт имеет тег <meta name= "viewport" > с шириной или начальным масштабом

Has a <meta name="viewport"> tag with width or initial-scale

Добавьте метатег viewport, чтобы оптимизировать приложение для мобильных экранов.

Мои советы:

  1. У меня в head следующий рабочий viewport: 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Содержит некоторый контент, когда JavaScript недоступен

Contains some content when JavaScript is not available

Ваше приложение должно отображать некоторый контент, когда JavaScript отключен, даже если это просто предупреждение пользователю о том, что JavaScript требуется для использования приложения.

Мои советы:

  1. Сайт должен отдавать контент даже с отключенным JS.
  2. Отключите его в настройках браузера или в консоли разработчика.

Предоставить значок приложения для сенсорных устройств компании Apple

Provides a valid apple-touch-icon

Для идеального внешнего вида на iOS, когда пользователи добавляют на главный экран, определите значок apple-touch. Он должен указывать на квадратное и непрозрачное 192PX (или 180px) PNG-изображение.

Мои советы:

  1. Я прописал в head следующий код: 
    <link rel="apple-touch-icon" sizes="192x192" href="/assets/images/icons/icon-192x192.png">

Дополнительные элементы для проверки вручную

Additional items to manually check

Эти проверки важны для базового контрольного списка PWA, но не проверяются автоматически в Lighthouse. Они не влияют на ваш рейтинг, но важно, чтобы вы проверили их вручную.

Сайт работает кроссбраузерно

Site works cross-browser

Чтобы охватить наибольшее количество пользователей, сайты должны работать в каждом популярном браузере.

Мои советы:

  1. Проверьте свой сайт через валидатор W3C или по инструкции через SEO-программу WebSite Auditor.

При переходе на страницы не чувствуются, что они блокируются сетью

Page transitions don't feel like they block on the network

Переходы между страницами должны быть быстрыми, даже в медленной сети, когда вы используете приложение. Это ключ к воспринимаемой производительности.

Мои советы:

  1. Используйте defer, async, prefetch, preconnect, dns-prefetch, preload, windows.onload, $(document).ready и другие методы...

Каждая страница имеет URL-адрес

Each page has a URL

Убедитесь, что отдельные страницы являются глубокими ссылками через URL-адреса и что URL-адреса уникальны для целей совместного использования в социальных сетях.

Мои советы:

  1. Для соцсетей часто учитывается разметка Open Graph. Важно значение og:url - именно этот путь будет использоваться в качестве ссылки при постинге и шеринге.
  2. Не используйте вложенность URL более 4 уровня, и не делайте их сверхдлинными...

Сравнил, для Mobile и Desktop - пункты одинаковые.

Контрольный список базовых прогрессивных веб-приложений

Baseline Progressive Web App Checklist

Более расширенный список для проверки своего PWA-приложения.

Инструмент Lighthouse способен автоматически проверять многие элементы в этом списке и может оказаться полезным в легко тестируемых сайтах.

Сайт обслуживается через HTTPS

Site is served over HTTPS

Тест

  • Использовать Lighthouse, чтобы проверить, подается через HTTPS

Исправление

  • Реализуйте HTTPS и проверьте letsencrypt.org для начала.

Страницы реагируют на планшеты и мобильные устройства

Pages are responsive on tablets & mobile devices

Тест

  • Используйте Lighthouse, чтобы проверить, что да для всех проектов является mobile-friendly, хотя ручная проверка также может быть полезна.
  • Проверьте мобильный дружественный тест

Исправление

  • Посмотрите на реализацию адаптивного дизайна или адаптивное обслуживание удобного для просмотра сайта (тег viewport).

Все URL-адреса приложений загружаются в автономном режиме

All app URLs load while offline

Тест

  1. Загрузите различные страницы в PWA с включенным режимом полета.
  2. Убедитесь, что приложение представляет некоторый контент даже в автономном режиме.
  3. Используйте Lighthouse, чтобы проверить, что начальный URL-адрес отвечает 200 кодом в автономном режиме.

Исправление

  • Используйте работника сферы обслуживания Service Worker.

Метаданные, предоставляемые для добавления на главный экран

Metadata provided for Add to Home screen

Тест

  • Используйте Lighthouse, чтобы проверить, что пользователю может быть предложено, добавить на главный экран приложение.

Исправление

  • Добавьте файл манифеста веб-приложения в проект.

Сначала загружаются быстро даже в сетях 3G

First load fast even on 3G

Тест

  • Используйте Lighthouse на Nexus 5 (или симуляция другого устройства), чтобы проверить время до interactive <10s для первого посещения в моделируемой сети 3G.

Исправление

  • Существует множество способов повышения производительности.
  • Вы можете лучше понять свою производительность, используя PageSpeed Insights (aim for score >85) и SpeedIndex на WebPageTest (aim for <4000 first view on Mobile 3G Nexus 5 Chrome)
  • Несколько советов должны сосредоточиться на загрузке меньшего количества скриптов, убедитесь, что как можно больше скриптов загружается асинхронно с помощью <script async> и убедитесь, что render blocking CSS исправлен как таковой.
  • Вы также можете изучить использование шаблона PRPL и инструментов, таких как модуль PageSpeed на сервере.

Сайт работает кроссбраузерно

Site works cross-browser

Тест

  • Для тестирования проверьте сайт в браузерах в Chrome, Edge, Firefox и Safari

Исправление

  • Исправьте проблемы, возникающие при запуске кросс-браузерного приложения.

При переходе на страницы не чувствуются, что они блокируются в сети

Page transitions don't feel like they block on the network

Переходы должны быть быстрыми, когда вы нажимаете на ссылки, даже в медленной сети. Это ключ к визуальной производительности.

Тест

Откройте приложение в симулированной очень медленной сети. Каждый раз, когда вы нажимаете ссылку / кнопку в приложении, страница должна немедленно реагировать, либо:

  • Переход сразу на следующий экран и отображение экрана загрузки заполнителя во время ожидания содержимого из сети.
  • Индикатор загрузки отображается, пока приложение ожидает ответа от сети.

Исправление

  • При использовании одностраничного приложения (клиентская визуализация) немедленно перейдите на следующую страницу и покажите на экране структуру (скелет содержимого), а также используйте любой контент, например заголовок или миниатюру, уже доступный при загрузке контента.

Каждая страница имеет URL-адрес

Each page has a URL

Тест

  1. Убедитесь, что отдельные страницы являются глубокими ссылками через URL-адреса и что они являются уникальными для целей совместного использования в социальных сетях.
  2. Путем тестирования URL могут быть открыты и непосредственно доступны через новые окна браузера.

Исправление

  • При создании одностраничного приложения убедитесь, что клиентский маршрутизатор может восстановить состояние приложения по заданному URL-адресу.

Примерный прогрессивный контрольный список веб-приложений

Exemplary Progressive Web App Checklist

Многие из этих проверок должны выполняться вручную, так как они еще не реализованы в Lighthouse.

Индексация и социализация

Indexability & social

Контент сайта индексируется в Google

Site's content is indexed by Google

Тест

  • Используйте Fetch as Google tool для предварительного просмотра того, как Google будет видеть ваш сайт при обходе.

Исправление

  • Система индексирования Google работает на JavaScript, но некоторые проблемы могут потребоваться исправить, чтобы сделать контент доступным.
  • Например, если вы используете новые функции браузера, такие как Fetch API, убедитесь, что они заполнены в браузерах без поддержки.

Schema.org метаданные предоставляются там, где это необходимо

Schema.org metadata is provided where appropriate

Schema.org метаданные могут помочь улучшить внешний вид вашего сайта в поисковых системах.

Тест

  • Используйте инструмент тестирования для обеспечения заголовка, изображения, описания и т. д. имеются в наличии.

Исправление

Разметка содержимого. Например:

  • Приложение рецепта должно иметь разметку типа Recipe для Rich Cards.
  • Новостное приложение должно иметь разметку типа NewsArticle для Rich Cards и / или поддержку AMP.
  • Приложение электронной коммерции (Ecommerce сайты) должно иметь разметку типа Product для Rich Cards.

При необходимости предоставляются социальные метаданные

Social metadata is provided where appropriate

Тест

  • Откройте представительскую страницу в поиске Facebook и убедитесь, что она выглядит приятно.
  • Проверьте, что метаданные Card Twitter присутствуют (например, 
    < meta name="twitter:card" content= "summary"/>
    ), если вы считаете, что это будет уместно.

Исправление

  • Размечайте контент с помощью тегов Open Graph и в соответствии с рекомендациями Twitter.

Канонические URL-адреса предоставляются при необходимости

Canonical URLs are provided when necessary

Это необходимо только в том случае, если ваш контент доступен по нескольким URL-адресам.

Тест

  • Определите, доступна ли какая-либо часть контента по двум различным URL-адресам.
  • Откройте обе эти страницы и убедитесь, что они используют теги <link rel=canonical> в заголовке для указания канонической версии

Исправление

  • Добавьте канонический тег ссылки к <head> каждой страницы, указывая на канонический исходный документ.

Страницы используют History API

Pages use the History API

Тест

  • Для одностраничных приложений убедитесь, что сайт не использует идентификаторы фрагментов. Например, все после #! в https://example.com/#!user/26601.

Исправление

  • Используйте History API вместо фрагментов страниц.

Пользовательский опыт

User experience

Содержимое не прыгает при загрузке страницы.

Тест

  • Загрузите различные страницы в PWA и убедитесь, что содержимое или пользовательский интерфейс не "прыгают" при загрузке страницы.

Исправление

  1. Убедитесь, что все содержимое, особенно изображения и объявления, имеют фиксированный размер в CSS или встроенный в элемент.
  2. Перед загрузкой изображения вы можете показать серый квадрат или размытую / маленькую версию (если она доступна) в качестве заполнителя.

Нажатие назад со страницы сведений сохраняет положение прокрутки на предыдущей странице списка

Pressing back from a detail page retains scroll position on the previous list page

Тест

  1. Найдите представление списка в приложении.
  2. Прокрутить вниз.
  3. Коснитесь элемента, чтобы перейти на страницу сведений.
  4. Прокрутите страницу сведений.
  5. Нажмите назад и убедитесь, что просматриваемый список прокручивается в том же месте, где он был до того, как была нажата подробная ссылка/кнопка.

Исправление

  • Восстановите положение прокрутки в списках, когда пользователь нажимает "назад".
  • Некоторые библиотеки маршрутизации имеют функцию, чтобы сделать это для вас.

При нажатии входы не закрываются экранной клавиатурой

When tapped, inputs aren't obscured by the on screen keyboard

Тест

  1. Найдите страницу с текстовыми вводами.
  2. Прокрутите, чтобы поместить ввод текста как можно ниже на экране.
  3. Коснитесь ввода и убедитесь, что он не закрыт при появлении клавиатуры.

Исправление

  • Исследуйте с помощью таких функций, как Element.scrollIntoView () и Element.scrollIntoViewIfNeeded (), чтобы обеспечить видимость ввода при нажатии.

Контент легко доступен для совместного использования в автономном или полноэкранном режиме

Content is easily shareable from standalone or full screen mode

Тест

  • Убедитесь, что в автономном режиме (после добавления приложения на главный экран) вы можете обмениваться контентом, если это необходимо, из пользовательского интерфейса приложения.

Исправление

  1. Предоставьте кнопки социальных сетей или общую кнопку общего доступа в пользовательском интерфейсе.
  2. Если это общая кнопка, вы можете напрямую скопировать URL-адрес в буфер обмена пользователя при нажатии, предложить им социальные сети для совместного использования или попробовать новый API Web Share для интеграции с родной системой обмена на Android.

Сайт реагирует на размеры экрана телефона, планшета и рабочего стола

Site is responsive across phone, tablet and desktop screen sizes

Тест

  • Просмотрите PWA-приложение на малых, средних и больших экранах и убедитесь, что оно работает корректно на всех.

Исправление

  • Внедряйте адаптивные пользовательские интерфейсы.

Любые приглашения на установку приложений не используются чрезмерно

Any app install prompts are not used excessively

Тест

  • Проверьте, что PWA не использует промежуточную установку приложения при загрузке

Исправление

  • Должен быть только один верхний или нижний баннер установки приложения.
  • После добавления PWA на главный экран пользователя, все верхние / нижние баннеры должны быть удалены.
  • Применение. Также может помочь затемнение экрана, как рекомендуется для запроса разрешений ниже.

Приглашение добавить на главный экран перехватывается

The Add to Home Screen prompt is intercepted

Тест

  • Проверьте, что браузер не отображает A2HS в неподходящий момент, например, когда пользователь находится в середине потока, который не должен прерываться, или, когда на экране уже отображается другое приглашение.

Исправление

  • Перехватить beforeinstallpromptevent и запросить позже;
  • Chrome управляет, когда запускать приглашение, но для ситуаций это может быть не идеально. Вы можете отложить приглашение на более позднее время в использовании приложения.

Производительность

Performance

Первая загрузка очень быстрая даже на 3G

First load very fast even on 3G

Тест

  • Используйте Lighthouse на Nexus 5 (или аналогичном), чтобы проверить время до интерактивного <5 сек. для первого посещения в моделируемой сети 3G (в отличие от цели 10 сек. для базовых PWAs)

Исправление

  • Просмотрите раздел производительности веб-основы и убедитесь, что вы следуете рекомендациям.
  • Вы можете лучше понять свою производительность, используя PageSpeed Insights (цель для оценки >85) и SpeedIndex на WebPageTest (цель для оценки <4000 на первом представлении на мобильном 3G Nexus 5 Chrome).
  • Несколько советов должны сосредоточиться на загрузке меньшего количества скриптов, убедитесь, что как можно больше скриптов загружается асинхронно с помощью <script async> и убедитесь, что render blocking CSS помечен как таковой.

Кэширование

Caching

Сайт использует сеть  cache-first.

Тест

  • Установите эмуляцию сети на самую медленную настройку и просмотрите приложение.
  • Затем установите эмуляцию сети в автономный режим и просмотрите ее. Приложение не должно чувствовать себя быстрее, когда в автономном режиме, чем на медленном соединении.

Исправление

  • Используйте кэш-первые ответы везде, где это возможно.

Сайт соответствующим образом информирует пользователя, когда он находится в автономном режиме

Site appropriately informs the user when they're offline

Тест

  • Эмулируйте автономную сеть и убедитесь, что PWA указывает на то, что вы находитесь в автономном режиме.

Исправление

  • Используйте API сетевой информации, чтобы показать пользователю указание, когда он находится в автономном режиме.

Push-уведомления

Push notifications

Этот контрольный список применяется только в том случае, если уведомления реализованы.

Добавление push-уведомлений не является обязательным требованием для образцового прогрессивного веб-приложения.

Предоставьте контекст пользователю о том, как будут использоваться уведомления

Тест

  • Посетите сайт и найдите поток push-уведомлений
  • При отображении запроса разрешения браузером убедитесь, что контекст был предоставлен, объясняя, для чего сайт хочет получить разрешение.
  • Если сайт запрашивает разрешение на загрузку страницы, убедитесь, что он предоставляет очень четкий контекст одновременно для того, почему пользователь должен включить уведомления толчка.

Исправление

  • Создание удобных для пользователя потоков разрешений уведомлений.

Пользовательский интерфейс, побуждающий пользователей включать Push-уведомления, не должен быть чрезмерно агрессивным.

UI encouraging users to turn on Push Notifications must not be overly aggressive.

Тест

  1. Посетите сайт и найдите push-уведомление в потоке.
  2. Убедитесь, что если вы отклоните push-уведомление, сайт не будет повторно запрашивать таким же образом в течение того же сеанса.

Исправление

  • Если пользователи говорят, что им не нужно определенное уведомление, не перепрофилируйте его, по крайней мере, в течение нескольких дней (например, одной недели).

Сайт затемняет экран, когда отображается запрос разрешения

Site dims the screen when permission request is showing

Тест

  1. Посетите сайт и найдите поток выбора push-уведомлений.
  2. Когда Chrome показывает запрос разрешения, убедитесь, что страница "затемняет" (помещая темное наложение) все содержимое, не относящееся к объяснению того, почему сайт нуждается в push-уведомлениях.

Исправление

  1. При вызове Notification.requestPermission затемняет экран.
  2. Отмените его, когда обещание разрешится.

Push-уведомления должны быть своевременными, точными и актуальными

Push notifications must be timely, precise and relevant

Тест

Включите push-уведомления с сайта и убедитесь, что они используют push-уведомления для следующих случаев:

  • Своевременное уведомление появляется, когда пользователи хотят его и когда это имеет значение для них.
  • Точное уведомление - это уведомление, содержащее конкретную информацию, которая может быть немедленно обработана.
  • Релевантное сообщение - это сообщение о людях или предметах, которые волнуют пользователя.

Исправление

  • Если ваш контент не является своевременным и релевантным для этого пользователя, рассмотрите возможность использования электронной почты.

Предоставляет элементы управления для включения и отключения уведомлений

Provides controls to enable and disable notifications

Тест

  1. Включите push-уведомления с сайта.
  2. Убедитесь, что на сайте есть место, которое позволяет управлять разрешениями на уведомления или отключать их.

Исправление

  • Создайте пользовательский интерфейс, позволяющий пользователям управлять своими настройками уведомлений.

Дополнительные элементы

Additional features

Пользователь входит в систему на всех устройствах через API управления учетными данными

Это применимо только в том случае, если на вашем сайте есть поток входа.

Тест

  1. Создайте учетную запись для службы и убедитесь, что отображается диалоговое окно Сохранить пароль/учетную запись. Нажмите Кнопку "Сохранить".
  2. Очистите файлы cookie для сайта (нажав на замок или настройки Chrome) и обновите сайт. Убедитесь, что вы либо видите средство выбора учетной записи (например, если есть несколько сохраненных учетных записей), либо автоматически входите в систему.
  3. Выйдите из системы и обновите сайт. Убедитесь, что вы видите средство выбора учетной записи.

Исправление

  • Следуйте руководству по интеграции API управления учетными данными

Пользователь может легко оплатить через собственный пользовательский интерфейс из API запроса платежа.

User can pay easily via native UI from Payment Request API.

Эта проверка применяется только в том случае, если ваш сайт принимает платежи.

Тест

  1. Введите поток платежей.
  2. Вместо того, чтобы заполнять обычную форму, убедитесь, что пользователь может легко платить через собственный пользовательский интерфейс, вызванный API запроса платежа.

Исправление

  • Следуйте руководству по интеграции API запроса платежа.

Заключение

Устали читать? Да, задач не мало. А куда деваться то. Внедрите хотя бы часть пунктов из чек-листа, многие из них косвенно или напрямую влияют на SEO.

Связаться в Telegram

Рейтинг: 5/5
7 голосов

Следующие страницы вас также могут заинтересовать:

Обновлено: 27.04.2021