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

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

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

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

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

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

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

манифеста

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

Предупреждение

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

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

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

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

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

Рабочая роль службы запускается в фоновом режиме, чтобы включить функции полнофункционированных веб-приложений, где в противном случае произошли бы ошибки 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 Builder. Вернитесь на сайт Построителя PWA и щелкните Создать.

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

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

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

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

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

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