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

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

Шаг 1. Создание карточки отчета в ПОСТРОИТЕЛе PWA

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

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

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

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

манифеста

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

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

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

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

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

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

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

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

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

1. Сайт должен использовать ПРОТОКОЛ HTTPS.

2. Сайт должен иметь соответствующий сертификат HTTPS.

   Если у веб-сайта нет сертификата HTTPS, можно опубликовать в Azure, чтобы получить встроенную поддержку HTTPS. Кроме того, существуют бесплатные сторонние инструменты, такие как Letsencrypt , которые позволяют получить сертификат HTTPS бесплатно.

3. Сайт не должен содержать смешанное содержимое. Смешанное содержимое заключается в том, что страница, обслуживаемая по протоколу HTTPS, содержит ресурсы, загруженные по протоколу HTTP. Смешанное содержимое компрометирует безопасность HTTPS и PWA.

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

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

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

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

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

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

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

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

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

Appx-файл — это классический пакет приложения. Он используется для установки PWA в более ранних версиях Windows. Дополнительные сведения см. в пакетах классических приложений.

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

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