Как сделать веб-сайт приложением
Что же такое это волшебное PWA? Это набор современных спецификаций таких как сервис-воркеры, манифесты и другие функции веб-платформы. По сути это обычный сайт, но теперь вы можете добавить его иконку на экран смартфона или на рабочий стол, отправлять push уведомления, пользоваться как приложением даже без доступа к интернету и все это независимо от вашей операционной системы �� Рассмотрим как же сделать такую конфетку, но сначала немного подготовки.
Подготовка к внедрению PWA
Для внедрения PWA нужно иметь любой готовый веб-сайт с адаптивным дизайном, который задеплоен с использованием https протокола. Как пример я возьму самый простой сайт со списком дел, который я задеплоила с помощью Vercel.
Добавление манифеста
Первое, что нужно сделать — это добавить файл manifest.json и подключить его в ваш html файл. Это JSON файл, который содержит метадату про приложение (имя, иконку, описание и тд). Именно он предоставляет браузеру информацию, которая позволяет установить сайт как мобильное или десктопное приложение. Пример нашего manifest.json :
"lang": "en-us", "name": "Todo list", "short_name": "TodoList", "description": "App for making todo list", "start_url": "/", "background_color": "#FFF", "theme_color": "#FFF", "orientation": "any", "display": "standalone", "icons": [ "src": "icon.png", "sizes": "512x512" > ] > И подключить его в head в html файле:
link rel="manifest" href="manifest.json" /> Добавление сервис-воркеров
После добавления манифеста нам потребуется добавить сервис-воркеры . Это ключевая технология, которая используется для реализации PWA, можно сказать сердце прогрессивных веб-приложений. Это посредник между клиентом и сервером, пропускающий через себя все запросы к серверу. Именно сервис-воркеры обеспечивает возможность работы offline, с помощью разных стратегий кэширования. Базовые стратегии:
Я покажу пример стратегии Cache First , когда первым делом мы стучимся в кэш и если там есть нужные файлы, то берем их оттуда, если же нету, то уже отправляем запрос на их получение. Вот как sw.js будет выглядеть :
//определяем название кэша и файлы которые хотим кэшировать const APP_CACHE_NAME = 'app-cache-v1'; //определяем файлы для кэширования const ASSETS_URLS = [ 'index.html', '/scripts/script.js', '/scripts/index.js', '/css/style.css', ]; //добавляем событие при установке приложения self.addEventListener('install', (evt) => //ждем пока все файлы кэшируются evt.waitUntil(handleInstall()); >); const handleInstall = async () => const cache = await caches.open(APP_CACHE_NAME); //кэшируем контент при установке await cache.addAll(ASSETS_URLS); >; //добавляем событие на каждый запрос self.addEventListener('fetch', (evt) => evt.respondWith(handleRequest(event)); >); const handleRequest = async (evt) => const r = await caches.match(evt.request); //проверяем есть ли в кэше то что запрашивается if (r) return r; > //запрашиваем то что нам нужно, если этого нету в кэше const response = await fetch(evt.request); return response; >; Рассмотрим подробней этот файл :
- Определяем название кэша и файлы которые кэшируем. Название кэша — это ключ, по которому мы будем к нему доступаться. Сменив название, вы создадите новый кэш.
- Используем self вместо this , потому что он работает не только в window контексте, но и в worker контексте
- Далее добавляем обработчики событий. install при установке и fetch при запросах
- В install мы кэшируем контент
- В fetch описываем логику работы при запросе. В нашем случае применяем стратегию Cache First
Кэшировать можно данные, которые можно передавать по HTTP. Размер всех кэшируемых данных должен быть в пределах лимита для размеров кэша. В зависимости от браузера, при превышении этого лимита старый кэш либо будет удаляться, либо браузер запросит разрешение на увеличение лимита для размеров кэша. Вы можете кэшировать статические файлы, ответы на запросы и т. д., главное подобрать правильную стратегию кэширования. К примеру, если контент меняется очень редко или практически не меняется (статика), стоит использовать Cache Only , если нужно показывать обновленный контент, но допускается отображение старого (к примеру смена аватара пользователя) — подойдет стратегия Network First .
Главное отличие кэширования сервис-воркеров от браузерного, это то, что вы сами его контролируете. То есть, сервис-воркер проверяет, находится ли ресурс в его кэше, и решает возвращать ли сам ресурс, основываясь на стратегиях кэширования, которые вы сами запрограммировали.
Чтобы сервис-воркер заработал, нам нужно зарегистрировать его в нашем html файле:
script> // проверяем поддержку сервис-воркеров if ('serviceWorker' in navigator) // ожидаем полной загрузки страницы window.addEventListener('load', () => navigator.serviceWorker?.register('./sw.js'); >); > script> После регистрации сервис-воркеров, благодаря кэшированию файлов, приложение будет работать даже без подключения к интернету.
Можем также увидеть, что появилось предложение скачать приложение на десктопном и мобильном устройствах:
Как и любая технология, PWA имеет как преимущества, так и недостатки. Рассмотрим подробнее:
- Скорость работы приложения
- Низкая цена и время разработки
- Один код для всех платформ
- Занимает мало памяти
- Потребление батареи
- Ограниченная функциональность — PWA поддерживает только то что поддерживает HTML5. К примеру на данный момент PWA не имеет доступа к вашим мобильным контактам. Так как PWA разрабатывали в Google, многие функции IOS по сей день не доступны для прогрессивных приложений
Примеры известных PWA
Рассмотрим на примере нескольких компаний, которые сделали выбор в пользу прогрессивного веб приложения, каких целей они добились внедрив PWA ��
- Pinterest
- Тенденция к росту вовлеченности пользователей и дохода до 40%
- Время нахождения на сайте увеличилось до 30 %
- Количество новых пользователей увеличилось на 50%
- Страницы загружаются в среднем в 4 раза быстрее
- В 4 раза больше людей посетили страницы продаж BMW
- Увеличение посещаемости сайта на 49%
- На 43% больше сессий на пользователя
- В три раза увеличилась глубина прокрутки
- Увеличение числа пользователей в месяц до 130%
- Увеличение среднего количества часов прослушивания.
Большую роль достижении таких результатов сыграло увеличение скорости работы сайтов. Вот например сколько пользователи готовы ждать загрузки сайта:
Как видно, чем быстрее загружается и работает сайт, тем больше людей будут им пользоваться. Наличие отдельной иконки на экране смартфона упрощает доступ к приложению и увеличивает время пользования. Пользователю легче и удобней открыть его просто нажав на иконку, которую он видит каждый раз при пользовании смартфоном. Также постоянная коммуникация, например через push уведомления, помогает увеличивать уровень вовлеченности пользователей, так как всегда напоминает о приложении.
Инструменты для разработки PWA ��
Lighthouse — для проверки PWA. Его можно найти с помощью Dev Tools в Chrome. Это расширение подсказывает, что еще нужно, для того чтобы сайт стал PWA, и анализирует уже готовые прогрессивные приложения. Так вы сразу видите, что именно нужно добавить к вашему веб-сайту.
PWABuilder — предоставляет много крутых плюшек при разработке и использует современные технологии. У них даже есть расширение в VSCode. Но для работы с их стартовой сборкой нужно знание современных технологий (lit, web-component, Vite, Vaadin Router, TS).
Workbox — упрощает работу с сервер-воркерами и предоставляет многое из коробки. Также, множество библиотек и фреймворков при создании PWA темплейта используют именно его (React, Vue, Next)
Вывод
Как по мне PWA — это прорыв в мире веб разработки. Но на данном этапе эта технология только развивается и большой преградой к развитию становится компания Apple. Магазины приложений — это большой бизнес, с их продажи компании получают процент и конечно терять такой заработок они не хотят. Это видно по тому, насколько доступный функционал отличается для IOS и Android. Даже не смотря на это, существует несколько десятков удачных примеров PWA от крупных компаний. К тому же, разработка и поддержка PWА намного дешевле, чем, например, мобильных приложений, даже если разрабатывать кроссплатформенные приложения. В конце концов выбор всегда за вами, но обязательно попробуйте создать свое маленькое, а может и большое полноценное PWA ��
Полезные ссылки
Вдобавок хочу оставить некоторые интересные статьи на тему PWA ��
Как сделать PWA устанавливаемым
В предыдущей статье мы читали о том, как js13kPWA работает в off-line режиме благодаря service worker, но мы можем пойти дальше и позволить устанавливать веб-приложения на поддерживающие мобильные браузеры, как если бы это было нативное приложение. В этой статье разберём, как этого добиться, используя веб-манифест и функцию под названием «Добавить на главный экран».
Эта технология позволяет запускать приложение прямо с рабочего стола, без запуска браузера и ручного ввода URL-адреса. Ваше веб-приложение может быть установлено рядом с нативным. Поэтому к нему проще получить доступ, а так же вы можете указать, что приложение должно использовать полноэкранный режим браузера, делая его ещё более похожим на нативное
Требования
Чтобы сделать сайт доступным для установки, ему необходимы следующие вещи:
- Веб-манифест с правильно заполненными полями
- Сайт должен использовать защищённый (HTTPS) домен
- Иконка для предоставления приложения на устройстве
- Зарегистрированный service worker, чтобы приложение работало в off-line режиме (на данный момент требуется только для Chrome на Android)
Файл манифеста
Ключевым элементом является файл манифеста, в котором представлена вся информация о веб-сайте в JSON формате.
Обычно находится в корневой папке веб-приложения. Содержит информацию, такую как название приложения, paths пути к значкам разных размеров, которые можно использовать для представления приложения в мобильных операционных системах (например, в качестве значка домашнего экрана), и цвет фона для использования при загрузке. Эта информация необходима браузеру для правильного отображения приложения при установке и на домашнем экране.
Файл js13kpwa.webmanifest веб-приложения js13kPWA включён в раздел файла index.html с помощью следующей строчки кода:
link rel="manifest" href="js13kpwa.webmanifest" />Примечание: Существует несколько расширений, используемых в прошлом: manifest.webapp был популярен в манифестах приложений Firefox OS, также многие используют manifest.json потому что содержание организовано по структуре JSON. Однако, расширение .webmanifest явно упоминается в W3C manifest specification, поэтому давайте придерживаться именно этого стандарта.
Содержимое файла может выглядеть так:
"name": "js13kGames Progressive Web App", "short_name": "js13kPWA", "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.", "icons": [ "src": "icons/icon-32.png", "sizes": "32x32", "type": "image/png" >, // . "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" > ], "start_url": "/pwa-examples/js13kpwa/index.html", "display": "fullscreen", "theme_color": "#B12A34", "background_color": "#B12A34" >
Названия большинства полей говорят сами за себя, но давайте разберём документ и объясним всё подробно:
- name : Полное название вашего приложения.
- short_name : Короткое название для отображения на домашнем экране.
- description : Одно-два предложения, описывающих приложение.
- icons : Куча информации о значках — URL, размеры, типы. Не забудьте указать хотя бы несколько, чтобы иконка лучше подходила под устройство пользователя
- start_url : Загружаемый исходный документ при запуске приложения
- display : Как приложение должно отображаться; может быть fullscreen (полноэкранный), standalone (автономный), minimal-ui (минимальный пользовательский интерфейс), browser (браузер)
- theme_color : Основной цвет для интерфейса, используемый операционной системой
- background_color : Цвет для фона, используемый при установке и на заставке
Минимальные требования к манифесту — name и хотя бы один значок (с src , size и type ). Поля description , short_name , и start_url являются рекомендуемыми. Вы можете использовать даже больше полей, чем указано выше — не забудьте проверить ссылку на Web App Manifest reference.
Добавить на домашний экран
«Добавить на домашний экран» (кратко: a2hs) — это функция, реализованная браузерами, которая берёт информацию, найденную в веб-манифесте, и использует для добавления приложения на домашний экран устройства со значком и именем. Это работает при выполнении требований, описанных выше.
Когда пользователь посещает PWA с помощью браузера, поддерживающего технологию, должен отобразиться значок, указывающий на возможность установки приложения в качестве PWA.
После того, как пользователь кликнет на иконку, отобразится баннер установки. Информация в баннере генерируется на основе файла-манифеста — имя и значок отображаются в приглашении.
Если пользователь нажимает кнопку, появляется окно, на котором изображены ярлык приложения и кнопки для подтверждения действий.
При подтверждении ярлык будет добавлен на рабочий стол.
После этого пользователь может запустить приложение и сразу начать его использовать. Обратите внимание, иногда у PWA (в зависимости от браузера и/или операционной системы) в правом нижнем углу отображается иконка браузера, чтобы пользователи понимали, что работают с веб-приложением.
Экран загрузки
В некоторых браузерах, на основе информации из манифеста, создаётся заставка, отображаемая при запуске PWA
Иконка и фоновый цвет использовались для создания заставки.
Итог
В статье мы узнали, как сделать PWA устанавливаемыми, используя веб-манифест, и добавить их на главный экран.
Для получения большей информации, можете почитать наш Add to Home screen гайд (en-US) . В настоящее время поддержка ограничена браузерами Firefox для Android 58+, Мобильным Chrome и Android Webview 31+, также Opera для Android 32+, но поддержка должна расширяться в ближайшем будущем.
Теперь давайте перейдём к последнему фрагменту PWA-головоломки — повторному запуску с помощью push-уведомлений.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Превращаем веб-сайт в PWA
Согласно этой статье из CNBC, к 2025 году почти три четверти населения мира будут использовать для доступа к интернету только смартфоны. Поэтому, если вы планируете создать новый веб-сайт или редизайнить старый, вам следует задуматься о создании PWA.
PWA — идеальное начало для любого проекта, не требующее большого количества усилий, а созданное приложение работает на всех платформах!
Что такое PWA?
Прогрессивное веб-приложение (PWA) — это гибрид обычной веб-страницы и мобильного приложения. Оно сочетает в себе функции большинства современных браузеров с преимуществами мобильных приложений и создается с использованием стандартных веб-технологий, включая HTML, CSS и JavaScript. Функциональные возможности включают работу в автономном режиме, push-уведомления и доступ к аппаратуре, что создает аналогичный нативным приложениям опыт работы для пользователя.
Зачем создавать PWA?
На сайте pwastats.com представлена статистика самых известных компаний, использующих PWA, которые улучшили производительность своих веб-сайтов более чем на 100%.
Прогрессивное веб-приложение сокращает время загрузки, предоставляет пользователям возможность перехода в автономный режим, увеличивает проведенное на веб-сайте время, повышает доход, а также занимает намного меньше места, чем мобильное приложение.
Кто уже использует PWA?
Как видим, некоторые из крупнейших в мире компаний, такие как Twitter, Instagram, Uber, Pinterest, Forbes, Alibaba и другие, уже используют PWA.
Как создать PWA
Чтобы создать прогрессивное веб-приложение, для начала нужно разработать веб-сайт с отзывчивым дизайном. После выполнения первого пункта понадобятся только manifest.json и сервис-воркер.
Манифест веб-приложения
Манифест веб-приложения — это простой файл JSON, который сообщает браузеру о веб-приложении и о том, как оно должно вести себя при добавлении на мобильное устройство или компьютер пользователя.
- name: имя, используемое в запросе на установку приложения.
- short_name: короткое имя, используемое на домашнем экране пользователя, в программе запуска или в других местах с ограничением места.
- start_url: сообщает браузеру стартовый URL-адрес приложения.
- display: предоставляет возможность настройки отображения UI браузера при запуске приложения. Наиболее часто используемое значение — standalone: оно открывает веб-приложение, которое выглядит как автономное нативное приложение.
- background_color: используется на заставке при запуске приложения.
- theme_color: устанавливает цвет панели инструментов.
- orientation: усиливает определенную ориентацию.
- scope: определяет набор URL-адресов, находящихся в приложении и обычно используется для определения момента выхода пользователя из приложения.
- icons: когда пользователь добавляет сайт на домашний экран, можно определить набор используемых браузером изображений.
Сервис-воркер
Это файл JavaScript, который запускается отдельно от основного потока браузера. С его помощью можно:
- выполнять перехват сетевых запросов
- кэшировать или извлекать ресурсы из кеша
- доставлять push-увевомления
Жизненный цикл сервис-воркера
- Регистрация: сообщает браузеру местонахождение воркера и начинает установку в фоновом режиме.
- Установка: запускает событие установки, в котором можно выполнять некоторые задачи при установке сервис-воркера.
- Активация: при наличии открытых страниц, контролируемых предыдущим сервис-воркером, новый сервис-воркер переходит в состояние ожидания и активируется только при отсутствии загружаемых страниц, которые все еще использует старый.
Создание PWA шаг за шагом за 5 минут
Пришло время реализовать прогрессивное веб-приложение!
Прежде чем начать, установим расширение Lighthouse — инструмент (от Google) для улучшения качества веб-страниц, который выдает следующий отчет:
С его помощью можно проверить, какие проблемы нужно решить для повышения производительности, доступности, лучших практик, SEO и PWA веб-сайта или веб-приложения.
Установить расширение для Chrome можно здесь.
Структура файла в нашем примере выглядит так:
Полный код на Github можно найти здесь. Вы также можете переключать ветки для отображения динамического или статического кэша.
В index.html вызываем manifest.json :
rel="manifest" href="/manifest.json">Также нужно вызвать файл app.js , в котором будет зарегестрирован воркер, и метатег, необходимый для оптимизации PWA:
Это основные теги, но, конечно, их будет еще больше, а также у них могут быть разные пути!
Статический кэш
Начнем с реализации статического кэша: укажем вручную, какие ресурсы помещать в кэш, например, все изображения, файлы CSS и js.
Этот метод полезный, особенно если вам нужно загрузить все ресурсы веб-сайта и кэшировать их при первом переходе на страницу.
Начнем с manifest.json
"name": "Name Website",
"short_name": "NameWebsite",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#F4F4F4",
"theme_color": "#F4F4F4",
"orientation": "portrait-primary",
"icons": [
"src": "/assets/images/logo-72x72.png",
"type": "image/png",
"sizes": "72x72"
>,
"src": "/assets/images/logo-96x96.png",
"type": "image/png",
"sizes": "96x96"
>,
"src": "/assets/images/logo-128x128.png",
"type": "image/png",
"sizes": "128x128"
>,
"src": "/assets/images/logo-144x144.png",
"type": "image/png",
"sizes": "144x144"
>,
"src": "/assets/images/logo-152x152.png",
"type": "image/png",
"sizes": "152x152"
>,
"src": "/assets/images/logo-192x192.png",
"type": "image/png",
"sizes": "192x192"
>,
"src": "/assets/images/logo-384x384.png",
"type": "image/png",
"sizes": "384x384"
>,
"src": "/assets/images/logo-512x512.png",
"type": "image/png",
"sizes": "512x512"
>
]
>Теперь нужно проверить, допускает ли браузер работу воркера, и, если да, то регистрируем воркеры в app.js .
if('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('service worker registered'))
.catch(err => console.log('service worker not registered', err));
>Теперь запишем воркер в файл sw.js :
const staticCacheName = 'site-static-v1';
const assets = [
'/',
'/index.html',
'/assets/js/ui.js',
'/assets/css/main.css',
'/assets/images/background-home.jpg',
'https://fonts.googleapis.com/css?family=Lato:300,400,700',
];// событие install
self.addEventListener('install', evt => evt.waitUntil(
caches.open(staticCacheName).then((cache) => console.log('caching shell assets');
cache.addAll(assets);
>)
);
>);// событие activate
self.addEventListener('activate', evt => evt.waitUntil(
caches.keys().then(keys => return Promise.all(keys
.filter(key => key !== staticCacheName)
.map(key => caches.delete(key))
);
>)
);
>);// событие fetch
self.addEventListener('fetch', evt => evt.respondWith(
caches.match(evt.request).then(cacheRes => return cacheRes || fetch(evt.request);
>)
);
>);В массиве хранятся все ресурсы, которые нужно поместить в кэш.
Событие Install
Добавляем в кэш все статические ассеты, которые отображаются в консоли Chrome:
Событие Activate
При изменении имени кэша могут сохраниться несколько кэшей, что приводит к возникновению проблем. Чтобы избежать этого, нужно удалить старый кэш. В этой функции мы проверяем ключ (имя кэша), и, если он отличается от предыдущего, удаляем предыдущий.
Событие Fetch
Здесь мы проверяем наличие кэша. Если он уже есть, то мы больше не загружаем ресурсы, а извлекаем их из кэша, который снова отображается в консоли.
Примечание: при изменении файла воркера нужно изменить имя кэша. Благодаря этому воркер обновляется и создается новый кэш.
Динамический кэш
Динамический кэш автоматически кэширует все fetch-запросы во время навигации. Этот кэш следует применять осторожно, потому что, если использовать его во время вызова API, то изменения новых данных не будут отображены.
В предыдущей конфигурации необходимо изменить файл sw.js следующим образом:
const dynamicCacheName = 'site-dynamic-v1';// событие activate
self.addEventListener('activate', evt => evt.waitUntil(
caches.keys().then(keys => return Promise.all(keys
.filter(key => key !== dynamicCacheName)
.map(key => caches.delete(key))
);
>)
);
>);// событие fetch
self.addEventListener('fetch', evt => evt.respondWith(
caches.match(evt.request).then(cacheRes => return cacheRes || fetch(evt.request).then(fetchRes => return caches.open(dynamicCacheName).then(cache => cache.put(evt.request.url, fetchRes.clone());
return fetchRes;
>)
>);
>)
);
>);Событие Active
Здесь мы выполняем те же действия, что и для статического кэша.
Событие Fetch
В событии fetch мы автоматически помещаем в кэш все fetch-запросы.
Если вы попробуете оба вида кэша, а затем запустите Lighthouse, то увидите, что сайт является PWA.
Здесь можно найти код статических и динамических кэшей.
Статический или динамический: какой следует использовать?
Все зависит от потребностей и особенностей проектов. Я использую динамический кэш при отсутствии вызовов API, а при их наличии предпочитаю самостоятельно выбирать, какие ресурсы хранить с помощью статического кэша.
Более подробно о PWA можно узнать здесь.
- Компоновщик в JavaScript
- Шаблон Медиатор в JavaScript
- Знакомство с промисами в JavaScript
Как сделать Progressive Web Apps: руководство новичка
Уверен, вы слышали о Progressive Web Apps, или сокращенно PWA. Не буду вдаваться в подробности о том, что это и как работает. Для наших целей подойдет простое определение PWA — сайт, который можно добавить на главный экран телефона, и он будет работать в автономном режиме.
Мне знакомы HTML, CSS, JavaScript и я умею пользоваться GitHub. Однако я все еще новичок в веб-разработке и мне не всегда охота глубоко вникать в принципы работы того или иного явления. Чаще всего мне просто нужен понятный способ сделать нужную вещь, не просматривая при этом тонны статей. Поэтому я надеюсь, что этот пост даст вам все необходимое для создания собственного PWA.
Итак, чтобы сделать PWA, нужен сайт. Здесь предполагается, что вы умеете делать хорошо масштабируемые на всех экранах и устройствах сайты. К счастью, если не умеете, можно взять шаблон. Мне нравятся те, что на HTML5 UP и Start Bootstrap. Выберите и загрузите тему, заменив весь контент своим собственным в index.html. Можно даже изменить цвета, если хватит смелости влезть в CSS.
Для своего проекта я сделал лендинг Web Community Leads UK and IE. Большинству пользователей он не нужен в формате PWA, и я не ожидаю, что кто-то добавит его себе. Просто мне для примера нужен был какой-то небольшой и несложный сайт.
Мне понравился Hacksmiths, и так как он был open source, я его загрузил и распотрошил. Также сохранил ссылку на него и на код, чтобы можно было разветвить.
Теперь, когда есть сайт, можно превращать его в PWA. Что для этого нужно, расскажу далее.
Протестировать PWA
Чтобы проверить, работает ли сайт как PWA, можно взять Lighthouse. Lighthouse — это расширение для Chrome, которое покажет, насколько PWA годен и можно ли его улучшить.
После установки откройте сайт и нажмите значок маяка в верхнем правом углу браузера, а затем «Generate Report». Через несколько секунд откроется новая вкладка с информацией о сайте: её можно прочесть целиком, а можно сосредоточиться на числах сверху и проигнорировать остальное:
Результаты Lighthouse 36/100 еще до начала работы — это не так уж плохо, учитывая, что я еще ничего не сделал с сайтом
Сделать иконку приложения
Сайт будет располагаться на экране, а значит, нужна иконка. Не надо быть дизайнером, чтобы сделать хороший логотип. Для большинства небольших проектов я иду на the noun project и подыскиваю парочку значков, которые мне нравятся. Затем совмещаю их с помощью GIMP и добавляю фон. Вы, конечно, можете использовать любой другой способ, главное, убедитесь, что иконка вышла квадратная.
Моя иконка. Задним умом понимаю, что надо было скруглить углы
Теперь у вас есть значок приложения. Самое время прикрепить его к сайту. Я сделал это с помощью онлайн-генератора иконок. Скормите ему значок, и он выплюнет кучу разноразмерных версий, приправленных HTML-кодом. Далее:
— скачайте файл, который вам предложит генератор, и разархивируйте его;
— поместите иконки в папку с остальной частью вашего сайта;
— добавьте код, выданный генератором, в из файла index.html;
— убедитесь, что путь к значкам работает. Я поместил их все в подпапку, поэтому пришлось дописать «icons/» в каждую строку.
Прописать манифест
Следующее, что нужно сделать, это создать манифест. Манифест — это файл, содержащий данные о сайте: имя, цветовая тема, информация об иконках. У нас уже есть манифест, созданный генератором иконок, но мы его расширим.
Зайдите в генератор манифестов и заполните информацию о сайте. Если в чем-то не уверены, оставьте значение по умолчанию.
В правой части страницы есть данные JSON. Скопируйте и вставьте их поверх вашего файла manifest.json, убедившись, что форматирование не сломалось: возможно, где-то понадобится добавить запятую или удалить скобку. Мой манифест в конечном счете выглядит так. Запустите Lighthouse снова и посмотрите, работает ли манифест.
Данные Lighthouse после добавления манифеста и иконок
Добавить service worker
Service worker — это еще один файл, который мы добавляем в наш проект, он позволит сайту работать в автономном режиме. Наличие service worker — это также требование PWA, поэтому он определенно необходим.
Service worker — довольно сложная штука. К счастью, мне порекомендовали попробовать sw-toolbox и дали ссылку на код. Я скопировал код и слегка упростил его, удалив один из дополнительных файлов JavaScript, вместо этого прописав все в service worker.
Создать service worker можно в три этапа.
— Зарегистрировать service worker, добавив этот код в вашего index.html:
— Добавить sw-toolbox в свой проект — просто закинуть этот файл в корневую папку.
— Создать новый файл, назвать «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, которые можно использовать.
Размещение на GitHub
Теперь у вас есть PWA, пришло время поделиться им с миром. Я нашел самый простой способ сделать это бесплатно и безопасно — через GitHub Pages. GitHub GUI поможет вам разместить свой код в Github, создать репозиторий и поместить в него код. После этого найдите свой репозиторий на сайте, перейдите в настройки, прокрутите вниз и включите GitHub Pages, выбрав ветку master. Должен предоставиться живой URL-адрес вашего PWA.
Теперь результаты Lighthouse лучше, и можно поделиться своим сайтом с друзьями или загрузить его на экран телефона:
Результаты Lighthouse после размещения сайта на страницах GitHub Pages
Сайт выглядит точно так же, как вначале, но при просмотре через Samsung Internet адресная строка изменилась на светло-фиолетовый цвет темы. Появился значок «плюс», который позволяет добавлять сайт на главный экран, открывать его на весь экран и использовать в автономном режиме.
В статье я рассказал далеко не все о PWA: можно, например, отправлять push-уведомления, когда выходит новый контент. Узнать больше о PWA можно здесь.
- прогрессивное веб-приложение
- progressive web apps
- pwa
- перевод
- нетология
- Блог компании Нетология
- Веб-разработка
- Разработка мобильных приложений