Создание прогрессивного веб-приложения, которое можно установить и запустить на каждом клиенте

окружающая среда

Visual Studio

• Visual Studio 2019

.NET

• .NET 5.0

Что такое прогрессивное веб-приложение (PWA)?

Проще говоря, это приложение, которое позволяет устанавливать и использовать веб-приложения на каждом устройстве, таком как ПК с Windows, iPhone или Android.

Реальность Blazor WebAssembly сама по себе является стандартизированной WebAssembly, поэтому вышеупомянутая реализация возможна. Он в основном основан на веб-приложениях, но вы также можете использовать собственные функции, такие как push-уведомления в Plus Alpha.

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

Создание проекта Blazor WebAssembly PWA

Это в основном то же самое, что создать проект Blazor WebAssembly.

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

Помимо функций, специфичных для PWA, разработка Blazor WebAssembly по существу такая же, как и шаблон без PWA.

Отличия от проектов, не относящихся к PWA

При создании проекта в PWA вы получаете еще несколько файлов.

Кроме того, при открытииindex.html добавляется код, который ссылается на эти файлы.

Попробуйте PWA

Запустите проект для отладки.

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

При нажатии на него отображается подтверждение установки, поэтому я постараюсь установить.

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

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

Однако, поскольку содержимое является веб-приложением, его нельзя использовать, если нет сервера, который может загружать содержимое. Например, если вы устанавливаете его во время отладочного запуска, вы не можете использовать установленное приложение, если вы не запустили IIS Express для отладки. Также обратите внимание, что PWA не могут быть установлены без https-соединения.

удалить

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

Список изменений

2022/7/13

• Добавлено объяснение, что для установки PWA требуется https.

2022/3/30

• первое издание