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

середовище

Візуальна студія

• Візуальна студія 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

• перше видання