Add PWA support to WebAssembly Standalone template

Dimodi.Telerik.Blazor.Templates.csproj

@@ -16,15 +16,17 @@
     <PackageReadmeFile>README.md</PackageReadmeFile>
     <PackageReleaseNotes>
 NEW
-* Add support for Telerik UI for Blazor 11.1.0.
+* Add support for Progressive Web Applications (PWA) in the WebAssembly Standalone template.
+* Add compatibility with .NET 10 RC1.
+* Add support for Telerik UI for Blazor 11.1.1.
     </PackageReleaseNotes>
     <PackageRequireLicenseAcceptance>false</PackageRequireLicenseAcceptance>
     <PackageTags>Telerik;Blazor;dotnet-new;templates</PackageTags>
     <PackageType>Template</PackageType>
     <RepositoryUrl>https://github.com/dimodi/project-templates</RepositoryUrl>
     <TargetFramework>netstandard2.0</TargetFramework>
     <Title>Telerik Blazor Project and Item Templates</Title>
-    <Version>6.2.1</Version>
+    <Version>6.3.0</Version>
   </PropertyGroup>
 
   <ItemGroup>

Projects/Net8/TelerikBlazorWasmStandalone/.template.config/dotnetcli.host.json

@@ -4,6 +4,9 @@
     "Framework": {
       "longName": "framework"
     },
+    "PWA": {
+      "longName": "pwa"
+    },
     "TelerikVersion": {
       "longName": "telerik-version"
     },

Projects/Net8/TelerikBlazorWasmStandalone/.template.config/ide.host.json

