сайт для палких паяльників

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

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

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

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

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

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

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

Приклад manifest.json:

{
“name”: “Avisab Nafihator”,
“short_name”: “Nafihator”,

“start_url”: “index.html”,
“display”: “fullscreen”,
“theme_color”: “#3367D6”,
“background_color”: “#3367D6”,
“icons”: [
{
“src”: “icons/icon-72×72.png”,
“sizes”: “72×72”,
“type”: “image/png”
},
{
“src”: “icons/icon-96×96.png”,
“sizes”: “96×96”,
“type”: “image/png”
},
{
“src”: “icons/icon-128×128.png”,
“sizes”: “128×128”,
“type”: “image/png”
},
{
“src”: “icons/icon-144×144.png”,
“sizes”: “144×144”,
“type”: “image/png”
},
{
“src”: “icons/icon-152×152.png”,
“sizes”: “152×152”,
“type”: “image/png”
},
{
“src”: “icons/icon-192×192.png”,
“sizes”: “192×192”,
“type”: “image/png”
},
{
“src”: “icons/icon-384×384.png”,
“sizes”: “384×384”,
“type”: “image/png”
},
{
“src”: “icons/icon-512×512.png”,
“sizes”: “512×512”,
“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/

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

 
Translate
Архіви

© 2011-2019 Андрій Корягін, Кременчук - Київ, Україна