Как сделать pwa приложение из сайта
Перейти к содержимому

Как сделать pwa приложение из сайта

  • автор:

Как превратить сайт в приложение или что такое Progressive Web Application (PWA)

Если вы часто или циклично взаимодействуете через сайт со своими клиентами, партнерами или коллегами, то наверняка задумывались о создании мобильного приложения.

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

А что, если превратить в приложение уже имеющийся сайт? Это возможно с помощью технологии Progressive Web Application или PWA.

Благодаря PWA пользователи могут установить сайт себе на смартфон: работать он будет как мобильное приложение, а на экране телефона появится иконка для быстрого доступа. Также PWA-сайт можно установить как приложение на десктоп.

Progressive Web Application – это гибрид сайта и приложения. Создать его можно как с нуля, так и на основе существующего сайта.

О преимуществах и недостатках этой технологии для бизнеса рассказывает маркетолог студии «Иквадарт» Татьяна Гаврилова.

Преимущества PWA

  • Одно из важных преимуществ PWA – его не нужно создавать отдельно для каждой операционной системы. Следовательно, разработка обходится в разы дешевле, чем разработка мобильного приложения.

Недостатки PWA

Конечно, у PWA есть и недостатки. Например, есть ряд ограничений на iOS:

  • PWA может хранить на устройстве не больше 52 Мб данных. При этом, если пользователь несколько недель не заходил на PWA-сайт, сохраненные файлы удалятся. Останется только иконка приложения на рабочем экране. Когда пользователь решит снова запустить PWA, придется установить его заново.
  • Siri не видит PWA.
  • Не показывается окно с предложением установить PWA на главный экран. Добавить иконку приложения можно только вручную через настройки устройства.

К другим недостаткам можно отнести то, что у PWA есть ограничения в работе с железом. Например PWA еще не научилось работать со сканером отпечатков пальцев, датчиками приближения, ограниченно работает с Bluetooth.

Сравнение PWA с мобильным приложением и сайтом

Сравнить PWA с мобильным приложением и сайтом вы можете с помощью таблиц ниже.

Начало разработки PWA или гибридного веб-приложения для Android

Это руководство поможет вам приступить к созданию гибридного веб-приложения или прогрессивного веб-приложения (PWA) в Windows с помощью единой базы кода HTML,CSS/JavaScript, которую можно использовать в Интернете и на разных платформах устройств (Android, iOS, Windows).

Используя правильные платформы и компоненты, веб-приложения могут работать на устройстве Android таким образом, который выглядит для пользователей очень похоже на собственное приложение.

Функции PWA или гибридного веб-приложения

Существует два main типа веб-приложений, которые можно установить на устройствах Android. Разница main заключается в том, внедрен ли код приложения в пакет приложения (гибридный) или размещен на веб-сервере (pwa).

  • Гибридные веб-приложения: код (HTML, JS, CSS) упакована в пакет APK и может распространяться через Google Play Store. Модуль просмотра изолирован от интернет-браузера пользователей, без сеанса или общего доступа к кэшу.
  • Прогрессивные веб-приложения (PWA): код (HTML, JS, CSS) находится в Интернете и не требуется упаковывать в виде APK. Ресурсы загружаются и обновляются по мере необходимости с помощью служебной роли. Браузер Chrome отрисовывает и отображает ваше приложение, но будет выглядеть нативно и не будет включать обычную адресную строку браузера и т. д. Вы можете предоставить общий доступ к хранилищу, кэшу и сеансам с браузером. По сути, это похоже на установку ярлыка в браузере Chrome в специальном режиме. PWA также можно перечислить в Google Play Store с помощью доверенного веб-действия.

PWA и гибридные веб-приложения очень похожи на собственное приложение Android тем, что они:

  • Можно установить через App Store (Google Play Store и (или) Microsoft Store)
  • Доступ к собственным функциям устройства, таким как камера, GPS, Bluetooth, уведомления и список контактов
  • Работа в автономном режиме (без подключения к Интернету)