@@ -2,6 +2,13 @@
   "$schema": "http://json.schemastore.org/vs-2017.3.host",
   "icon": "progress-logo.png",
   "symbolInfo": [
+    {
+      "id": "PWA",
+      "name": {
+        "text": "Progressive Web Application"
+      },
+      "isVisible": true
+    },
     {
       "id": "TelerikVersion",
       "name": {

Projects/Net8/TelerikBlazorWasmStandalone/.template.config/template.json

@@ -4,7 +4,8 @@
   "classifications": [
     "Web",
     "Blazor",
-    "WebAssembly"
+    "WebAssembly",
+    "PWA"
   ],
   "identity": "Dimodi.Telerik.Blazor.WebAssembly.Standalone",
   "name": "Telerik Blazor WebAssembly Standalone App",
@@ -81,10 +82,17 @@
       },
       "replaces": "{TVAR_NETSUFFIX}"
     },
+    "PWA": {
+      "type": "parameter",
+      "datatype": "bool",
+      "defaultValue": "false",
+      "description": "Add support for a Progressive Web Application.",
+      "displayName": "Progressive Web Application"
+    },
     "TelerikVersion": {
       "type": "parameter",
       "datatype": "choice",
-      "defaultValue": "11.1.0",
+      "defaultValue": "11.1.1",
       "description": "Select the Telerik UI for Blazor version.",
       "displayName": "Telerik UI for Blazor version",
       "choices": [
@@ -93,8 +101,8 @@
           "displayName": "Latest as wildcard (no CDN)"
         },
         {
-          "choice": "11.1.0",
-          "displayName": "11.1.0"
+          "choice": "11.1.1",
+          "displayName": "11.1.1"
         },
         {
           "choice": "10.0.0",
@@ -282,6 +290,15 @@
             "**/Services/**"
           ]
         },
+        {
+          "condition": "(!PWA)",
+          "exclude": [
+            "wwwroot/service-worker*.js",
+            "wwwroot/manifest.webmanifest",
+            "wwwroot/icon-192.png",
+            "wwwroot/icon-512.png"
+          ]
+        },
         {
           "rename": {
             "dockerignore.dockerignore": ".dockerignore"

Projects/Net8/TelerikBlazorWasmStandalone/TelerikBlazorWasmStandalone.csproj

@@ -13,6 +13,9 @@
 <!--#if (Docker) -->
     <UserSecretsId>{TVAR_DOCKERUSERSECRETSID}</UserSecretsId>
     <DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
+<!--#endif-->
+<!--#if (PWA)-->
+    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
 <!--#endif-->
   </PropertyGroup>
 
@@ -57,5 +60,11 @@
     </Compile>
   </ItemGroup>
 
+<!--#endif-->
+<!--#if (PWA)-->
+  <ItemGroup>
+    <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
+  </ItemGroup>
+
 <!--#endif-->
 </Project>

Projects/Net8/TelerikBlazorWasmStandalone/wwwroot/index.html

@@ -37,6 +37,11 @@
     <script type="importmap"></script>
 <!--#endif -->
     <link rel="icon" type="image/png" href="favicon.png" />
+<!--#if (PWA) -->
+    <link href="manifest.webmanifest" rel="manifest" />
+    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
+<!--#endif -->
 </head>
 
 <!--#if (RTL) -->
@@ -61,6 +66,9 @@
     <script src="_framework/blazor.webassembly#[.{fingerprint}].js" autostart="false"></script>
 <!--#else -->
     <script src="_framework/blazor.webassembly.js" autostart="false"></script>
+<!--#endif -->
+<!--#if (PWA) -->
+    <script>navigator.serviceWorker.register('service-worker.js', { updateViaCache: 'none' });</script>
 <!--#endif -->
     <script>
         document.addEventListener("DOMContentLoaded", function () {

Projects/Net8/TelerikBlazorWasmStandalone/wwwroot/manifest.webmanifest

@@ -0,0 +1,22 @@
+{
+  "name": "TelerikBlazorWasmStandalone",
+  "short_name": "TelerikBlazorWasmStandalone",
+  "id": "./",
+  "start_url": "./",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#03173d",
+  "prefer_related_applications": false,
+  "icons": [
+    {
+      "src": "icon-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "icon-192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    }
+  ]
+}

Projects/Net8/TelerikBlazorWasmStandalone/wwwroot/service-worker.js

@@ -0,0 +1,4 @@
+// In development, always fetch from the network and do not enable offline support.
+// This is because caching would make development more difficult (changes would not
+// be reflected on the first load after each change).
+self.addEventListener('fetch', () => { });

Projects/Net8/TelerikBlazorWasmStandalone/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
+
+self.importScripts('./service-worker-assets.js');
+self.addEventListener('install', event => event.waitUntil(onInstall(event)));
+self.addEventListener('activate', event => event.waitUntil(onActivate(event)));
+self.addEventListener('fetch', event => event.respondWith(onFetch(event)));
+
+const cacheNamePrefix = 'offline-cache-';
+const cacheName = `${cacheNamePrefix}${self.assetsManifest.version}`;
+const offlineAssetsInclude = [ /\.dll$/, /\.pdb$/, /\.wasm/, /\.html/, /\.js$/, /\.json$/, /\.css$/, /\.woff$/, /\.png$/, /\.jpe?g$/, /\.gif$/, /\.ico$/, /\.blat$/, /\.dat$/, /\.webmanifest$/ ];
+const offlineAssetsExclude = [ /^service-worker\.js$/ ];
+
+// Replace with your base path if you are hosting on a subfolder. Ensure there is a trailing '/'.
+const base = "/";
+const baseUrl = new URL(base, self.origin);
+const manifestUrlList = self.assetsManifest.assets.map(asset => new URL(asset.url, baseUrl).href);
+
+async function onInstall(event) {
+    console.info('Service worker: Install');
+
+    // Fetch and cache all matching items from the assets manifest
+    const assetsRequests = self.assetsManifest.assets
+        .filter(asset => offlineAssetsInclude.some(pattern => pattern.test(asset.url)))
+        .filter(asset => !offlineAssetsExclude.some(pattern => pattern.test(asset.url)))
+        .map(asset => new Request(asset.url, { integrity: asset.hash, cache: 'no-cache' }));
+    await caches.open(cacheName).then(cache => cache.addAll(assetsRequests));
+}
+
+async function onActivate(event) {
+    console.info('Service worker: Activate');
+
+    // Delete unused caches
+    const cacheKeys = await caches.keys();
+    await 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,
+        // unless that request is for an offline resource.
+        // If you need some URLs to be server-rendered, edit the following check to exclude those URLs
+        const shouldServeIndexHtml = event.request.mode === 'navigate'
+            && !manifestUrlList.some(url => url === event.request.url);
+
+        const request = shouldServeIndexHtml ? 'index.html' : event.request;
+        const cache = await caches.open(cacheName);
+        cachedResponse = await cache.match(request);
+    }
+
+    return cachedResponse || fetch(event.request);
+}

Projects/Net8/TelerikBlazorWebApp/.template.config/template.json

@@ -112,7 +112,7 @@
     "TelerikVersion": {
       "type": "parameter",
       "datatype": "choice",
-      "defaultValue": "11.1.0",
+      "defaultValue": "11.1.1",
       "description": "Select the Telerik UI for Blazor version.",
       "displayName": "Telerik UI for Blazor version",
       "choices": [
@@ -121,8 +121,8 @@
           "displayName": "Latest as wildcard"
         },
         {
-          "choice": "11.1.0",
-          "displayName": "11.1.0"
+          "choice": "11.1.1",
+          "displayName": "11.1.1"
         },
         {
           "choice": "10.0.0",

Projects/Net8/TelerikBlazorWebApp/TelerikBlazorWebApp/Program.cs

@@ -83,7 +83,7 @@
     app.UseHsts();
 }
 #if (FrameworkNumber >= "10")
-app.UseStatusCodePagesWithReExecute("/not-found", createScopeForErrors: true);
+app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
 #endif
 
 app.UseHttpsRedirection();

tests.sh

@@ -25,9 +25,9 @@ rm -rf TestWasmAloneDefaultSettings
 
 echo
 echo ===== WebAssembly Standalone, non-default settings =====
-echo dotnet new dimodi-blazorwasm -o TestWasmAloneNonDefaultSettings -f net9.0 -tv "*" -th bootstrap -dm -c -it Font -lo -dp -r -do
+echo dotnet new dimodi-blazorwasm -o TestWasmAloneNonDefaultSettings -f net9.0 -p -tv "*" -th bootstrap -dm -c -it Font -lo -dp -r -do
 
-dotnet new dimodi-blazorwasm -o TestWasmAloneNonDefaultSettings -f net9.0 -tv "*" -th bootstrap -dm -c -it Font -lo -dp -r -do
+dotnet new dimodi-blazorwasm -o TestWasmAloneNonDefaultSettings -f net9.0 -p -tv "*" -th bootstrap -dm -c -it Font -lo -dp -r -do
 cd TestWasmAloneNonDefaultSettings
 dotnet build