2 files changed, 53 insertions, 0 deletions
diff --git a/MatrixUtils.Web/Shared/UpdateAvailableDetector.razor b/MatrixUtils.Web/Shared/UpdateAvailableDetector.razor
new file mode 100644
index 0000000..5197a6f
--- /dev/null
+++ b/MatrixUtils.Web/Shared/UpdateAvailableDetector.razor
@@ -0,0 +1,38 @@
+@* Source: https://whuysentruit.medium.com/blazor-wasm-pwa-adding-a-new-update-available-notification-d9f65c4ad13 *@
+@inject IJSRuntime _jsRuntime
+
+@if (_newVersionAvailable)
+{
+    <button type="button" class="btn btn-warning shadow floating-update-button" onclick="window.location.reload()">
+        A new version of the application is available. Click here to reload.
+    </button>
+}
+
+@code {
+
+    private bool _newVersionAvailable = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await RegisterForUpdateAvailableNotification();
+    }
+
+    private async Task RegisterForUpdateAvailableNotification()
+    {
+        await _jsRuntime.InvokeAsync<object>(
+            identifier: "registerForUpdateAvailableNotification",
+            DotNetObjectReference.Create(this),
+            nameof(OnUpdateAvailable));
+    }
+
+    [JSInvokable(nameof(OnUpdateAvailable))]
+    public Task OnUpdateAvailable()
+    {
+        _newVersionAvailable = true;
+
+        StateHasChanged();
+
+        return Task.CompletedTask;
+    }
+
+}
\ No newline at end of file
diff --git a/MatrixUtils.Web/Shared/UpdateAvailableDetector.razor.css b/MatrixUtils.Web/Shared/UpdateAvailableDetector.razor.css
new file mode 100644
index 0000000..32bff09
--- /dev/null
+++ b/MatrixUtils.Web/Shared/UpdateAvailableDetector.razor.css
@@ -0,0 +1,15 @@
+.floating-update-button {
+    position: fixed;
+
+    right: 2rem;
+    bottom: 2rem;
+
+    padding: 1rem 1.5rem;
+
+    animation: fadein 2s ease-out;
+}
+
+@keyframes fadein {
+    from { right: -100%; }
+    to { right: 2rem; }
+}
\ No newline at end of file