创建 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"
}
]
}