使用 Blazor WebAssembly 创建 PWA 的简单方法
本教程将演示如何从 Blazor WebAssembly 应用轻松创建渐进式 Web 应用 (PWA)。PWA 是一种可安装的 Web 应用，支持离线使用，并且在桌面和移动设备上都享有同等的兼容性。
工作演示
在本教程中，我将带您了解我如何将我的Blazor FIRE 计算器项目转换为可安装的渐进式 Web 应用程序。
该项目的完整代码可在 GitHub 上找到。
一个有用的 NuGet 包
如果您想将 Blazor 应用转换为 PWA， SQL-MisterMagoo 开发的Blazor.PWA.MSBuild将是您的最佳选择。撰写本文时，该工具刚刚发布 v1.0.0 版本，但您可以随时安装最新版本。要安装 NuGet 包，请在程序包管理器控制台中执行以下命令。
Install-Package BlazorPWA.MSBuild -Version 1.0.0
请确保已为您的项目启用该软件包。这将为您的构建过程添加一些钩子，从而生成manifest.json和ServiceWorker.js文件，这些文件是 PWA 正常运行所必需的。
就是这样！该项目开箱即用，无需任何自定义设置。当然，如果您想对 PWA 进行自定义，也有相应的方法。
自定义 PWA
更改 PWA 名称
您首先可能需要更改的是 PWA 的名称。您的应用程序将使用两个名称：短名称和长名称。短名称是 PWA 安装完成后在应用启动器中使用的名称。长名称则用于安装对话框。
要配置项目名称，您需要在项目的 .csproj 文件中设置一些属性。在我的示例中，我向BlazorFireCalculators.csproj添加了以下几行代码。
<PropertyGroup>
<ManifestShortName>FIRE Calculator</ManifestShortName>
<ManifestLongName>Blazor FIRE Calculator</ManifestLongName>
</PropertyGroup>
更改图标
接下来您可能需要更改的是应用图标。该图标会出现在安装对话框、加载屏幕和应用启动器中，因此您务必确保它能体现您的品牌形象。
更改图标最简单的方法是在项目的wwwroot文件夹中保存两个新的图像文件。一个应命名为icon-192.png，另一个应命名为 icon-512.png。这些文件将在构建过程中自动被发现，并填充到manifest.json 文件中。
自动更新缓存
在我的应用中，我希望强制 BlazorPWA.MSBuild 在每次构建项目时重新生成 Service Worker 的内容。这样可以确保所有必需的文件在构建时自动添加到缓存中，即使我在两次构建之间添加了新文件。
我还加入了一个版本控制系统，这样当我向上游推送更新时，我的应用程序就知道要更新远程客户端上的缓存。请将这两行代码添加到您的.csproj文件中。
<PropertyGroup>
<ServiceWorkerCacheVersion>1</ServiceWorkerCacheVersion>
<ServiceWorkerForce>true</ServiceWorkerForce>
<ManifestShortName>FIRE Calculator</ManifestShortName>
<ManifestLongName>Blazor FIRE Calculator</ManifestLongName>
</PropertyGroup>
自定义安装对话框
我还希望我的 Blazor 应用在我的 PWA 应用可以安装时显示安装通知。BlazorPWA.MSBuild 会自动在底部添加一个通知，允许用户安装您的应用。这种默认行为可能适合您，但我决定对其进行自定义。
要强制 Blazor 应用处理显示自定义警报而不是自动生成警报，请将以下行添加到您的.csproj文件中。
<PropertyGroup>
<ServiceWorkerCacheVersion>2</ServiceWorkerCacheVersion>
<ServiceWorkerForce>true</ServiceWorkerForce>
<ServiceWorkerRegisterInstallableType>installable-blazor</ServiceWorkerRegisterInstallableType>
<ManifestShortName>FIRE Calculator</ManifestShortName>
<ManifestLongName>Blazor FIRE Calculator</ManifestLongName>
</PropertyGroup>
现在，打开 Shared/ MainLayout.razor文件。通过向此文件添加横幅，您可以确保无论用户访问哪个路由端点，都能选择安装您的 PWA。在这里，您需要注入一个 JavaScript 运行时辅助函数，以便与 PWA 安装过程中的钩子函数集成。
@inject IJSRuntime JSRuntime
接下来，添加HTML代码来显示某种类型的横幅。我的横幅很简单，只有文字和两个按钮。
@if (Installable)
{
<div class="row justify-content-center">
<div class="install-prompt col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3">
<span>Install app?</span>
<button class="installButton btn btn-primary" @onclick="@(() => InstallClicked())">Yes</button>
<button class="cancelButton btn btn-danger" @onclick="@(()=>Installable=false)">No</button>
</div>
</div>
}
请注意，我还使用了以下 CSS 样式：
.install-prompt {
background-color: #54595f;
color: #fff;
position: fixed;
bottom: 0.5rem;
padding: 0.5rem;
display: flex;
font-size: 1.5rem;
border-radius: .25rem;
z-index: 99;
}
.install-prompt .installButton {
margin-left: auto;
width: 4em;
}
.install-prompt .cancelButton {
margin-left: 0.3rem;
width: 4em;
}
回到MainLayout.razor中，你需要处理这个调用。
@code
{
static bool Installable = false;
static Action OnInstallable;
protected override void OnInitialized()
{
OnInstallable = () => InvokeAsync(StateHasChanged);
}
[JSInvokable]
public static Task PWAInstallable()
{
Installable = true;
OnInstallable.Invoke();
return Task.CompletedTask;
}
ValueTask InstallClicked()
{
Installable = false;
return JSRuntime.InvokeVoidAsync("BlazorPWA.installPWA");
}
}
首先，定义一个Installable布尔值，用于显示或隐藏通知。然后，定义一个代理OnInstallable，用于通知应用程序刷新用户界面。
默认情况下，BlazorPWA.MSBuild 工具会查找一个可调用的方法PWAInstallable来触发将安装对话框添加到 UI 中，所以我使用了该方法名称。
最后，我编写了一个方法来处理“安装”按钮的 OnClick 事件。此方法使用您之前注入的 JS 运行时来执行由 BlazorPWA.MSBuild 自动生成的函数，该函数定义在MainLayout.razorServerWorkerRegister.js的完整代码中，代码位于 GitHub 上。
底线
将您的 Blazor WebAssembly 应用转换为功能齐全的渐进式 Web 应用 (PWA) 非常简单！本教程将帮助您设置 Service Worker 缓存，并演示一些用于处理应用中 PWA 调用的实用自定义设置。通过遵循本教程并在 Blazor 中创建 PWA，您就创建了一个可以安装到桌面或移动设备上的应用。它可以从应用启动器启动，支持离线工作，并且可以像客户端设备上的任何其他应用一样接收更新。整个项目的源代码已上传至 GitHub，并提供演示供您测试。
文章来源：https://dev.to/bradwellsb/a-simple-way-to-create-a-pwa-with-blazor-web assembly-1fln