Як я робив PWA

15.03.2019

PWA - це не клей :) Що таке Progressive Web Apps? Гугліть =>.

ОСЬ ЩО З ЦЬОГО ВИЙШЛО: https://avislab.github.io/map/

1. Робимо звичайне Web-application (HTML - сторіночку з JavaScript - тиком :))

Наприклад, щось таке /files/map/0.html
Зверніть увагу HTTPS немає, тому доступу до вашої локації не буде.

2. Генеруємо іконки (використовуємо генератор іконок, або малюємо свої):
icon-128x128.png
icon-144x144.png
icon-152x152.png
icon-192x192.png
icon-384x384.png
icon-512x512.png
icon-72x72.png
icon-96x96.png

Кладемо їх у директорію icons.

3. Генеруємо маніфест (використовуємо генератор маніфестів) кладемо його там де index.html

Приклад manifest.json:

{
"name": "Avislab Navigator",
"short_name": "Navigator",
"start_url": "index.html",
"display": "fullscreen",
"theme_color": "#3367D6",
"background_color": "#3367D6",
"icons": [
{
"src": "icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

3. У <header> index.html прописуємо щось таке: (копіюємо текст з генератора маніфестів):

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="My Test PWA">
<meta name="apple-mobile-web-app-title" content="My Test PWA">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#3367D6">
<link rel="icon" href="icons/icon-72x72.png">
<link rel="apple-touch-icon" href="icons/icon-72x72.png">

4. Додаємо service worker

service worker - це ще один файл, який ми додаємо в наш проект, він дозволить працювати в автономному режимі. service worker - має бути обов`язково, це вимога PWA. Навіть якщо він Вам нафіг не потрібний його доведеться створити.

Для спрощення життя використовуємо sw-toolbox.

Нам потрібно покласти файл sw-toolbox.js біля index.html
та написати свій файл sw.js:

`use strict`;
importScripts(`sw-toolbox.js`);
toolbox.precache(["index.html"]);
toolbox.router.get(`/*`, toolbox.networkFirst, { networkTimeoutSeconds: 5});

5. Реєструємо service worker - додати у index.html:

<script>
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);
         });
     });   
}
</script>

6. Записати це все на сайт з HTTPS. Нема HTTPS - нема PWA. Насправді без HTTPS буде працювати але не все. Якщо у Вас немає сайту з HTTPS - не біда. Залити можна на GitHub безкоштовно використовуючи GitHub Pages.

ОСЬ ЩО ВИЙШЛО: https://avislab.github.io/map/

Тепер, коли відкриваємо URL з нашим PWA у МОБІЛЬНОМУ пристрої (телефон / планшет), браузер запропонує встановити його як "додаток". (Далі прошу стримувати емоції). Якщо цього не станеться, не хвилюйтесь - зайдіть за посиланням ще раз. Деякі браузери пропонують встановити PWA тільки якщо Ви вже заходили на сайт.  Якщо це зробити (встановити додаток), на робочому столі з`явиться іконка за допомогою якої можна запускати ваш додаток. А вікно браузера буде відкриватися як ми налаштували у маніфесті. Тобто можна на весь екран, і не буде видно що це відкривається браузер.

Все. А що ще? Ну ваш Web - додаток зможе працювати без інтернету, якщо він на це здатний взагалі, і якщо правильно запиляти service worker. Більше нічого особливого PWA вашому web-app не додасть.

PWA не дало мені можливості:

• керувати підключеннями Wi-Fi, Bluetooth
• не змогло керувати дисплеєм, немає можливості заборонити гасити екран коли ваш додаток працює. Можна лише зі збоченнями, але вони працюють не завжди
• PWA не мають доступу до всіх сенсорів. Ті данні що надходять, типу deviceorientation, з технічної точки зору - убогість
• Данні можна зберігати тільки у LocalStorage (та ще в куках). Якщо користувач почистить кеш браузера разом з данними, збережені дані Вашого додатка зникнуть.

Отака вона...PWA...

Успіхів.

P.S.

Посилання:

Генератор маніфестів:
https://tomitm.github.io/appmanifest/

Генератор іконок:
https://www.favicon-generator.org/

Гугло-мірялка PWA:
https://developers.google.com/web/tools/lighthouse/