Marvin's Blog【程式人生】

Ability will never catch up with the demand for it

28 Jul 2021

Blazor文档阅读【四】

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

略。

其他参考

(本篇完)

Categories