fix cross origin issue for assets

app/Http/View/Composers/FootComposer.php

@@ -74,7 +74,7 @@ class FootComposer
             ];
         }
         $scripts[] = [
-            'src' => 'https://cdn.jsdelivr.net/npm/@blessing-skin/admin-lte@3.0/dist/admin-lte.min.js',
+            'src' => 'https://cdn.jsdelivr.net/npm/@blessing-skin/admin-lte@3.0.4/dist/admin-lte.min.js',
             'integrity' => 'sha256-lEpMZPtZ0RgHYZFOcJeX94WMegvHJ+beF5V7XtCcWxY=',
             'crossorigin' => 'anonymous',
         ];

app/Services/Hook.php

@@ -71,7 +71,11 @@ class Hook
             });
             if ($matched) {
                 $urls->each(function ($url) use (&$links) {
-                    $links[] = ['rel' => 'stylesheet', 'href' => $url];
+                    $links[] = [
+                        'rel' => 'stylesheet',
+                        'href' => $url,
+                        'crossorigin' => 'anonymous',
+                    ];
                 });
             }
 
@@ -89,7 +93,7 @@ class Hook
             });
             if ($matched) {
                 $urls->each(function ($url) use (&$scripts) {
-                    $scripts[] = ['src' => $url];
+                    $scripts[] = ['src' => $url, 'crossorigin' => 'anonymous'];
                 });
             }
 

resources/assets/src/scripts/sw.ts

@@ -6,11 +6,14 @@ import {
 } from 'workbox-strategies'
 import { ExpirationPlugin } from 'workbox-expiration'
 
+const oneWeek = 7 * 24 * 3600
+
 if (process.env.NODE_ENV === 'development') {
   registerRoute(/\.js/, new NetworkOnly())
   registerRoute(/\.css/, new NetworkOnly())
 }
 
+//#region Pictures
 registerRoute(
   /\/preview\/\d+/,
   new CacheFirst({
@@ -18,7 +21,9 @@ registerRoute(
     fetchOptions: {
       credentials: 'omit',
     },
-    plugins: [new ExpirationPlugin({ maxAgeSeconds: 7 * 24 * 60 * 60 })],
+    plugins: [
+      new ExpirationPlugin({ maxAgeSeconds: oneWeek, purgeOnQuotaError: true }),
+    ],
   }),
 )
 
@@ -39,45 +44,96 @@ registerRoute(
     fetchOptions: {
       credentials: 'omit',
     },
+    plugins: [new ExpirationPlugin({ maxAgeSeconds: oneWeek })],
   }),
 )
 
-registerRoute(/.+\/\d+\.js$/, new NetworkOnly())
+//#endregion
 
+//#region jsDelivr
 registerRoute(
-  /\/app\/\w{2,3}\.\w{7}\.js$/,
+  /.*cdn\.jsdelivr\.net/,
+  new CacheFirst({
+    cacheName: 'jsdelivr-v1',
+    fetchOptions: {
+      credentials: 'omit',
+      mode: 'cors',
+    },
+    plugins: [
+      new ExpirationPlugin({ maxAgeSeconds: oneWeek, purgeOnQuotaError: true }),
+    ],
+  }),
+)
+//#endregion
+
+//#region JavaScript files
+registerRoute(
+  /.+\/app\/\w{2,3}\.\w{7}\.js$/,
   new CacheFirst({
     cacheName: 'javascript-v1',
     fetchOptions: {
       credentials: 'omit',
+      mode: 'cors',
     },
+    plugins: [
+      new ExpirationPlugin({ maxAgeSeconds: oneWeek, purgeOnQuotaError: true }),
+    ],
   }),
 )
-
 registerRoute(
-  ({ request }) => request.destination === 'script',
+  /.+\/plugins\/.+\.js$/,
   new StaleWhileRevalidate({
     cacheName: 'javascript-v1',
     fetchOptions: {
       credentials: 'omit',
+      mode: 'cors',
     },
+    plugins: [
+      new ExpirationPlugin({ maxAgeSeconds: oneWeek, purgeOnQuotaError: true }),
+    ],
+  }),
+)
+//#endregion
+
+//#region CSS files
+registerRoute(
+  /.+\/app\/.*\.css$/,
+  new CacheFirst({
+    cacheName: 'stylesheet-v1',
+    fetchOptions: {
+      credentials: 'omit',
+      mode: 'cors',
+    },
+    plugins: [
+      new ExpirationPlugin({ maxAgeSeconds: oneWeek, purgeOnQuotaError: true }),
+    ],
   }),
 )
 registerRoute(
-  ({ request }) => request.destination === 'style',
+  /.+\/plugins\/.+\.css$/,
   new StaleWhileRevalidate({
     cacheName: 'stylesheet-v1',
     fetchOptions: {
       credentials: 'omit',
+      mode: 'cors',
     },
+    plugins: [
+      new ExpirationPlugin({ maxAgeSeconds: oneWeek, purgeOnQuotaError: true }),
+    ],
   }),
 )
+//#endregion
+
+//#region Fonts
 registerRoute(
   ({ request }) => request.destination === 'font',
   new StaleWhileRevalidate({
     cacheName: 'font-v1',
     fetchOptions: {
       credentials: 'omit',
+      mode: 'cors',
     },
+    plugins: [new ExpirationPlugin({ maxEntries: 12 })],
   }),
 )
+//#endregion

resources/views/home.twig

@@ -150,7 +150,7 @@
     </div>
 
     {% if home_page_css_loader %}
-      <script src="{{ home_page_css_loader }}"></script>
+      <script src="{{ home_page_css_loader }}" crossorigin="anonymous"></script>
     {% endif %}
     <script type="application/json" id="blessing-extra">
       {{ {transparent_navbar: transparent_navbar}|json_encode|raw }}