Add service worker

Author: SteveSandersonMS

src/ProjectTemplates/BlazorWasm.ProjectTemplates/BlazorWasm-CSharp.Client.csproj.in

@@ -11,10 +11,25 @@
     <PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="${MicrosoftAspNetCoreBlazorDevServerPackageVersion}" PrivateAssets="all" />
     <PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="${MicrosoftAspNetCoreBlazorHttpClientPackageVersion}" />
   </ItemGroup>
+
   <!--#if Hosted -->
   <ItemGroup>
     <ProjectReference Include="..\Shared\BlazorWasm-CSharp.Shared.csproj" />
   </ItemGroup>
+
   <!--#endif -->
+  <!--#if PWA -->
+  <Target Name="PublishServiceWorker" AfterTargets="CopyFilesToPublishDirectory">
+    <!-- Use the "published" version of the service worker in the output -->
+    <PropertyGroup>
+      <ServiceWorkerMoveFrom>$(PublishDir)$(BlazorPublishDistDir)service-worker.published.js</ServiceWorkerMoveFrom>
+      <ServiceWorkerMoveTo>$(PublishDir)$(BlazorPublishDistDir)service-worker.js</ServiceWorkerMoveTo>
+    </PropertyGroup>
+    <Move SourceFiles="$(ServiceWorkerMoveFrom)" DestinationFiles="$(ServiceWorkerMoveTo)" />
 
+    <!-- Append a unique version number that will trigger installation of updates -->
+    <WriteLinesToFile File="$(ServiceWorkerMoveTo)" Lines="const serviceWorkerVersion = '$([System.Guid]::NewGuid())'" />
+  </Target>
+
+  <!--#endif -->
 </Project>

src/ProjectTemplates/BlazorWasm.ProjectTemplates/content/BlazorWasm-CSharp/.template.config/dotnetcli.host.json

@@ -5,9 +5,12 @@
       "longName": "no-restore",
       "shortName": ""
     },
-      "Hosted": {
-        "longName": "hosted"
-      },
+    "Hosted": {
+      "longName": "hosted"
+    },
+    "PWA": {
+      "longName": "pwa"
+    },
     "Framework": {
       "longName": "framework"
     }

src/ProjectTemplates/BlazorWasm.ProjectTemplates/content/BlazorWasm-CSharp/.template.config/template.json

@@ -74,6 +74,12 @@
           "exclude": [
             "*.sln"
           ]
+        },
+        {
+          "condition": "(!PWA)",
+          "exclude": [
+            "Client/wwwroot/service-worker*.js"
+          ]
         }
       ]
     }
@@ -147,6 +153,12 @@
         "fallbackVariableName": "HttpsPortGenerated"
       },
       "replaces": "44300"
+    },
+    "PWA": {
+      "type": "parameter",
+      "datatype": "bool",
+      "defaultValue": "false",
+      "description": "If specified, produces a Progressive Web Application (PWA) supporting installation and offline use."
     }
   },
   "tags": {

src/ProjectTemplates/BlazorWasm.ProjectTemplates/content/BlazorWasm-CSharp/.template.config/vs-2017.3.host.json

@@ -25,6 +25,13 @@
         "text": "ASP.NET Core _hosted"
       },
       "isVisible": "true"
+    },
+    {
+      "id": "PWA",
+      "name": {
+        "text": "_Progressive Web Application"
+      },
+      "isVisible": "true"
     }
   ]
 }

src/ProjectTemplates/BlazorWasm.ProjectTemplates/content/BlazorWasm-CSharp/Client/wwwroot/index.html

@@ -19,6 +19,9 @@
         <a class="dismiss">🗙</a>
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
+    <!--#if PWA -->
+    <script>navigator.serviceWorker.register('service-worker.js');</script>
+    <!--#endif -->
 </body>
 
 </html>

src/ProjectTemplates/BlazorWasm.ProjectTemplates/content/BlazorWasm-CSharp/Client/wwwroot/service-worker.js

@@ -0,0 +1,3 @@
+// See service-worker.published.js for the offline support logic.
+// This is not enabled in development as it would make development more difficult
+// (changes would not be reflected on the first load after each change).

src/ProjectTemplates/BlazorWasm.ProjectTemplates/content/BlazorWasm-CSharp/Client/wwwroot/service-worker.published.js

@@ -0,0 +1,55 @@
+// Caution! Be sure you understand the caveats before publishing an application with
+// offline support. See https://aka.ms/blazor-offline-considerations
+//
+// This service worker implements a cache-first policy. For offline support to work,
+// you must ensure that 'resourcesAvailableOffline' lists all the resources needed
+// by your application (except for .NET assemblies and dotnet.wasm).
+
+const resourcesAvailableOffline = [
+    'index.html',
+    '_framework/blazor.boot.json',
+    '_framework/blazor.webassembly.js',
+    '_framework/wasm/dotnet.js',
+    'css/site.css',
+    'css/bootstrap/bootstrap.min.css',
+    'css/open-iconic/font/css/open-iconic-bootstrap.min.css',
+    'css/open-iconic/font/fonts/open-iconic.woff'
+];
+
+const cacheNamePrefix = 'offline-cache-';
+const cacheName = () => `${cacheNamePrefix}${serviceWorkerVersion}`;
+
+self.addEventListener('install', event => event.waitUntil(onInstall(event)));
+self.addEventListener('activate', event => event.waitUntil(onActivate(event)));
+self.addEventListener('fetch', event => event.respondWith(onFetch(event)));
+
+async function onInstall(event) {
+    console.info('Service worker: Install');
+    const cache = await caches.open(cacheName());
+    await cache.addAll(resourcesAvailableOffline);
+}
+
+async function onActivate(event) {
+    console.info('Service worker: Activate');
+
+    // Delete unused caches
+    const cacheKeys = await caches.keys();
+    return Promise.all(cacheKeys
+        .filter(key => key.startsWith(cacheNamePrefix) && key !== cacheName())
+        .map(key => caches.delete(key)));
+}
+
+async function onFetch(event) {
+    let cachedResponse = null;
+    if (event.request.method === 'GET') {
+        // For all navigation requests, try to serve index.html from cache
+        // If you need some URLs to be server-rendered, edit the following check to exclude those URLs
+        const shouldServeIndexHtml = event.request.mode === 'navigate';
+
+        const request = shouldServeIndexHtml ? 'index.html' : event.request;
+        const cache = await caches.open(cacheName());
+        cachedResponse = await cache.match(request);
+    }
+
+    return cachedResponse || fetch(event.request);
+}