From aa4c34dd011084e183eb94d771d990ee2aeaa116 Mon Sep 17 00:00:00 2001 From: Pig Fang Date: Sun, 28 Jun 2020 15:35:48 +0800 Subject: [PATCH] fix cross origin issue for assets --- app/Http/View/Composers/FootComposer.php | 2 +- app/Services/Hook.php | 8 ++- resources/assets/src/scripts/sw.ts | 68 +++++++++++++++++++++--- resources/views/home.twig | 2 +- 4 files changed, 70 insertions(+), 10 deletions(-) diff --git a/app/Http/View/Composers/FootComposer.php b/app/Http/View/Composers/FootComposer.php index 28f21dc4..69e3955b 100644 --- a/app/Http/View/Composers/FootComposer.php +++ b/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', ]; diff --git a/app/Services/Hook.php b/app/Services/Hook.php index 6227ca10..f033fc4e 100644 --- a/app/Services/Hook.php +++ b/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']; }); } diff --git a/resources/assets/src/scripts/sw.ts b/resources/assets/src/scripts/sw.ts index 19302edd..7d54c85d 100644 --- a/resources/assets/src/scripts/sw.ts +++ b/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 diff --git a/resources/views/home.twig b/resources/views/home.twig index 354afc46..fd2a12b2 100644 --- a/resources/views/home.twig +++ b/resources/views/home.twig @@ -150,7 +150,7 @@ {% if home_page_css_loader %} - + {% endif %}