Android (Chrome, Edge, Samsung Internet)
- Откройте сайт приложения.
- Нажмите кнопку «Установить» на странице или в меню браузера (⋮) — «Установить приложение».
- Иконка появится на экране, как у обычного приложения.
Технологии простыми словами
Что такое PWA — приложение, которое ставится с сайта
PWA (Progressive Web App) — это сайт, который умеет вести себя как приложение: ставится на экран телефона без магазина, открывается без интернета и обновляется сам. Мы делаем на этой технологии рабочие системы — и четыре игры, чтобы вы проверили её лично.
Работает на Android, iPhone и компьютере
Коротко
PWA — это обычный сайт, который научили четырём вещам
Никакой магии: современные браузеры умеют это сами, если сайт правильно сделан.
-
Ставится с сайта
Открыли адрес — нажали «Установить» — иконка на экране. Без App Store и Google Play, без регистрации и скачивания сотен мегабайт.
-
Работает без интернета
При первом открытии приложение сохраняет свои файлы на устройстве. Дальше оно открывается даже в авиарежиме.
-
Обновляется само
Новая версия скачивается в фоне, пока вы пользуетесь приложением. Никаких «обновите в магазине».
-
Одно приложение для всех
Android, iPhone, Windows, Mac — один адрес и один код. Это дешевле в разработке и в поддержке.
Установка
Как установить PWA
На каждой платформе это две-три кнопки. Ничего не нужно скачивать заранее.
iPhone и iPad (Safari)
- Откройте сайт в Safari.
- Нажмите «Поделиться» — квадрат со стрелкой вверх внизу экрана.
- Выберите «На экран “Домой”» и нажмите «Добавить».
iPhone сам не предлагает установку — только через меню «Поделиться». Приложение открывается на весь экран, без адресной строки.
Компьютер (Chrome, Edge)
- Откройте сайт.
- Нажмите значок установки справа в адресной строке (монитор со стрелкой).
- Приложение появится в меню «Пуск» или в Dock и откроется в своём окне.
Без интернета
Почему оно работает офлайн
Внутри PWA есть небольшой «помощник» (его называют service worker). При первом открытии он складывает нужные файлы в память устройства, а потом сам отвечает на запросы приложения — из этой памяти, не ходя в интернет.
Поэтому приложение открывается в лифте, в подвале и в самолёте. Когда связь появится, оно отправит накопленные данные на сервер и подтянет новые. Так работает и наша TelliApp Мастерская: приёмка с фото и подписью оформляется даже без связи и отправляется на сервер позже. Счета, оплата и отправка документов — только при связи.
Так же устроена таблица рекордов в TelliApp Играх: рекорд, поставленный в авиарежиме, сохраняется на телефоне и сам уходит в общую таблицу, как только появится интернет. В игре видно: «Рекорд отправится, когда появится интернет», а потом — «Отправлено».
- Открывается в авиарежиме
- Данные не теряются
- Синхронизация при появлении связи
Обновления
Как PWA обновляется
Каждый раз, когда приложение открывают при живом интернете, оно тихо проверяет, не появилась ли новая версия. Если появилась — скачивает её в фоне и предлагает перейти на неё, когда вам удобно. У пользователей не бывает «старых версий», которые надо вручную обновлять в магазине, а исправление ошибки доходит до всех за минуты, а не через проверку магазина за несколько дней.
Сравнение
Чем PWA отличается от приложения из магазина
Честно: у каждого варианта есть сильные стороны. Подскажем, что подходит именно вашей задаче.
PWA
- Ставится по ссылке, без магазина и комиссий 15–30 %
- Одна версия для всех устройств — дешевле делать и поддерживать
- Обновление мгновенно, без проверки магазином
- Не занимает сотни мегабайт
- Можно открыть и просто как сайт — без установки
Приложение из App Store / Google Play
- Заметнее: его находят в магазине
- Полный доступ к «железу»: Bluetooth, NFC, фоновая работа, виджеты
- Уведомления на iPhone настраиваются привычнее
- Нужна публикация в магазинах и аккаунты разработчика
- Два кода (iOS и Android) или кросс-платформенный фреймворк, например Flutter
Сколько места занимает
- TelliApp Игры — четыре игры, графика и звук
- ≈ 2,1 МБ
- Обычная игра из магазина
- чаще всего от сотни мегабайт до нескольких гигабайт
Размер TelliApp Игр посчитан при сборке сайта — все файлы приложения вместе. Сколько они занимают на вашем телефоне, видно в меню игр; там же их можно удалить одной кнопкой.
Ограничения
О чём стоит знать заранее
Проверено по документации Apple и Google на момент публикации.
iPhone не предлагает установку сам
На Android браузер показывает кнопку «Установить». На iPhone её нет — только «Поделиться → На экран “Домой”». Мы показываем подсказку с картинкой прямо на странице.
Уведомления на iPhone — только после установки
Push-уведомления на iPhone и iPad работают с iOS 16.4, но только у приложений, добавленных на экран «Домой», и только с вашего разрешения.
На iPhone все браузеры — это движок Safari
Chrome и Firefox на iPhone устроены на том же движке WebKit, поэтому возможности PWA там такие же, как в Safari. В Евросоюзе Apple разрешила другие движки, но веб-приложения на экране «Домой» по-прежнему работают через WebKit.
Нет Bluetooth, NFC и фоновой работы
PWA не может работать с Bluetooth-устройствами и NFC и не делает ничего в фоне, пока закрыто (на iPhone — тем более). Для сканера штрихкодов, камеры и геолокации возможностей хватает.
Хранилище может быть очищено
Если на устройстве кончается место, система может удалить сохранённые данные сайтов. Сайт, которым не пользовались в Safari семь дней, тоже может лишиться данных — установленных на экран приложений это не касается. Важные данные поэтому живут на сервере.
Установленная копия — отдельная
На iPhone приложение с экрана «Домой» и тот же сайт во вкладке Safari хранят данные раздельно. Например, рекорд в игре, поставленный во вкладке, в установленной копии не появится.
Попробуйте сами
Установите TelliApp Игры, включите авиарежим и найдите секрет
Четыре небольшие игры, сделанные на этой технологии: «Защити сервер», «Вверх по сигналу», «Полёт через дата-центр» и «Последний сигнал». Установите приложение с сайта, откройте хотя бы раз — а потом выключите интернет. Игры продолжат работать, а в каждой откроется секретный режим. Без регистрации, рекламы и сбора личных данных: в общую таблицу рекордов попадает только ник, который вы выберете сами.
Адрес: telliapp.ee/play — откройте на телефоне
В работе
На этой технологии у нас работают настоящие системы
Игры — для наглядности. В деле PWA держит бизнес-процессы каждый день.
-
TelliApp Мастерская
Учёт заказов сервиса по ремонту: приёмка с подписью, статус по QR, согласование цены. Мастера работают с телефона, а приёмка — и без связи.
-
Управление котельной
Панель контроля и управления оборудованием на Raspberry Pi: графики, аварии, уведомления. Открывается как приложение на телефоне владельца.
Контакты
Обсудим ваш проект
Расскажите в двух словах, что нужно сделать, — ответим и предложим, с чего начать.