В начале будет немного прелюдии, поэтом если интересует суть, то лучше сразу к 3 абзацу.
Почему я использую связку html/css/js для своих простых проектов? Потому что это очень универсальное решение - такие приложения могут запускаться на любой платформе где есть браузер, и интернет для них по сути не нужен - тот же файл index.html запускается и работает без проблем даже на андроиде. Но с интернетом конечно же удобнее, тем более что в качестве хостинга можно использовать бесплатный GitHub и в таком случае к универсальности твоего приложения прибавляется еще и возможность доступа к нему из любой точки мира. Но иногда все же есть желание оформить приложение красивее, может даже поделиться этой полезной штукой с другими людьми, и тогда возникает необходимость придумывать что-то еще. Я говорю о том, что в современном мире гораздо привычнее открывать специализированное приложение на своем смартфоне, чем открывать браузер, искать в нем ссылку на страницу и уже там работать с приложением. В этом случае и появляется желание преобразовать свое html/css/js приложение в тот же apk файл, чтобы запускать его красиво с главного эрана своего смартфона.
На самом деле это не сложно и я уже делал так. В этом блоге есть короткий пост о том как Создание Андроид приложения на HTML5, CSS3 и JavaScript Таким способом я сделал 4 приложения для себя: калькулятор пиццы, калькулятор пропорции, график сменности (очень часто им пользуюсь) и универсальное приложение WebView. Последнее довольно прикольное - сделано оно по той же технологии WebView, но в него можно добавить код на html/css/js и тогда оно превратиться в отдельное приложение с другим функционалом. Ну то есть если изменить код калькулятора пиццы, и добавить туда пару новых функций, то не обязательно будет пересобирать приложение калькулятора пиццы в андроид студии, а можно будет просто добавить измененный код в приложение WebView - и появится готовый новый калькулятор пиццы. Но проблема в том, что иконка не будет меняться в соответствии с кодом, то есть что калькулятор пиццы что график сменности будут иметь одну и туже серую иконку, да и к тому же как выяснилось дополнительные функции работы с файловой системой или интернетом не будут работать. Это же касается и самой технологии WebView - нужно еще немало времени погуглить чтобы понять как работать с файловой системой или интернетом.
Началось все с того что нужно было сделать приложение которое генерировало бы чек-лист для проверки оборудования. Генерироваться он должен был из csv файла - таблица в специальном формате, и в браузере это делается довольно просто и легко. Там же неплохо работает и парсинг файлов с удаленного сервера через XMLHttpRequest. Но проблема в том что в браузере постоянно маячит адресная строка, было бы классно запускать это все дело отдельным приложением. Сделать по аналогии с предыдущими приложениями через WebView как я уже и говорил выше получалось слишком сложно, и не совсем для меня понятно. Зато увидев как на одном сайте html5 игры запускаются в полноэкранном режиме, и могут сохранить ссылку на себя на главном экране смартфона, я понял что это то что мне нужно, но не знал как это сделать.
Оказалось что это было PWA - прогрессивное веб приложение - если зайти на некий сайт через браузер Хром, то сайт предлагает тебе добавить ссылку на это приложение на главный экран смартфона (как на скриншоте выше). Если согласиться и добавить его, то на экране появится красивый ярлык и при клике по нему приложение запустится в полноэкранном режиме, без всяких адресных строк браузера. Вообще с этой технологией я сталкивался уже давно, но до недавнего времени даже не знал что это называется PWA, а когда узнал, то смог загуглить и понять как сделать также самому. Вот об этом и хочу написать тут: как можно сделать самому свое PWA приложение.
На хабре есть отличная инструкция как можно сделать PWA приложение, и она у меня заработала, но не совсем в том виде как я хотел: не было всплывающего окна, а приложение сохранялось как ярлык, на значке приложения был еще и значек браузера - мне это не нравилось. Поэтому пришлось искать другие решения. И вот на одном из репозиториев на гитхабе, нашел кажется то, что нужно. По крайней мере сделав так, я вижу что это работает, хоть и не совсем понимаю как это работает. Точнее понимаю как, но не понимаю почему код с хабра не выдавал опцию установки приложения на главном экране, хотя по сути делает то же самое. В любом случае рекомендую ознакомиться с этой статьей на хабре, и возможно для вас это будет работать как вам надо. Мне же пришлось немного менять код.
Смысл в том что PWA приложение чтобы стать таковым должно иметь манифест, иконку и Service Worker. Чтобы сделать для своего приложения График смен возможность создания ярлыка на главном экране, я добавил такой файл манифеста manifest.json
{
"display": "fullscreen",
"name": "График смен",
"orientation": "any",
"short_name": "График смен",
"start_url": "./index.html",
"icons": [
{
"src": "favicon.png",
"type": "image/png",
"sizes": "512x512"
}
]
}
и добавил ссылку на него в index.html
<link rel="manifest" href="./manifest.json" />
Теперь чтобы сделать такое же для другого приложения нужно сделать также, добавить такой файл и добавить ссылку на него из приложения. Файл изменить в соответствии с приложением, по сути менять нужно только имя (выделено зеленым выше) и иконку сделать 512х512 и назвать ее как favicon.png
В коде сервис воркера нужно будет заменить всего несколько строк:
const cacheName = 'Shift-calendar';
const contentToCache = [
'/html/Shift-calendar/',
'/html/Shift-calendar/index.html',
'/html/Shift-calendar/sw.js',
'/html/Shift-calendar/manifest.json',
'/html/Shift-calendar/favicon.png'
];
То есть поставить путь до файлов другого веб приложения
В index.html добавить вызов сервис воркера, где тоже нужно выставить пути:
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker.register("/html/Shift-calendar/sw.js", { scope: '/html/Shift-calendar/' });
});
}
Ну вот пожалуй и все. После этого нужно открыть приложение в хроме (это важно, именно хром) и тогда появится заветное предупреждение об установке приложения, а на главном экране появится тогда красивая иконка приложения, безо всяких портящих его значков в углу.
Ах да чуть не забыл, код sw.js есть так же в моем репозитории на гитхабе: то есть можно просто скопировать все из того проекта, изменить файлы и ссылки как я писал выше, и все должно заработать. Еще раз ссылка на исходный код https://github.com/boolkin/html/tree/master/Shift-calendar. Чтобы проверить как это работает можно открыть само приложение График смен
Комментариев нет:
Отправить комментарий