Blazor Web Assembly 应用程序部署和更新

Question

我们正在完成我们的第一个企业级独立（未托管在 .Net Core 上）Blazor WASM 应用程序。在我们的应用程序中，我们有一个弹出式导航菜单，您需要单击一个按钮才能在较小的移动屏幕上显示它。这工作正常......但无论出于何种原因，似乎我们总是必须刷新浏览器以使弹出式导航按钮在初始下载后工作。一旦我们弄明白了，这在开发中并不是什么大不了的事情……但现在我们准备发布到生产环境中，这并不理想。

问题是，在 所有内容 下载后是否会触发一个事件？由于下载所有内容需要一段时间，Blazor 会尽快显示 UI 的片段，但在这种情况下，在下载所有内容之前我们还没有完全准备好进行交互，因为在下载所有内容之前它无法正常工作.您不想告诉您的用户：“您必须在登录后刷新屏幕”！我的想法是只显示一个预加载器屏幕，直到所有内容都下载完毕，这样至少该应用程序可以正常运行。

本着同样的精神，我们正在寻找一种更流畅的方式来处理 WASM 的应用程序更新。从部署的角度来看，Blazor 将应用程序的旧版本缓存到每次要推送更新时都需要清除浏览器历史记录的位置。在桌面上，我想按 Ctrl + F5 没什么大不了的。但是在移动设备上不起作用。在任何一种情况下，您都不想再次向用户解释他们需要执行哪些额外步骤才能获得完全更新。

Answer 1

您的原始问题中没有显示代码，但您可以使用 OnAfterRender 生命周期挂钩来回答加载问题。如果您的屏幕开始时处于加载状态，您可以这样做：

protected override async Task OnAfterRenderAsync(bool firstRender)

    // execute conditionally for loading data, otherwise this will load
    // every time the page refreshes
    if(firstRender)
    {
        // Break UI logic free from async task execution

        await Task.Delay(1);

        // Do work to load page data and set properties
        // Long running tasks like data fetch and so on can be placed here
        
        await ...

        // Then reset a flag that will switch the 
        // page to it's running (loaded) state and call StatHasChanged()
        // Your loading flags will differ, however you see fit to implement
        
        PageState.IsLoading = false;
        

         // Use InvokeAsync method with await to make sure 
         // StateHasChanged runs correctly here without interfering with another
         // thread and synchronizes back to correct context 

         await InvokeAsync(() => StateHasChanged());
    }
}

这里的关键点是您有机会获得一个响应式应用程序运行并显示一个加载微调器、使链接工作等，但仍然使用任务模式进行后台执行，然后当它全部完成后，您重置加载标志并异步调用“StateHasChanged”并显示功能应用程序。用户必须等待初始化代码完成，但会意识到应用程序正在加载并有机会进行小程度的交互。

Answer 2

这很难，因为我不知道问题的真正原因，而且由于我们的团队是 Blazor 的新手，我们也不知道如何表达这个问题。我上面的解释是我假设的情况，但不是原因。

原来问题是我们对 JavaScript 库的调用。困难的部分是我们的工作方式……但只是在出于某种疯狂的原因刷新页面之后。然而，在观看了关于 Pluralsight 的教程：“JavaScript Blazor 应用程序中的互操作”之后，我尝试通过从 .js 文件中调用 JavaScript 而不是从 C# 调用文件本身，这似乎带来了它如何正常工作。

这可能是那些“一次性”之一，但我在这里记录它以防其他人遇到类似问题并且像我们一样是 Blazor 的新手。

Blazor Web Assembly 应用程序部署和更新

Blazor Web Assembly App Deployment and Updates

single-page-application

webassembly

blazor