#179 - Install component.

maraf · Dec 25, 2019 · a1a403f · a1a403f
1 parent 6c7d8c5
commit a1a403f
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 8 deletions.
diff --git a/src/Money.UI.Blazor/Components/PwaInstall.razor b/src/Money.UI.Blazor/Components/PwaInstall.razor
@@ -0,0 +1,14 @@
+@if (IsInstallable)
+{
+    <button @ref="Button" class="btn btn-link navbar-btn nav-link" @onclick="InstallAsync" title="Install as application to your device" data-toggle="tooltip" data-placement="bottom">
+        <Icon Identifier="download" />
+        Install
+    </button>
+}
+else if(IsUpdateable)
+{
+    <button @ref="Button" class="btn btn-link navbar-btn nav-link" @onclick="UpdateAsync" title="Application update is ready. Reload page to complete." data-toggle="tooltip" data-placement="bottom">
+        <Icon Identifier="download" />
+        Update
+    </button>
+}
diff --git a/src/Money.UI.Blazor/Components/PwaInstall.razor.cs b/src/Money.UI.Blazor/Components/PwaInstall.razor.cs
@@ -0,0 +1,74 @@
+using Microsoft.AspNetCore.Components;
+using Money.Services;
+using Neptuo.Logging;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Money.Components
+{
+    public partial class PwaInstall : ComponentBase, IDisposable
+    {
+        [Inject]
+        internal PwaInstallInterop Interop { get; set; }
+
+        [Inject]
+        internal ILog<PwaInstall> Log { get; set; }
+
+        [Inject]
+        internal Navigator Navigator { get; set; }
+
+        protected ElementReference Button { get; set; }
+        protected bool IsInstallable { get; set; }
+        protected bool IsUpdateable { get; set; }
+
+        protected override void OnInitialized()
+        {
+            Log.Debug("OnInitialized");
+
+            base.OnInitialized();
+            Interop.Initialize(this);
+        }
+
+        //protected async override Task OnAfterRenderAsync(bool firstRender)
+        //{
+        //    await base.OnAfterRenderAsync(firstRender);
+
+        //    if (IsInstallable)
+        //        await Tooltip.InitializeAsync(Button);
+        //}
+
+        public void MakeInstallable()
+        {
+            Log.Debug("Installable=True");
+
+            IsInstallable = true;
+            StateHasChanged();
+        }
+
+        public void MakeUpdateable()
+        {
+            Log.Debug("Updateable=True");
+
+            IsUpdateable = true;
+            StateHasChanged();
+        }
+
+        protected async Task InstallAsync()
+        {
+            await Interop.InstallAsync();
+            IsInstallable = false;
+        }
+
+        protected async Task UpdateAsync() 
+            => await Navigator.ReloadAsync();
+
+        public void Dispose()
+        {
+            Interop.Remove(this);
+        }
+    }
+}
diff --git a/src/Money.UI.Blazor/Components/PwaInstallInterop.cs b/src/Money.UI.Blazor/Components/PwaInstallInterop.cs
@@ -0,0 +1,52 @@
+using Microsoft.JSInterop;
+using Neptuo;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Money.Components
+{
+    public class PwaInstallInterop
+    {
+        private static List<PwaInstall> editors = new List<PwaInstall>();
+        private readonly IJSRuntime jSRuntime;
+
+        public PwaInstallInterop(IJSRuntime jSRuntime)
+        {
+            Ensure.NotNull(jSRuntime, "jSRuntime");
+            this.jSRuntime = jSRuntime;
+        }
+
+        public void Initialize(PwaInstall editor)
+        {
+            Ensure.NotNull(editor, "editor");
+            editors.Add(editor);
+        }
+
+        public void Remove(PwaInstall editor)
+        {
+            Ensure.NotNull(editor, "editor");
+            editors.Remove(editor);
+        }
+
+        [JSInvokable("Pwa.Installable")]
+        public static void Installable()
+        {
+            foreach (var editor in editors)
+                editor.MakeInstallable();
+        }
+
+        [JSInvokable("Pwa.Updateable")]
+        public static void Updateable()
+        {
+            foreach (var editor in editors)
+                editor.MakeUpdateable();
+        }
+
+        public ValueTask InstallAsync() 
+            => jSRuntime.InvokeVoidAsync("BlazorPWA.installPWA");
+    }
+}
diff --git a/src/Money.UI.Blazor/Layouts/MainMenu.razor b/src/Money.UI.Blazor/Layouts/MainMenu.razor
@@ -27,5 +27,10 @@
             <NavLink class="nav-link" href="@Navigator.UrlAbout()">About</NavLink>
         </li>
     </ul>