PWA также имеют несколько уникальных функций:

  • Можно установить на начальном экране Android непосредственно из Интернета (без App Store).
  • Можно дополнительно установить через Google Play Store с помощью доверенного веб-действия
  • Может быть обнаружен с помощью поиска в Интернете или предоставлен общий доступ через URL-ссылку
  • Используйте рабочую роль службы , чтобы избежать необходимости упаковать машинный код

Вам не нужна платформа для создания гибридного приложения или PWA, но есть несколько популярных платформ, которые будут рассмотрены в этом руководстве, включая PhoneGap (с Cordova) и Ionic (с Cordova или Capacitor с использованием Angular или React).

Apache Cordova.

Apache Cordova — это платформа с открытым кодом, которая может упростить обмен данными между кодом JavaScript в собственном WebView и собственной платформой Android с помощью подключаемых модулей. Эти подключаемые модули предоставляют конечные точки JavaScript, которые можно вызывать из кода и использовать для вызова собственных API устройств Android. Некоторые примеры подключаемых модулей Cordova включают доступ к службам устройств, таким как состояние батареи, доступ к файлам, вибрация/ звонок и т. д. Эти функции обычно недоступны для веб-приложений или браузеров.

Существует два популярных дистрибутива Cordova:

  • PhoneGap: поддержка прекращена компанией Adobe.
  • Ionic

Ionic

Ionic — это платформа, которая настраивает пользовательский интерфейс приложения в соответствии с языком дизайна каждой платформы (Android, iOS, Windows). Ionic позволяет использовать Angular или React.

Существует новая версия Ionic, которая использует альтернативу Cordova, называется Capacitor. В этом варианте используются контейнеры, чтобы сделать приложение более удобным в Интернете.

Начало работы с Ionic путем установки необходимых средств

Чтобы приступить к созданию PWA или гибридного веб-приложения с Ionic, необходимо сначала установить следующие средства:

  • Node.js для взаимодействия с ионной экосистемой. Скачайте NodeJS для Windows или следуйте указаниям по установке NodeJS с помощью подсистема Windows для Linux (WSL). Если вы будете работать с несколькими проектами и версией NodeJS, может потребоваться использовать диспетчер версий Узлов (nvm ).
  • VS Code для написания кода. Скачайте VS Code для Windows. Вы также можете установить удаленное расширение WSL , если вы хотите создать приложение с помощью командной строки Linux.
  • Терминал Windows для работы с предпочитаемым интерфейсом командной строки (CLI). Установите Терминал Windows из Microsoft Store.
  • Git для управления версиями. Скачайте Git.

Создание проекта с помощью Ionic Cordova и Angular

Установите Ionic и Cordova, введя в командной строке следующую команду:

npm install -g @ionic/cli cordova 

Создайте приложение ionic Angular с помощью шаблона приложения Tabs, введя команду :

ionic start photo-gallery tabs 

Перейдите в папку приложения:

cd photo-gallery 

Запустите приложение в веб-браузере:

ionic serve 

Дополнительные сведения см. в документации по Angular ionic Cordova. Ознакомьтесь с разделом Создание приложения Angular PWA в документации по Ionic, чтобы узнать, как перенести приложение из гибридного в PWA.

Создание нового проекта с помощью ионического capacitor и Angular

Установите Ionic и Cordova-Res, введя в командной строке следующую команду:

npm install -g @ionic/cli native-run cordova-res 

Создайте приложение ionic Angular с помощью шаблона приложения «Вкладки» и добавьте capacitor, введя команду :

ionic start photo-gallery tabs --type=angular --capacitor 

Перейдите в папку приложения:

cd photo-gallery 

Добавьте компоненты, чтобы сделать приложение PWA:

npm install @ionic/pwa-elements 

Импортируйте @ionic/pwa-elements , добавив в файл следующее src/main.ts :

import < defineCustomElements >from '@ionic/pwa-elements/loader'; // Call the element loader after the platform has been bootstrapped defineCustomElements(window); 

Запустите приложение в веб-браузере:

ionic serve 

Дополнительные сведения см. в документации по ионическому capacitor Angular. Ознакомьтесь с разделом Создание приложения Angular PWA в документации по Ionic, чтобы узнать, как перенести приложение из гибридного в PWA.

