Добавлено уведомление о обновлении

PlaylistShared.Pwa/Layout/MainLayout.razor

@@ -1,5 +1,7 @@
 @using PlaylistShared.Pwa.Components.Global
 @inherits LayoutComponentBase
+@inject PwaUpdateService PwaUpdateService
+@inject IJSRuntime JSRuntime
 
 <MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
 <MudPopoverProvider />
@@ -37,6 +39,8 @@
     private bool _isDarkMode = true;
     private MudTheme? _theme;
     
+    private DotNetObjectReference<PwaUpdateService>? _dotNetRef;
+
     protected override void OnInitialized()
     {
         base.OnInitialized();
@@ -49,6 +53,15 @@
         };
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _dotNetRef = DotNetObjectReference.Create(PwaUpdateService);
+            await JSRuntime.InvokeVoidAsync("registerSWMessageHandler", _dotNetRef);
+        }
+    }
+
     private void DrawerToggle()
     {
         _drawerOpen = !_drawerOpen;

PlaylistShared.Pwa/Program.cs

@@ -20,6 +20,7 @@ internal class Program
             return new HttpClient { BaseAddress = new Uri(apiUrl) };
         });
 
+        builder.Services.AddScoped<PwaUpdateService>();
         builder.Services.AddScoped<TokenStorage>();
         builder.Services.AddScoped<PlayerStorage>();
         builder.Services.AddScoped<AuthStateProvider>();

PlaylistShared.Pwa/Properties/launchSettings.json

@@ -10,6 +10,14 @@
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
+    },
+
+    "https (prod)": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "https://localhost:7225;http://localhost:5181"
     }
   }
 }

PlaylistShared.Pwa/Services/PwaUpdateService.cs

@@ -0,0 +1,33 @@
+using Microsoft.JSInterop;
+using MudBlazor;
+
+namespace PlaylistShared.Pwa.Services;
+
+public class PwaUpdateService
+{
+    private readonly ISnackbar _snackbar;
+    private readonly IJSRuntime _jsRuntime;
+
+    public PwaUpdateService(ISnackbar snackbar, IJSRuntime jsRuntime)
+    {
+        _snackbar = snackbar;
+        _jsRuntime = jsRuntime;
+    }
+
+    [JSInvokable]
+    public void OnNewVersionAvailable()
+    {
+        _snackbar.Add("Доступна новая версия! Обновите страницу.", Severity.Info, configure: options =>
+        {
+            options.Action = "Обновить";
+            options.ShowCloseIcon = false;
+            options.RequireInteraction = true;
+            options.OnClick = _ =>
+            {
+                _jsRuntime.InvokeVoidAsync("location.reload", true);
+                return Task.CompletedTask;
+            };
+            options.CloseAfterNavigation = true;
+        });
+    }
+}

PlaylistShared.Pwa/wwwroot/index.html

@@ -168,6 +168,15 @@
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>
     <script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>
     <script>navigator.serviceWorker.register('service-worker.js', { updateViaCache: 'none' });</script>
+    <script>
+        function registerSWMessageHandler(dotNetHelper) {
+            navigator.serviceWorker.addEventListener('message', event => {
+                if (event.data && event.data.type === 'SW_ACTIVATED') {
+                    dotNetHelper.invokeMethodAsync('OnNewVersionAvailable');
+                }
+            });
+        }
+    </script>
 </body>
 
 </html>

PlaylistShared.Pwa/wwwroot/service-worker.published.js

@@ -9,9 +9,9 @@ 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$/ ];
+// ИСКЛЮЧАЕМ также service-worker-assets.js
+const offlineAssetsExclude = [/^service-worker\.js$/, /\/service-worker-assets\.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);
@@ -19,7 +19,6 @@ const manifestUrlList = self.assetsManifest.assets.map(asset => new URL(asset.ur
 async function onInstall(event) {
     self.skipWaiting();
 
-    // 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)))
@@ -30,6 +29,12 @@ async function onInstall(event) {
 async function onActivate(event) {
     await self.clients.claim();
 
+    // НОВОЕ: Уведомляем все открытые вкладки о том, что новый SW активирован
+    const clientsList = await self.clients.matchAll();
+    clientsList.forEach(client => {
+        client.postMessage({ type: 'SW_ACTIVATED', version: self.assetsManifest.version });
+    });
+
     // Delete unused caches
     const cacheKeys = await caches.keys();
     await Promise.all(cacheKeys
@@ -38,13 +43,16 @@ async function onActivate(event) {
 }
 
 async function onFetch(event) {
+    // НОВОЕ: никогда не перехватываем файлы Service Worker
+    const url = event.request.url;
+    if (url.includes('/service-worker.js') || url.includes('/service-worker-assets.js')) {
+        return fetch(event.request);
+    }
+
     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);
+            && !manifestUrlList.some(u => u === event.request.url);
 
         const request = shouldServeIndexHtml ? 'index.html' : event.request;
         const cache = await caches.open(cacheName);