+    <ul class="nav navbar-nav navbar-right">
+        <li>
+            <PwaInstall />
+        </li>
+    </ul>
     <UserInfo />
 </div> 
diff --git a/src/Money.UI.Blazor/Money.UI.Blazor.csproj b/src/Money.UI.Blazor/Money.UI.Blazor.csproj
@@ -60,4 +60,8 @@
     <Compile Update="**\*.razor.cs" DependentUpon="%(Filename)" />
     <Watch Include="**\*.razor" />
   </ItemGroup>
+
+  <ItemGroup>
+    <None Include="Components\PwaInstall.razor" />
+  </ItemGroup>
 </Project>
diff --git a/src/Money.UI.Blazor/Services/Navigator.cs b/src/Money.UI.Blazor/Services/Navigator.cs
@@ -1,5 +1,6 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.JSInterop;
 using Money.Models;
 using Neptuo;
 using Neptuo.Models.Keys;
@@ -15,15 +16,18 @@ internal class Navigator : NavigatorUrl, System.IDisposable
     {
         private readonly NavigationManager manager;
         private readonly Interop interop;
+        private readonly IJSRuntime jsRuntime;
 
         public event Action<string> LocationChanged;
 
-        public Navigator(NavigationManager manager, Interop interop)
+        public Navigator(NavigationManager manager, Interop interop, IJSRuntime jsRuntime)
         {
             Ensure.NotNull(manager, "manager");
             Ensure.NotNull(interop, "interop");
+            Ensure.NotNull(jsRuntime, "jsRuntime");
             this.manager = manager;
             this.interop = interop;
+            this.jsRuntime = jsRuntime;
 
             manager.LocationChanged += OnLocationChanged;
         }
@@ -36,6 +40,9 @@ public void Dispose()
         private void OnLocationChanged(object sender, LocationChangedEventArgs e)
             => LocationChanged?.Invoke(e.Location);
 
+        public ValueTask ReloadAsync()
+            => jsRuntime.InvokeVoidAsync("window.location.reload");
+
         private void OpenExternal(string url)
             => interop.NavigateTo(url);
 

diff --git a/src/Money.UI.Blazor/Startup.cs b/src/Money.UI.Blazor/Startup.cs
@@ -1,5 +1,6 @@
 using Microsoft.AspNetCore.Components.Builder;
 using Microsoft.Extensions.DependencyInjection;
+using Money.Components;
 using Money.Components.Bootstrap;
 using Money.Models;
 using Money.Models.Api;
@@ -20,6 +21,7 @@ public void ConfigureServices(IServiceCollection services)
             services
                 .Configure<ApiClientConfiguration>(BindApiClientConfiguration)
                 .AddTransient<Interop>()
+                .AddSingleton<PwaInstallInterop>()
                 .AddTransient<NavigatorUrl>()
                 .AddTransient<Navigator>()
                 .AddSingleton<ApiClient>()

diff --git a/src/Money.UI.Blazor/wwwroot/manifest.json b/src/Money.UI.Blazor/wwwroot/manifest.json
@@ -5,14 +5,14 @@
   "display": "standalone",
   "icons": [
     {
-      "src":"/images/icon-w-192x192.png",
-      "type":"image/png",
-      "sizes":"192x192"
+      "src": "/images/icon-w-192x192.png",
+      "type": "image/png",
+      "sizes": "192x192"
     },
     {
-      "src":"/images/icon-w-512x512.png",
-      "type":"image/png",
-      "sizes":"512x512"
+      "src": "/images/icon-w-512x512.png",
+      "type": "image/png",
+      "sizes": "512x512"
     }
   ]
 }
diff --git a/src/Money.UI.Blazor/wwwroot/service-worker.js b/src/Money.UI.Blazor/wwwroot/service-worker.js
@@ -5,7 +5,7 @@ const swInstallEvent = 'install';
 const swInstalledEvent = 'installed';
 const swActivateEvent = 'activate';
 const staticCachePrefix = 'blazor-cache-v';
-const staticCacheName = 'blazor-cache-v0.0.637128700707222204';
+const staticCacheName = 'blazor-cache-v0.0.637128710575909641';
 const requiredFiles = [
 "/_framework/blazor.boot.json",
 "/_framework/blazor.webassembly.js",