Создание нового проекта с помощью Ionic и React

Установите интерфейс командной строки Ionic, введя в командной строке следующую команду:

npm install -g @ionic/cli 

Создайте проект с React, введя команду :

ionic start myApp blank --type=react 

Перейдите в папку приложения:

cd myApp 

Запустите приложение в веб-браузере:

ionic serve 

Дополнительные сведения см. в документации по ионическим React. Ознакомьтесь с разделом Создание приложения React PWA в документации по ionic, чтобы узнать, как перенести приложение из гибридного в PWA.

Тестирование приложения Ionic на устройстве или эмуляторе

Чтобы протестировать приложение Ionic на устройстве Android, подключите устройство (убедитесь, что оно сначала включено для разработки), а затем в командной строке введите:

ionic cordova run android 

Чтобы протестировать приложение Ionic в эмуляторе устройства Android, необходимо:

  1. Установите необходимые компоненты — Пакет средств разработки Java (JDK), Gradle и пакет SDK для Android.
  2. Создание виртуального устройства Android (AVD): см. [Руководство разработчика для Android]](https://developer.android.com/studio/run/managing-avds.html).
  3. Введите команду для Ionic для сборки и развертывания приложения в эмуляторе: ionic cordova emulate [] [options] . В этом случае команда должна быть следующей:
ionic cordova emulate android --list 

Дополнительные ресурсы

  • Разработка приложений для двойного экрана для Android и получение пакета SDK для устройства Surface Duo
  • Добавление исключений Защитника Windows для повышения производительности
  • Включение поддержки виртуализации для повышения производительности эмулятора

Совместная работа с нами на GitHub

Источник этого содержимого можно найти на GitHub, где также можно создавать и просматривать проблемы и запросы на вытягивание. Дополнительные сведения см. в нашем руководстве для участников.

Превращение веб-сайта в высококачественное приложение PWA

Превращение веб-сайта в полнофункциональное высококачественное веб-приложение (Прогрессивное веб-приложение) можно сделать в обеденное время! В этой статье вы можете ознакомиться с комплексным процессом.

Шаг 1. Создание карта отчета в Построителе PWA

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

  1. Перейдите к Построителю PWA
  2. Введите URL-адрес веб-сайта, который вы хотите преобразовать в PWA, и нажмите кнопку Пуск.
  3. В построителе PWA отобразится карточка отчета PWA, указывающая функции, которые есть у вашего веб-сайта и отсутствуют.

Шаг 2. Проверка карточки отчета PWA

Пример карточки отчета PWA

Карточка отчета PWA содержит оценку вашего веб-сайта из максимального значения 100. Оценки основаны на трех категориях функций.

манифеста

PWA оценивает манифест веб-приложения веб-сайта , если он доступен, и определяет обязательные, рекомендуемые и необязательные поля или значения. Вы можете улучшить оценку, добавив отсутствующие значения, изменив и повторно опубликовав файл манифеста или используя редактор манифеста в Интернете.

Изменения, внесенные в онлайн-редактор манифеста, не будут опубликованы на веб-сайте. Внесенные изменения будут использоваться построителем PWA только при создании PWA.

Должны присутствовать обязательные значения, в противном случае построитель PWA не сможет создать PWA. Обязательные поля включают просто манифест, значки, имя, короткое имя и start_url.

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

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

Рабочая роль службы

Некоторые предварительно созданные рабочие роли служб, предлагаемые PWA Builder

Рабочая роль службы запускается в фоновом режиме, чтобы включить функции полнофункционированных веб-приложений, где в противном случае произошли бы ошибки 404. Для создания PWA Builder требуется рабочая роль службы, но если у вас ее нет, можно использовать один из нескольких предварительно созданных рабочих ролей службы, предоставляемых PWA Builder. Чтобы использовать предварительно созданную рабочую роль службы, выполните следующие действия.

  1. В меню выберите вкладку Параметры рабочей роли службы .
  2. Выберите соответствующую рабочую роль службы из курированного списка. Обратите внимание, что существует множество предварительно созданных параметров. убедитесь, что выбрана рабочая роль службы, наиболее подходящая для конкретного варианта использования.
  3. Выбрав рабочую роль службы, которую вы хотите использовать, вы вернетесь в карточку отчета PWA.

Безопасность

Все PWA, созданные с помощью PWA Builder, требуют трех протоколов безопасности.

  1. Сайт должен использовать ПРОТОКОЛ HTTPS.
  2. У сайта должен быть соответствующий сертификат HTTPS. Если на веб-сайте нет сертификата HTTPS, вы можете опубликовать его в Azure, чтобы получить встроенную поддержку HTTPS. Кроме того, существуют бесплатные сторонние средства, такие как Letsencrypt , которые позволяют получить сертификат HTTPS бесплатно.
  3. Сайт не должен содержать смешанное содержимое. Смешанное содержимое — это когда страница, обслуживаемая по протоколу HTTPS, содержит ресурсы, загруженные по протоколу HTTP. Смешанное содержимое нарушает безопасность HTTPS и PWA.

Шаг 3. Сбор важных сведений из Центра партнеров

Для создания PWA потребуется несколько сведений из учетной записи Центра партнеров. Если у вас нет MSA, щелкните здесь, чтобы получить инструкции по началу работы. Вам также потребуется зарегистрироваться в программе для разработчиков Windows.

Изображение страницы обзора приложения

Если вы еще не сделали этого, необходимо создать приложение PWA, зарезервировав новое имя. После того как вы зарезервируете свое имя, нажмите кнопку Начать отправку , чтобы создать новую отправку приложения.

Изображение страницы удостоверений продукта

Затем перейдите на вкладку Управление продуктами и выберите Идентификатор продукта. На странице идентификатора продукта будет указан идентификатор пакета продукта, идентификатор издателя и отображаемое имя издателя. Сохраните эти значения и вернитесь в PWA Builder.

Шаг 4. Создание PWA в Построителе PWA

Изображение кнопки создания в Построителе PWA

Теперь у вас есть все необходимое для создания PWA в PWA Builder. Вернитесь на сайт Построителя PWA и щелкните Создать.

Построитель PWA запрашивает у пользователя сведения из Центра партнеров

Построитель PWA предложит вам ввести сведения, полученные из Центра партнеров на шаге 3. Введите значения и нажмите кнопку Создать.

Файлы PWA в проводнике

После создания PWA Builder браузер автоматически скачит его. PWA упаковается в файл .zip, содержащий шесть файлов.

Msix-файл — это пакет приложения main PWA. Этот файл установит PWA на компьютере пользователя.

Файл appx является классическим пакетом приложения. Он используется для установки PWA в более ранних версиях Windows. Дополнительные сведения см. в разделе Классические пакеты приложений .

Шаг 5. Отправка пакетов приложений в Microsoft Store

Эти пакеты можно отправлять в Microsoft Store так же, как и любое другое приложение, упакованое в файл MSIX. Дополнительные инструкции по отправке пакетов PWA в магазин см. в разделе Отправка приложений.

Совместная работа с нами на GitHub

Источник этого содержимого можно найти на GitHub, где также можно создавать и просматривать проблемы и запросы на вытягивание. Дополнительные сведения см. в нашем руководстве для участников.

Как сделать PWA устанавливаемым

В предыдущей статье мы читали о том, как js13kPWA работает в off-line режиме благодаря service worker, но мы можем пойти дальше и позволить устанавливать веб-приложения на поддерживающие мобильные браузеры, как если бы это было нативное приложение. В этой статье разберём, как этого добиться, используя веб-манифест и функцию под названием «Добавить на главный экран».

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

Требования

Чтобы сделать сайт доступным для установки, ему необходимы следующие вещи:

  • Веб-манифест с правильно заполненными полями
  • Сайт должен использовать защищённый (HTTPS) домен
  • Иконка для предоставления приложения на устройстве
  • Зарегистрированный service worker, чтобы приложение работало в off-line режиме (на данный момент требуется только для Chrome на Android)

Файл манифеста

Ключевым элементом является файл манифеста, в котором представлена вся информация о веб-сайте в JSON формате.

Обычно находится в корневой папке веб-приложения. Содержит информацию, такую как название приложения, paths пути к значкам разных размеров, которые можно использовать для представления приложения в мобильных операционных системах (например, в качестве значка домашнего экрана), и цвет фона для использования при загрузке. Эта информация необходима браузеру для правильного отображения приложения при установке и на домашнем экране.

Файл js13kpwa.webmanifest веб-приложения js13kPWA включён в раздел файла index.html с помощью следующей строчки кода:

link rel="manifest" href="js13kpwa.webmanifest" /> 

Примечание: Существует несколько расширений, используемых в прошлом: manifest.webapp был популярен в манифестах приложений Firefox OS, также многие используют manifest.json потому что содержание организовано по структуре JSON. Однако, расширение .webmanifest явно упоминается в W3C manifest specification, поэтому давайте придерживаться именно этого стандарта.

Содержимое файла может выглядеть так:

 "name": "js13kGames Progressive Web App", "short_name": "js13kPWA", "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.", "icons": [  "src": "icons/icon-32.png", "sizes": "32x32", "type": "image/png" >, // .  "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" > ], "start_url": "/pwa-examples/js13kpwa/index.html", "display": "fullscreen", "theme_color": "#B12A34", "background_color": "#B12A34" > 

Названия большинства полей говорят сами за себя, но давайте разберём документ и объясним всё подробно:

  • name : Полное название вашего приложения.
  • short_name : Короткое название для отображения на домашнем экране.
  • description : Одно-два предложения, описывающих приложение.
  • icons : Куча информации о значках — URL, размеры, типы. Не забудьте указать хотя бы несколько, чтобы иконка лучше подходила под устройство пользователя
  • start_url : Загружаемый исходный документ при запуске приложения
  • display : Как приложение должно отображаться; может быть fullscreen (полноэкранный), standalone (автономный), minimal-ui (минимальный пользовательский интерфейс), browser (браузер)
  • theme_color : Основной цвет для интерфейса, используемый операционной системой
  • background_color : Цвет для фона, используемый при установке и на заставке

Минимальные требования к манифесту — name и хотя бы один значок (с src , size и type ). Поля description , short_name , и start_url являются рекомендуемыми. Вы можете использовать даже больше полей, чем указано выше — не забудьте проверить ссылку на Web App Manifest reference.

Добавить на домашний экран

«Добавить на домашний экран» (кратко: a2hs) — это функция, реализованная браузерами, которая берёт информацию, найденную в веб-манифесте, и использует для добавления приложения на домашний экран устройства со значком и именем. Это работает при выполнении требований, описанных выше.

Когда пользователь посещает PWA с помощью браузера, поддерживающего технологию, должен отобразиться значок, указывающий на возможность установки приложения в качестве PWA.

Add to Home screen popup of js13kPWA.

После того, как пользователь кликнет на иконку, отобразится баннер установки. Информация в баннере генерируется на основе файла-манифеста — имя и значок отображаются в приглашении.

Install banner of js13kPWA.

Если пользователь нажимает кнопку, появляется окно, на котором изображены ярлык приложения и кнопки для подтверждения действий.

Add to Home screen popup of js13kPWA.

При подтверждении ярлык будет добавлен на рабочий стол.

После этого пользователь может запустить приложение и сразу начать его использовать. Обратите внимание, иногда у PWA (в зависимости от браузера и/или операционной системы) в правом нижнем углу отображается иконка браузера, чтобы пользователи понимали, что работают с веб-приложением.

Экран загрузки

В некоторых браузерах, на основе информации из манифеста, создаётся заставка, отображаемая при запуске PWA

Иконка и фоновый цвет использовались для создания заставки.

Итог

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

Для получения большей информации, можете почитать наш Add to Home screen гайд (en-US) . В настоящее время поддержка ограничена браузерами Firefox для Android 58+, Мобильным Chrome и Android Webview 31+, также Opera для Android 32+, но поддержка должна расширяться в ближайшем будущем.

Теперь давайте перейдём к последнему фрагменту PWA-головоломки — повторному запуску с помощью push-уведомлений.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *