如何在现有开拓者项目上启用 PWA 功能



创建 blazor wasm 的新项目时,我们可以选择启用 PWA。如果我们想在已经创建的 blazor wasm 项目中启用它怎么办。

谢谢

最简单的方法是创建一个启用了 pwa 的新 blazor wasm 应用:

dotnet new blazorwasm -o MyNewProject --pwa`

并复制:

  • wwwroot/icon-512.png
  • wwwroot/manifest.json
  • wwwroot/service-worker.js
  • wwwroot/service-worker.publish.js

然后更新 {BlazorApp}.csproj 以添加对服务辅助角色的引用:

<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
...
<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
</PropertyGroup>
...
<ItemGroup>
<ServiceWorker Include="wwwrootservice-worker.js" PublishedContent="wwwrootservice-worker.published.js" />
</ItemGroup>

并更新索引.html添加链接,图标和脚本

<!DOCTYPE html>
<html>
<head>
...
<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>
<body>
...
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>

并更新wwwroot/manifest.json以满足您的需求

{
"name": "{Your app name}",
"short_name": "{Your app short name}",
"start_url": "./",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#03173d",
"icons": [
{
"src": "icon-512.png",
"type": "image/png",
"sizes": "512x512"
}
]
}

最新更新