Как сделать PWA приложение на iPhone из любого сайта

18 сентября 2024 |

Не всем сайтам нужно собственное мобильное приложение, поэтому у многих его и нет. Веб-приложения делаются так, чтобы подстраиваться под разные размеры экранов, так что мобильными сайтами в браузере удобно пользоваться. Тем не менее, иногда просто удобнее превратить сайт в приложение на домашнем экране.

Как сделать PWA приложение на iPhone из любого сайта

 

Содержание статьи

 

Что такое PWA-приложение?

PWA (progressive web app), или прогрессивное веб-приложение, — это инновационная технология, которая позволяет веб-сайтам выглядеть и функционировать как мобильные приложения.

 

Как сделать мобильное приложение для iPhone из любого сайта?

На iPhone можно сохранить закладку сайта на домашний экран через Safari, а начиная с iOS 16.4 и через большинство сторонних браузеров. На домашнем экране появляется иконка, которая по сути просто открывает сохранённый сайт.

К счастью, многие сайты доступны в полноэкранном режиме, поэтому с домашнего экрана открываются именно так. Некоторые сайты даже могут отправлять уведомления на iPhone с iOS 16.4 и новее.

Тем не менее, некоторые веб-ресурсы всё ещё не оптимизированы под функцию, и иконка на домашнем экране просто открывает их в браузере как обычные веб-страницы. Конечно, это быстрее, чем сначала открывать Safari, а затем вводить название или адрес сайта, но всё равно не так удобно.

С помощью приложения «Команды» можно превратить любой сайт на домашнем экране в полноэкранное приложение. Команда, которую мы будем использовать, создаёт профиль WebClip, который нужно установить на iPhone. С этим профилем все сайты с домашнего экрана будут открываться как полноэкранное приложение. Вверху не будет адресной строки, а внизу – панели инструментов.

Технически это всё ещё закладка, но она не будет открываться в Safari как обычный сайт. Итак.

1. Установите приложение «Команды». Если на вашем iPhone его нет, скачайте по этой ссылке из App Store.

2. Установите команду «Make App from Web URL».

Команда «Make App from Web URL» создаёт веб-приложение любого сайта на ваш выбор. Просто скопируйте адрес сайта в буфер обмена, вставьте его в команду, назовите приложение, выберите иконку и добавьте его на домашний экран. Вы также можете поделиться сайтом в команду через стандартное меню «Поделиться», и ничего даже не придётся копировать и вставлять. В отличие от обычной закладки, сайт не будет открываться в Safari. Он будет выглядеть как отдельное полноэкранное приложение.

Команда должна открыться в приложении автоматически, но, если этого не произошло, нажмите «Получить быструю команду», а затем «Добавить».

Как сделать мобильное приложение для iPhone из любого сайта?

 

3. Запустите команду «Make App from Web URL» в приложении «Команды».

Как сделать мобильное приложение для iPhone из любого сайта?

 

4. Введите название сайта, которое будет отображаться на домашнем экране, например, «Яблык» и нажмите «Готово».

5. Введите URL-ссылку на сайт и нажмите «Готово». Если не хотите вводить ссылку вручную, откройте нужный сайт в Safari и скопируйте его ссылку.

Как сделать мобильное приложение для iPhone из любого сайта?

 

6. Добавьте изображение иконки, которая появится на домашнем экране. Команда может запросить доступ к приложению «Фото». Предоставьте доступ, а затем выберите изображение для иконки веб-приложения.

Как сделать мобильное приложение для iPhone из любого сайта?

Safari умеет генерировать иконки приложений для сайтов через опцию «Добавить на экран Домой», а вот используемая нами команда – нет. Вам понадобится отдельное изображение, которое будет использоваться в качестве иконки.

Команда позволяет выбрать любое изображение из приложения «Фото», так что вы можете предварительно скачать картинку из сети или использовать своё фото. Лучше всего подойдёт маленькая квадратная картинка, но команда и сама автоматически обрежет любое изображение под нужный размер. По возможности избегайте больших изображений, а в идеале вообще использовать маленький логотип сайта.

7. Когда вы выберите изображение для иконки своего веб-приложения, команда создаст профиль конфигурации и попросит вас его скачать. Нажмите «Разрешить», а затем «Закрыть».

Как сделать мобильное приложение для iPhone из любого сайта?

 

8. Установите скачанный только что профиль конфигурации. Для этого откройте приложение «Настройки». Вы можете увидеть опцию «Профиль загружен» вверху главного экрана, на которую можно нажать.

Как сделать мобильное приложение для iPhone из любого сайта?

Если надпись не появилась, зайдите по пути «Основные» → «VPN и управление устройством», а затем нажмите название загруженного профиля.

Как сделать мобильное приложение для iPhone из любого сайта? Как сделать мобильное приложение для iPhone из любого сайта?

9. В правом верхнем углу нажмите «Установить», а затем введите свой пароль, когда потребуется. Нажмите «Далее», а затем «Установить» в правом верхнем углу, а затем ещё раз внизу. Профиль будет установлен.

Как сделать мобильное приложение для iPhone из любого сайта?

Как сделать мобильное приложение для iPhone из любого сайта?

 

Ваше веб-приложение появится на домашнем экране. Когда вы нажмёте на иконку, сайт откроется на весь экран без адресной строки вверху и панели инструментов внизу.

Как сделать мобильное приложение для iPhone из любого сайта?

Тем не менее, если вы что-то нажмёте или перейдёте на другую страницу, вверху и внизу появятся панели навигации с доступом к режиму чтения, возможностью запросить полную версию сайта, настройками и т.д. После свайпа вверх или вниз панели навигации исчезнут.

 

Как удалить веб-приложение и профиль?

Допустим, веб-приложение вам больше не нужно, и вы хотите его удалить. Просто удалить его иконку с домашнего экрана будет недостаточно, поскольку профиль конфигурации останется в настройках.

Перейдите по пути «Настройки» → «Основные» → «VPN и управление устройством». Выберите профиль и нажмите «Удалить профиль».

Как сделать мобильное приложение для iPhone из любого сайта?

Нужно будет ввести код-пароль. После этого снова нажмите «Удалить», и профиль вместе с веб-приложением будут удалены с вашего iPhone.

Как сделать мобильное приложение для iPhone из любого сайта?

🔥 Смотрите также:

Читайте “Яблык” в  Telegram и смотрите в YouTube