Как сделать Progressive Web Apps: руководство новичка | Медиа Нетологии

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

First load fast even on 3G

Тест

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

Исправление

Что дальше

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

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

Если во время работы с PWA на WordPRess или Gatsby будут вопросы, – пишите в комментариях. Разберемся.

Сайт имеет тег <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">

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

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

Что такое прогрессивное веб-приложение?

Термин «Progressive Web App» придумали Алекс Рассел и Франсес Берриман. По словам Алекса, прогрессивные веб-приложения — это всего лишь веб-сайты, которые принимали правильные витамины. То, что лежит в основе PWA, нельзя назвать новым фреймворком или новой технологией.

Значок PWA на главном экране

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

«многие считают pwa технологией будущего, и я с ними согласен»: программист отдела разработки сайтов «текстерры» николай ильичев

Программист «Текстерры» Николай Ильичев поделился с читателями своим мнением о прогрессивных веб-приложениях.

Дмитрий Дементий: Добрый день, Николай. Насколько актуально использовать PWA? Нужно ли владельцам бизнеса добавлять на корпоративные сайты или сайты интернет-магазинов функциональность прогрессивных приложений?

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

Д.Д.: Одна из фишек PWA – возможность использовать сайт офлайн. То есть даже если у пользователя нет подключения к интернету, он может пользоваться кэшированными страницами. Это актуально для контент-проектов, блогов, СМИ. Не будет ли у пользователей проблем из-за кэширования? PWA в фоновом режиме что-то грузит при доступе к интернету, насколько это критично?

Н.И.: Будут проблемы или нет – зависит от разработчика, который задаст правила загрузки и кэширования данных. Если на сайте много видео, и все это видео скачивать – в итоге просто закончится место, выделенное для кэша. Обычно оно считается как процент от свободной памяти устройства.

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

Д.Д.: Реализовать функциональность PWA на сайте можно в пару кликов без технических знаний. Почему, по вашему мнению, PWA пока не очень широко используются?

Н.И.: Технология достаточно новая – в этом вся причина. Google анонсировал ее в 2022 году, а более или менее нормальная поддержка браузерами появилась еще позже. Многие даже не слышали об этой технологии, а кто слышал, не понимают, какие преимущества она имеет.

Хотя стоит заметить, что ситуация постоянно улучшается. Многие крупные компании уже используют данную технологию. А разработчиков, способных реализовать этот функционал, становится все больше. Многие считают, что за этой технологией будущее, и я с ними согласен.

Д.Д.: Для реализации PWA сайт изначально должен обладать рядом характеристик: адаптивностью, высокой скоростью загрузки, доступностью по безопасному протоколу соединения. Значит ли это, что реализация PWA заставит владельца сайта «подтянуть хвосты» и улучшить сайт?

Н.И.: Так и есть. Но, конечно, желательно, чтобы эти хвосты подтягивались по умолчанию, либо не возникали вовсе. Адаптивность – без нее никуда, большую часть времени мы ищем что-то в интернете через смартфон, и сайт без адаптивного дизайна просто не выживет: пользователь просто не сможет им пользоваться.

Д.Д.: Как вы думаете, повлияет ли на популярность PWA тот факт, что этот формат активно продвигает Google?

Н.И.: Думаю, да. Google у всех на слуху, а технологии, которые он продвигает, обычно становятся достаточно популярны. Эта компания обладает внушительными ресурсами, позволяющими постоянно улучшать технологии, которые она считает перспективными.

▍1. манифест приложения

Манифест PWA — это файл

manifest.json

примерно такого содержания:

