Marvin's Blog【程式人生】

Ability will never catch up with the demand for it

12 Aug 2021

Blazor文档阅读【六】

Blazor文档阅读 》 Fundamentals 。

ASP.NET Core Blazor Startup

手动启用Blazor应用,对于WASM版需要修改wwwroot/index.html,对于Server版需要修改Pages/_Host.cshtml

  • <script>标签上加上autostart="false"
  • 在随后某处加上Blazor.start的调用

Initialize Blazor when the document is ready

在文档加载完毕之后加载Blazor:

<body>
    ...

    <script src="_framework/blazor.{webassembly|server}.js" autostart="false"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        Blazor.start();
      });
    </script>
</body>

Chain to the Promise that results from a manual start

若要初始化JS interop等,则使用JS的then子句来串联回调:

<body>
    ...

    <script src="_framework/blazor.{webassembly|server}.js" autostart="false"></script>
    <script>
      Blazor.start().then(function () {
        ...
      });
    </script>
</body>

Load boot resources

当WASM应用载入浏览器的时候,会从服务器下载启动资源:

  • 用于引导用的JS代码
  • .NET运行库以及类社
  • 加载特定数据

loadBootResource可以自定义加载过程,可用于以下场景:

  • 加载静态资源,比如从CDN加载时区数据或dotnet.wasm。
  • 获取压缩后的类社,并在本地解压缩并加载,用于不支持直接加载压缩类社的主机
  • 对fetch请求中涉及的资源进行重定向

外部资源必须返回https://www.w3.org/TR/cors/头信息。

loadBootResource的参数如下:

  • type, 运行的类型包括assembly, pdb, dotnetjs, dotnetwasm, 以及timezonedata
  • name,资源的名字
  • defaultUri,资源的相对或者绝对路径
  • integrity,完整性相关的字符串

loadBootResource返回的是一个URL路径用于指示资源的所在:

<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
  Blazor.start({
    loadBootResource: function (type, name, defaultUri, integrity) {
      console.log(`Loading: '${type}', '${name}', '${defaultUri}', '${integrity}'`);
      switch (type) {
        case 'dotnetjs':
        case 'dotnetwasm':
        case 'timezonedata':
          return `https://cdn.example.com/blazorwebassembly/5.0.0/${name}`;
      }
    }
  });
</script>

如果需要定制除URL以外的参数,可以在loadBootResource中直接调用fetch并返回结果。下面的例子在外向的请求中增加了一些自定义的HTTP信息头:

<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
  Blazor.start({
    loadBootResource: function (type, name, defaultUri, integrity) {
      return fetch(defaultUri, { 
        cache: 'no-cache',
        integrity: integrity,
        headers: { 'Custom-Header': 'Custom Value' }
      });
    }
  });
</script>

loadBootResource还可以返回:

ASP.NET Core Blazor environments

本地运行的时候,默认环境是Development;发布以后,默认环境是Production。

可由两种办法设置环境:

  • 启动配置
  • 环境信息头

对于宿寄的WASM应用,客户端需要从中间件跟服务端沟通,来获取其环境。服务端使用名为blazor-environment的信息头来传递环境信息。

对于本地运行的独立的WASM应用,开发服务器自动添加blazor-environment信息头。

Set the environment via startup configuration

<body>
    ...

    <script src="_framework/blazor.{webassembly|server}.js" autostart="false"></script>
    <script>
      Blazor.start({
        environment: "Staging"
      });
    </script>
</body>

Set the environment via header

对于IIS的情况,blazor-environment在web.config文件中添加,后者位于bin/Release/{TARGET FRAMEWORK}/publish目录,示例如下:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>

    ...

    <httpProtocol>
      <customHeaders>
        <add name="blazor-environment" value="Staging" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

如果防止web.config在发布的时候被覆写,参考https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-5.0#use-a-custom-webconfig

在Blazor中获取环境信息:

@page "/read-environment"
@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
@inject IWebAssemblyHostEnvironment HostEnvironment

<h1>Environment example</h1>

<p>Environment: @HostEnvironment.Environment</p>

在builder里面根据环境变量来进行分支处理:

if (builder.HostEnvironment.Environment == "Custom")
{
    ...
};

WebAssemblyHostEnvironmentExtensions提供了扩展方法,用于检测Development, Production, Staging以及自定义环境:

  • IsDevelopment
  • IsProduction
  • IsStaging
  • IsEnvironment

例如:

if (builder.HostEnvironment.IsStaging())
{
    ...
};

if (builder.HostEnvironment.IsEnvironment("Custom"))
{
    ...
};

IWebAssemblyHostEnvironment.BaseAddress可以用,即便NavigationManager服务尚不存在。

(本篇完)

Categories