如何确定Blazor应用程序是否已安装并独立运行

Question

如果我的Blazor应用程序已经安装，我想显示其他内容。我并没有试图连接到安装过程中。

Answer 1

您可以使用javascript方法检查您的应用程序是否在独立模式下运行，并使用js-interop在组件中调用它。

添加此js:

<script>
window.isStandalone = () => {
if (window.matchMedia('(display-mode: standalone)').matches) {
return true;
}
return false;
}
</script>

这样称呼它：

@inject IJSRuntime JS
<p>@_displayMode</p>
@code {
private string _displayMode;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && _displayMode == null)
{
_displayMode = await JS.InvokeAsync<bool>("isStandalone") ? "Standalone" : "Not standalone";
StateHasChanged();
}
}
}

或者您可以使用CSS方法进行媒体查询：

@media all and (display-mode: standalone) {
.install-button {
display: none;
}
}

当在独立模式下运行时，上面的css将隐藏类为.install-button的按钮。