{
  "name": "Trending Meme",
  "short_name": "Meme",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "orientation": "portrait",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

Перед нами — обычный JSON-файл, который содержит мета-информацию о веб-приложении. Здесь есть данные о значках приложения (один из них пользователь видит на главном экране после установки приложения), о фоновом цвете приложения, о его полном и сокращённом названии, и так далее. Этот манифест можно написать самостоятельно, а можно использовать специальный

, автоматизирующий создание таких файлов.

Сайт, облегчающий создание файла manifest.json

▍2. сервис-воркеры

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

Вот пример файла serviceworker.js.

self.addEventListener('fetch', event => {
    // кэширование данных для работы без подключения к сети
    const {request} = event;
    const url = new URL(request.url);
    if(url.origin === location.origin) {
        event.respondWith(cacheData(request));
    } else {
        event.respondWith(networkFirst(request));
    }
});
async function cacheData(request) {
    const cachedResponse = await caches.match(request);
    return cachedResponse || fetch(request);
}

▍3. значки

Значки используются для запуска установленных на устройство PWA. Вышеупомянутый сайт, который помогает составлять файлы-манифесты, позволяет автоматически сгенерировать набор значков приложения на основе единственного загруженного на этот сайта графического файла размером 512×512 пикселей. Сгенерированные файлы сохраняются в формате

.png

Audits в средствах разработчика google chrome или яндекс.браузера

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”

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

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

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

Progressive web app checklist

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

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

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

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

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

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

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

Push notifications

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

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

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

Тест

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

Исправление

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

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

Push notifications must be timely, precise and relevant

Тест

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

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

Исправление

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

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

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

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

Schema.org metadata is provided where appropriate

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

Тест

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

Исправление

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

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

start_url responds with a 200 when offline

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

Мои советы:

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

Баги и ошибки

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

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 с помощью gatsby

Gatsby – генератор статических сайтов, написанный React (это библиотека JavaScript). На Gatsby работают большие ресурсы, в том числе ecommerce-проекты, лендинги, корпоративные сайты. Для профессионального использования Gatsby на серьезных проектах нужно разбираться в коде.

Но создать небольшой сайт-визитку, портфолио или блог на Gatsby можно и без технических знаний. Для этого нужно воспользоваться библиотекой готовых сборок для новичков. Рассмотрим создание PWA на примере минималистичной сборки для блога от создателя Gatsby Кайла Мэттьюза.

Установите на компьютер Node.js. Это нужно, чтобы запустить на компьютере локальный сервер, необходимый для работы с Gatsby. Подойдет как LTS-, так и Current-версия Node.js. После установки откройте командную строку и введите две команды: node –version и npm –version. Чтобы запустить командную строку в Windows, введите «cmd» в поиске на панели задач.

Если все сделано верно, увидите примерно такую картину (версии могут отличаться):

Установите Git. Это система контроля версий, она необходима для работы с Gatsby. После установки создайте учетную запись. Для этого введите в командную строку свои данные:

Установите Gatsby CLI с помощью команды npm install -g gatsby-cli.

Теперь можно установить сборку Gatsby. В командной строке выберите диск D или другой несистемный диск на ПК. Для этого введите команду D:.

Gatsby не работает, если в названии папки или в пути к файлу есть кириллические символы.

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

Fast and reliable

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

All app URLs load while offline

Тест

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

Исправление

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

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

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

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

Добавить service worker

Service worker — это еще один файл, который мы добавляем в наш проект, он позволит сайту работать в автономном режиме. Наличие service worker — это также требование PWA, поэтому он определенно необходим.

Service worker — довольно сложная штука. К счастью, мне порекомендовали попробовать sw-toolbox и дали ссылку на код. Я скопировал код и слегка упростил его, удалив один из дополнительных файлов JavaScript, вместо этого прописав все в service worker.

Создать service worker можно в три этапа.

1. Зарегистрировать service worker, добавив этот код в head вашего index.html:

if (‘serviceWorker’ in navigator) {

window.addEventListener(‘load’, function() {

navigator.serviceWorker.register(‘/sw.js’).then(

function(registration) {

// Registration was successful

console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope); },

function(err) {

// registration failed 🙁

console.log(‘ServiceWorker registration failed: ‘, err);

});

});

2. Добавить sw-toolbox в свой проект — просто закинуть этот файл в корневую папку.

3. Создать новый файл, назвать «sw.js» и вставить в него это:

‘use strict’;

importScripts(‘sw-toolbox.js’);

toolbox.precache([“index.html”,”style/style.css”]);

toolbox.router.get(‘/images/*’, toolbox.cacheFirst);

toolbox.router.get(‘/*’, toolbox.networkFirst, {

networkTimeoutSeconds: 5});

Проверьте, чтобы все пути к файлам выглядел правильно, отредактируйте исходную документацию и перечислите все файлы, которые хотите сохранить в автономном режиме. Я использую для своего сайта только index.html и style.css, но у вас могут быть и другие.

Теперь снова протестируем сайт с помощью Lighthouse:

После добавления service worker — протестировано на localhost

Если вы хотите, чтобы service worker делал что-то еще, кроме простого сохранения определенных страниц, например, показывал конкретную автономную страницу, когда нет доступа в интернет, попробуйте pwabuilder, у него есть несколько различных скриптов service worker, которые можно использовать.

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

Additional features

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

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

Тест

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

Исправление

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

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

Additional items to manually check

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

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

Page load is fast enough on mobile networks

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

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

Мои советы:

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

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

Sets an address-bar theme color

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

Мои советы:

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

Зачем бизнесу использовать progressive web apps

Все ответы на вопрос из подзаголовка можно найти в предыдущем разделе. Повторим главные тезисы для закрепления. PWA помогают бизнесу:

• Пробраться на мобильное устройство пользователя в обход Google Play и других магазинов приложений.
• Сделать сайт доступным офлайн. Это работает даже для интернет-магазинов, но информация об оформленных сделках «прилетает» в магазин, когда у пользователя появляется интернет.
• Повысить скорость загрузки сайта на мобильных устройствах.
• Рассылать пользователям уведомления.

Внедрение PWA дает измеримые результаты. Вот несколько примеров:

Важно: функциональность прогрессивного веб-приложения не мешает пользоваться сайтом обычным способом. Не менее важно: превратить сайт в PWA быстрее и дешевле, чем сделать нативное приложение.

С помощью инструкций ниже вы за 5 минут реализуете функциональность progressive web app на своем сайте. Бесплатно. Правда, повезет не всем, а только тем, кто выбирает нормальные движки для сайта. Остальным придется расплачиваться за неправильный выбор в прямом смысле: нанимать разработчиков и платить за внедрение PWA.

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

Indexability & social

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

Each page has a URL

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

Мои советы:

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

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

Как в пару кликов превратить сайт в pwa с помощью готовых плагинов

Владельцам популярных CMS повезло: они могут превратить сайт в прогрессивное приложение с помощью плагинов.

На WordPress по состоянию на конец 2022 года работает треть от общего количества сайтов или почти две третьих сайтов на CMS. Поэтому инструкция написана на примере этого движка. После нее будет полезная информация для тех, кто работает с другими CMS.

Установите на сайт бесплатный плагин PWA for WP. Я протестировал несколько модулей из официального каталога WordPress и остановился на этом решении. Результаты его работы можно увидеть в начале статьи. Если хотите, попробуйте другие плагины.

Укажите общие настройки. Выберите иконку для рабочего стола (App Icon) и иконку-прелоадер (App Splash Screen Icon). В настройках есть возможность выбрать ориентацию приложения (портрет или ландшафт), но эта функция не работает. Приложение отображается в режиме «портрет» независимо от настроек.

Чтобы отправлять пользователям push-уведомления, зарегистрируйте проект в Firebase, получите ключ к API и укажите его на вкладке Push notifications.

В расширенных настройках включите офлайн-отслеживание с помощью Google Analytics. По желанию включите поддержку PWA-уведомлений на экранах десктопов.

В настройках кэширования выберите автоматическое создание кэша. Укажите количество постов, которые будут кэшированы. Максимальное значение – 50.

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

Что делать, если сайт работает не на WordPress? Ловите решения:

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

Промежуточный итог: бесплатные модули для реализации PWA есть у WordPress, включая WooCommerce и Drupal. За модули для Joomla!, OpenCart, CS-Cart и Prestashop нужно платить. Для реализации прогрессивного веб-приложения на других движках придется заплатить разработчикам.

Если у вас пока нет сайта или вы хотите протестировать прогрессивное веб-приложение перед внедрением на основном сайте, переходите к следующему шагу.

Как происходит процесс установки

Вы можете сами пройти процесс установки, открыв в браузере на мобильном устройстве страницу.

1. Пользователь переходит на сайт и видит всплывающее окно с предложением. Например: «Пицца со скидкой 25% при заказе с приложения».

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

3. Пользователь переходит в приложение, внутри этого приложения открывается сайт и пользователь делает заказ со скидкой.

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

Как реализовать функциональность pwa на сайте

Для реализации PWA существующий сайт должен соответствовать требованиям:

Рекомендация для новичков: перед внедрением PWA сделайте резервную копию сайта. Резервное копирование нужно делать перед любыми изменениями.

Рассмотрим два способа реализовать PWA в порядке от простого к сложному.

Как создать прогрессивное веб-приложение?

Компания Google опубликовала

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

Какие задачи можно решать при помощи приложения на базе pwa

Каким бизнесам подходят pwa приложения

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

Ниже описал подробнее как можно использовать приложение на базе PWA

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

Canonical URLs are provided when necessary

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

Тест

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

Исправление

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

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

Content is easily shareable from standalone or full screen mode

Тест

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

Исправление

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

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

Site’s content is indexed by Google

Тест

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

Исправление

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

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

Baseline Progressive Web App Checklist

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

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

Кэширование

Caching

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

Тест

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

Исправление

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

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

Any app install prompts are not used excessively

Тест

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

Исправление

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

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

Web app manifest meets the installability requirements

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

Пример:

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

Metadata provided for Add to Home screen

Тест

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

Исправление

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

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

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

Тест

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

Исправление

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

Настраиваем pwa приложение на платформе 8.3.18 с бесплатным действительным сертификатом ssl

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

Configured for a custom splash screen

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

Мои советы:

1. Создайте логотипы со следующими размерами изображений: 36×36, 48×48, 72×72, 96×96, 128×128, 144×144, 152×152, 192×192, 384×384, 512×512 px.
   “WTF?! А чего так много?” – для разных устройств разные разрешения.
2. Не забудьте оптимизировать изображения. К примеру, сжать их через сервис TinyPNG.

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

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

Недостатки pwa приложения:

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

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

О чем еще стоит упомянуть

Подробнее про разработку PWA приложения можете узнать на специальной странице.

На этом пока все. Вкратце описал, что такое приложении на базе PWA технологии и как его можно использовать именно с позиции маркетолога.

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

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

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

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

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

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

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

Service Worker has a pushManager registration

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

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

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

PWA Optimized

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

First load very fast even on 3G

Тест

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

Исправление

Поддержка pwa

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

Сервис: Can I use

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

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

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

Полный обзор установки и настройки progressive web app

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

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

Provides a valid apple-touch-icon

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

Мои советы:

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

Provides controls to enable and disable notifications

Тест

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

Исправление

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

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

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

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

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

Тест

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

Исправление

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

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

Social metadata is provided where appropriate

Тест

Исправление

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

The Add to Home Screen prompt is intercepted

Тест

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

Исправление

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

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

Exemplary Progressive Web App Checklist

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

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

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

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

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

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

Performance

Прописать манифест

Следующее, что нужно сделать, это создать манифест. Манифест — это файл, содержащий данные о сайте: имя, цветовая тема, информация об иконках. У нас уже есть манифест, созданный генератором иконок, но мы его расширим.

Зайдите в генератор манифестов и заполните информацию о сайте. Если в чем-то не уверены, оставьте значение по умолчанию.

В правой части страницы есть данные JSON. Скопируйте и вставьте их поверх вашего файла manifest.json, убедившись, что форматирование не сломалось: возможно, где-то понадобится добавить запятую или удалить скобку. Мой манифест в конечном счете выглядит так. Запустите Lighthouse снова и посмотрите, работает ли манифест.

Данные Lighthouse после добавления манифеста и иконок

Протестировать pwa

Чтобы проверить, работает ли сайт как PWA, можно взять Lighthouse. Lighthouse — это расширение для Chrome, которое покажет, насколько PWA годен и можно ли его улучшить.

После установки откройте сайт и нажмите значок маяка в верхнем правом углу браузера, а затем «Generate Report». Через несколько секунд откроется новая вкладка с информацией о сайте: её можно прочесть целиком, а можно сосредоточиться на числах сверху и проигнорировать остальное:

Результаты Lighthouse 36/100 еще до начала работы — это не так уж плохо, учитывая, что я еще ничего не сделал с сайтом

Размещение на github

Теперь у вас есть PWA, пришло время поделиться им с миром. Я нашел самый простой способ сделать это бесплатно и безопасно — через GitHub Pages. GitHub GUI поможет вам разместить свой код в Github, создать репозиторий и поместить в него код. После этого найдите свой репозиторий на сайте, перейдите в настройки, прокрутите вниз и включите GitHub Pages, выбрав ветку master. Должен предоставиться живой URL-адрес вашего PWA.

Теперь результаты Lighthouse лучше, и можно поделиться своим сайтом с друзьями или загрузить его на экран телефона:

Результаты Lighthouse после размещения сайта на страницах GitHub Pages

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

Registers a service worker that controls page and start_url

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

Мои советы:

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

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

Site dims the screen when permission request is showing

Тест

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

Исправление

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

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

Site works cross-browser

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

Мои советы:

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

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

Site is responsive across phone, tablet and desktop screen sizes

Тест

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

Исправление

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

Сделать иконку приложения

Сайт будет располагаться на экране, а значит, нужна иконка. Не надо быть дизайнером, чтобы сделать хороший логотип. Для большинства небольших проектов я иду на the noun project и подыскиваю парочку значков, которые мне нравятся. Затем совмещаю их с помощью GIMP и добавляю фон. Вы, конечно, можете использовать любой другой способ, главное, убедитесь, что иконка вышла квадратная.

Моя иконка. Задним умом понимаю, что надо было скруглить углы

Теперь у вас есть значок приложения. Самое время прикрепить его к сайту. Я сделал это с помощью онлайн-генератора иконок. Скормите ему значок, и он выплюнет кучу разноразмерных версий, приправленных HTML-кодом. Далее:

из файла index.html

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

Обновлено: 27.04.2021

29329

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

Content is sized correctly for the viewport

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

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

Contains some content when JavaScript is not available

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

Мои советы:

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

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

Pages use the History API

Тест

Исправление

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

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

Pages are responsive on tablets & mobile devices

Тест

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

Исправление

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

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

Current page responds with a 200 when offline

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

Мои советы:

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

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

Installable

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

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

Заключение

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