PROGRAMMS
Описание
Если кратко описать PWA, то это просто специальная ссылка, которая откроет приложение в браузере как будто это приложение, при этом добавив несколько фич, наподобие работы офлайн.
Можете почитать историю успеха на хабре. Грех таким не пользоваться.
Web App Manifest
Первое что требуется, это подключить манифест и сгенерировать миллион favicon для микроволновок. Делать это вручную скучно, посему воспользуемся сервисом RealFaviconGenerator и сгенерируем иконки из этого изображения. Главное убедиться, что оно квадратное и с размером стороны 512px.
Подключив всё это дело, попутно избавившись от favicon.ico за ненадобностью, можно воспользоваться сервисом SVGOMG и оптимизировать safari-pinned-tab.svg.
<link rel="apple-touch-icon" sizes="180x180" href="images/icons/app/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/icons/app/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/icons/app/favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="images/icons/app/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="browserconfig.xml">
<meta name="theme-color" content="#ffffff">Как вы заметили, здесь напрямую указаны цвета, хотя мы заявляли поддержку тем. Решим это позже.
Из всего этого многообразия нас интересует только site.webmanifest:
{
"name": "Make XGM great again!",
"short_name": "XGM - Next",
"icons": [
{
"src": "images/icons/app/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icons/app/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Добавим в него mascable нехитрым способом:
{
"src": "images/icons/app/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
}Для их создания, можете воспользоваться сервисом maskable.app.
Настало время проверить Lighthouse и узреть две ошибки:
Первая возникает из-за наличия скроллбара на десктопе, со второй мы будем сейчас разбираться.
Service Worker
Вкратце Service Worker это скрипт, который живёт своей жизнью в некоем сферическом месте браузера и не привязан к вкладкам. Позволяет вручную работать с кешем и таким образом реализовывать оффлайн версию сайта/приложения.
Большинство статей про их подключения подразумевают, что он находится в корне сайта. Но у нас немного другой случай, если посмотреть на ссылку nazarpunk.github.io/xgm-next, то можно увидеть префикс xgm-next. Это позволит нам описать более сложный случай не генерируя дополнительных вопросов.
{
"id": "/xgm-next/",
"scope": "/xgm-next/",
"start_url": "/xgm-next/",
}Теперь нам нужен сам воркер. Так как на данный момент, нам нужен только функционал PWA, то просто положим в корень пустой файл sw.js, и чтоб не тратить лишний запрос, то прямо в head добавим тег script такого содержания:
navigator.serviceWorker
.register('./sw.js', {scope: './'})
.then(reg => {
console.log('Registration succeeded. Scope is ' + reg.scope)
})
.catch(error => {
console.log('Registration failed with ' + error)
})Осталось только убедиться в правильности действий с помощью Lighthouse:
Теперь, зайдя на страницу вы сможете наблюдать дополнительную кнопку в адресной строке:
Richer UI install
Так как PWA активно развивается, то маркетолухам постоянно не хватает свистоперделок, одной из которых является Richer UI.
{
"description": "Make XGM great again!",
"screenshots": [
{
"src": "images/screenshots/app/1080x1440.png",
"type": "image/png",
"sizes": "1080x1440",
"form_factor": "narrow"
},
{
"src": "images/screenshots/app/1500x1080.png",
"type": "image/png",
"sizes": "1500x1080",
"form_factor": "wide"
}
]
}После чего, окно установки PWA примет немного другой вид:
