Apply Bswup improvements (#12408)

src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.js

@@ -2,13 +2,15 @@
 
 self.assetsExclude = [/\.scp\.css$/, /weather\.json$/];
 self.caseInsensitiveUrl = true;
-self.precachedAssetsInclude = [/favicon\.ico$/, /icon-512\.png$/, /bit-bw-64\.png$/];
 
 self.externalAssets = [
     {
         "url": "not-found/script.file.js"
     }
 ];
+// 'lax' opts into best-effort installs: the demo intentionally references a non-existent
+// asset to exercise the progress / error reporting UI. Under the default 'strict' setting
+// that would abort the install. See README.md > errorTolerance.
 self.errorTolerance = 'lax';
 
 self.importScripts('_content/Bit.Bswup/bit-bswup.sw.js');

src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.published.js

@@ -2,7 +2,6 @@
 
 self.assetsExclude = [/\.scp\.css$/, /weather\.json$/];
 self.caseInsensitiveUrl = true;
-self.precachedAssetsInclude = [/favicon\.ico$/, /icon-512\.png$/, /bit-bw-64\.png$/];
 
 //self.externalAssets = [
 //    {

src/Bswup/Bit.Bswup/Bit.Bswup.csproj

@@ -5,7 +5,13 @@
     <PropertyGroup>
         <TargetFrameworks>net10.0;net9.0;net8.0</TargetFrameworks>
         <IsTrimmable>true</IsTrimmable>
-        <ResolveStaticWebAssetsInputsDependsOn Condition="'$(TargetFramework)' == 'net10.0'">
+        <!-- The single TFM whose build (re)generates the wwwroot JS/CSS from Scripts/Styles via
+             the node toolchain. Pinned to one TFM so tsc/esbuild run once and parallel inner
+             builds of the other TFMs don't race writing wwwroot. Computed as the first entry of
+             TargetFrameworks (rather than a hardcoded literal) so it stays valid if the TFM list
+             is reordered or net10.0 is dropped. -->
+        <BswupAssetsBuildTfm>$(TargetFrameworks.Split(';')[0])</BswupAssetsBuildTfm>
+        <ResolveStaticWebAssetsInputsDependsOn Condition="'$(TargetFramework)' == '$(BswupAssetsBuildTfm)'">
             BeforeBuildTasks;
             $(ResolveStaticWebAssetsInputsDependsOn)
         </ResolveStaticWebAssetsInputsDependsOn>
@@ -21,27 +27,29 @@
         <PackageReference Condition="'$(TargetFramework)' == 'net10.0'" Include="Microsoft.AspNetCore.Components.Web" Version="10.0.0" />
     </ItemGroup>
 
+    <!-- Keep the build inputs (tsconfig + package manifests) out of the published static web
+         assets while still showing them in the project. -->
     <ItemGroup>
-        <Content Remove="tsconfig.json" />
-        <None Include="tsconfig.json" />
+        <Content Remove="package*.json;tsconfig*.json" />
+        <None Include="package*.json;tsconfig*.json" />
     </ItemGroup>
 
-    <ItemGroup>
-      <Folder Include="wwwroot\" />
-    </ItemGroup>
-
-        <Target Name="BeforeBuildTasks" AfterTargets="CoreCompile" Condition="'$(TargetFramework)' == 'net10.0'">
+    <Target Name="BeforeBuildTasks" AfterTargets="CoreCompile" Condition="'$(TargetFramework)' == '$(BswupAssetsBuildTfm)'">
         <CallTarget Targets="InstallNodejsDependencies"/>
         <CallTarget Targets="BuildJavaScript"/>
         <CallTarget Targets="BuildCss"/>
     </Target>
 
-    <Target Name="InstallNodejsDependencies" Inputs="package.json" Outputs="node_modules\.package-lock.json">
+    <Target Name="InstallNodejsDependencies" Inputs="package.json;package-lock.json" Outputs="node_modules\.package-lock.json">
         <Exec Command="npm install" StandardOutputImportance="high" StandardErrorImportance="high" />
     </Target>
 
-    <Target Name="BuildJavaScript" Inputs="Scripts/bit-bswup.ts;Scripts/bit-bswup.progress.ts;Scripts/bit-bswup.sw.ts" Outputs="wwwroot/bit-bswup.js;wwwroot/bit-bswup.progress.js;wwwroot/bit-bswup.sw.js">
+    <Target Name="BuildJavaScript" Inputs="Scripts/bit-bswup.ts;Scripts/bit-bswup.progress.ts;Scripts/bit-bswup.sw.ts;Scripts/bit-bswup.sw-cleanup.ts;tsconfig.json;tsconfig.sw.json" Outputs="wwwroot/bit-bswup.js;wwwroot/bit-bswup.progress.js;wwwroot/bit-bswup.sw.js;wwwroot/bit-bswup.sw-cleanup.js">
+        <!-- Page scripts (DOM lib) and service-worker scripts (WebWorker lib) are compiled by
+             separate tsconfigs because the DOM and WebWorker type libraries cannot coexist in
+             one compilation. Both emit into wwwroot. -->
         <Exec Command="node_modules/.bin/tsc" StandardOutputImportance="high" StandardErrorImportance="high" />
+        <Exec Command="node_modules/.bin/tsc -p tsconfig.sw.json" StandardOutputImportance="high" StandardErrorImportance="high" />
         <Exec Condition=" '$(Configuration)' == 'Release' " Command="node_modules/.bin/esbuild wwwroot/bit-bswup.js --minify --outfile=wwwroot/bit-bswup.js --allow-overwrite" StandardOutputImportance="high" StandardErrorImportance="high" />
         <Exec Condition=" '$(Configuration)' == 'Release' " Command="node_modules/.bin/esbuild wwwroot/bit-bswup.progress.js --minify --outfile=wwwroot/bit-bswup.progress.js --allow-overwrite" StandardOutputImportance="high" StandardErrorImportance="high" />
         <Exec Condition=" '$(Configuration)' == 'Release' " Command="node_modules/.bin/esbuild wwwroot/bit-bswup.sw.js --minify --outfile=wwwroot/bit-bswup.sw.js --allow-overwrite" StandardOutputImportance="high" StandardErrorImportance="high" />
@@ -51,11 +59,4 @@
         <Exec Command="node_modules/.bin/esbuild Styles/bit-bswup.progress.css --minify --outfile=wwwroot/bit-bswup.progress.css" StandardOutputImportance="high" StandardErrorImportance="high" />
     </Target>
 
-    <ItemGroup>
-        <Content Remove="package*.json" />
-        <Content Remove="tsconfig.json" />
-        <None Include="package*json" />
-        <None Include="tsconfig.json" />
-    </ItemGroup>
-
 </Project>

src/Bswup/Bit.Bswup/BswupProgress.razor

@@ -10,24 +10,54 @@
     [Parameter] public string? Handler { get; set; }
 }
 
-<div id="bit-bswup">
-    @if (ChildContent is not null) 
+@* Configuration is published as data-* attributes and read by bit-bswup.progress.js when it
+   loads (it self-initializes from these attributes). This deliberately avoids emitting an
+   inline <script>:
+     - a strict Content-Security-Policy (e.g. script-src 'self') would block an inline
+       script - the same CSP the README recommends for hardening the service worker; and
+     - inline <script> tags added by an interactive Blazor renderer are not executed by the
+       browser, so the old approach only worked when this component was part of the
+       statically-rendered host document.
+   Razor attribute-encodes these values and the script reads them back via getAttribute, so
+   no value can break out of the attribute into markup or script. Make sure
+   _content/Bit.Bswup/bit-bswup.progress.js is referenced on the page. *@
+<div id="bit-bswup"
+     style="display: none;"
+     data-bit-bswup-config="true"
+     data-bit-bswup-auto-reload="@(AutoReload ? "true" : "false")"
+     data-bit-bswup-show-logs="@(ShowLogs ? "true" : "false")"
+     data-bit-bswup-show-assets="@(ShowAssets ? "true" : "false")"
+     data-bit-bswup-app-container="@AppContainer"
+     data-bit-bswup-hide-app="@(HideApp ? "true" : "false")"
+     data-bit-bswup-auto-hide="@(AutoHide ? "true" : "false")"
+     data-bit-bswup-handler="@Handler">
+    @if (ChildContent is not null)
     {
         @ChildContent
     }
-    else 
+    else
     {
         <div class="bit-bswup-container">
             <p class="bit-bswup-title">New version is available</p>
             <p class="bit-bswup-description">Downloading updates, please wait...</p>
             <div class="bit-bswup-progress">
-                <div id="bit-bswup-progress-bar" style="width: 0%"></div>
+                <div id="bit-bswup-progress-bar"
+                     role="progressbar"
+                     aria-label="Update download progress"
+                     aria-valuemin="0"
+                     aria-valuemax="100"
+                     aria-valuenow="0"
+                     style="width: 0%"></div>
             </div>
             <p id="bit-bswup-percent">0 %</p>
             <ul id="bit-bswup-assets" style="display: @(ShowAssets ? "block" : "none");"></ul>
+            <div id="bit-bswup-error" class="bit-bswup-error" style="display: none;" role="alert">
+                <p class="bit-bswup-error-title">Update failed to install</p>
+                <p id="bit-bswup-error-message" class="bit-bswup-error-message"></p>
+                <pre id="bit-bswup-error-details" class="bit-bswup-error-details"></pre>
+                <button id="bit-bswup-error-retry" type="button">Retry</button>
+            </div>
         </div>
         <button id="bit-bswup-reload">Update ready to install!</button>
     }
-    <img style="display: none" src=""
-         onerror="BitBswupProgress.start(@(AutoReload ? "true" : "false"), @(ShowLogs ? "true" : "false"), @(ShowAssets ? "true" : "false"), '@(AppContainer)', @(HideApp ? "true" : "false"), @(AutoHide ? "true" : "false"), '@(Handler)')">
 </div>