gpt4 book ai didi

c# - 如何在现有 blazor 项目上启用 PWA 功能

转载 作者:行者123 更新时间:2023-12-05 00:56:16 25 4
gpt4 key购买 nike

在创建 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.published.js

然后更新 {BlazorApp}.csproj 以添加对 service worker 的引用:

<Project Sdk="Microsoft.NET.Sdk.Web">

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

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

并更新index.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"
}
]
}

关于c# - 如何在现有 blazor 项目上启用 PWA 功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62551667/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com