如何在现有的 blazor 项目上启用 PWA 功能

Question

如何在现有的 blazor 项目上启用 PWA 功能

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

谢谢

Answer 1

最简单的方法是创建一个启用 pwa 的新 blazor wasm 应用程序：

dotnet new blazorwasm -o MyNewProject --pwa`

Run Code Online (Sandbox Code Playgroud)

并复制：

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>

Run Code Online (Sandbox Code Playgroud)

并更新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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，5 月前
查看次数：	564 次
最近记录：	5 年，5 月前