Build Progressive Web Applications with ASP.NET Core Blazor WebAssembly

PWA的场景是从线上到线下。

Create a project from the PWA template

PWA通常是一个单页应用（SPA），但是使用了现代的浏览器API，所以表现更像一个桌面应用。BlazorWasm运行在浏览器端，可以使用PWA相关的API：

  • 离线工作，瞬时加载，于网络速度无关
  • 运行在独有的应用窗口，而不是普通的浏览器窗口
  • 可以从操作系统的开始菜单，应用坞，或者主控屏幕启动
  • 从后端服务器接受推送通知，即便用户当前不使用此应用
  • 自动后台更新

PWA中的P代表progressive，意思是

  • 用户可能先通过浏览器来访问PWA应用，此时PWA表现得像SPA
  • 用户可以选择将应用安装到操作系统，于是就变成了一个PWA

有两种方式将blazor项目设置成pwa：

  • Visual Studio中创建Blazor WebAssembly App的时候，有选项Progressive Web Application可以勾选。
  • .NET CLI创建工程时使用：dotnet new blazorwasm -o MyBlazorPwa --pwa
  • ASP.NET Core宿寄工程模板也可以配置成PWA

事实上PWA与宿寄类型无关

Convert an existing Blazor WebAssembly app into a PWA

将既有非PWA的Blazor WASM应用转化成PWA，可以在项目中添加：

...
  <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
</PropertyGroup>

以及：

<ItemGroup>
  <ServiceWorker Include="wwwroot\service-worker.js" 
    PublishedContent="wwwroot\service-worker.published.js" />
</ItemGroup>

为了获取PWA工程的物料，可以创建一个空的PWA工程：

dotnet new blazorwasm -o MyBlazorPwa --pwa

从工程的wwwroot目录拷贝下面文件：

  • icon-512.png
  • manifest.json
  • service-worker.js
  • service-worker.published.js

然后修改wwwroot/index.html:

<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />

以及：

...
    <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>

也可以从https://github.com/dotnet/aspnetcore/tree/main/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/wwwroot出拷贝物料

Installation and app manifest

wwwroot目录的manifest.json文件可以用来自定义PWA的一些配置，参考https://developer.mozilla.org/docs/Web/Manifest。

Offline support

略。

Push notifications

略。

Caveats for offline PWAs

略。

其他参考

（本篇完）