How can I determine if Blazor App is installed, running standalone

user_834398 0
Viewed 52

I would like to display additional content if my Blazor App has been installed. I am not trying to hook into the install process.

progressive-web-apps webassembly blazor
1 Answers

You can use a javascript method to check if your app is running in standalone mode and call it in your component using js interop.

Add this js:

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

        return false;
    }
</script>

Call it like this:

@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();
        }
    }
}

Or you can use CSS approach with media query:

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

The css above will hide the button with class .install-button when running in standalone mode.

user_108391340
Related