add sw.js

2023-11-26 15:19:20 +08:00 · 2023-11-26 15:19:20 +08:00 · 9baf6f0516
parent 21e910212c
commit 9baf6f0516
4 changed files with 216 additions and 9 deletions
--- a/index.html
+++ b/index.html
@ -5,10 +5,12 @@
    <link rel="icon" type="image/svg+xml" href="https://cdn.nofated.win/mc" />
 <!--     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Home · Nofated</title>
+    <title>Amane's Intro</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
+    <script>window.addEventListener("load",()=>{const e="1699180247";"serviceWorker"in navigator&&localStorage.getItem("sw.js-version")!=e?(navigator.serviceWorker.register("/sw.js",{scope:"/"}).then(function(t){console.log("ServiceWorker registration successful with scope: ",t.scope),localStorage.setItem("sw.js-version",e)}).catch(function(e){console.warn("ServiceWorker registration failed: ",e)}),navigator.serviceWorker.addEventListener("controllerchange",function(){var e=document.querySelector("title");e.innerText="Need update Service Worker - "+e.innerText})):console.log("ServiceWorker already the latest version."),quicklink.listen()})</script>
+    <script src="/quicklink.js"></script>
  </body>
 </html>
--- a/public/quicklink.js
+++ b/public/quicklink.js
@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(e.quicklink={})}(this,function(e){function n(e){return new Promise(function(n,r,t){(t=new XMLHttpRequest).open("GET",e,t.withCredentials=!0),t.onload=function(){200===t.status?n():r()},t.send()})}var r,t=(r=document.createElement("link")).relList&&r.relList.supports&&r.relList.supports("prefetch")?function(e){return new Promise(function(n,r,t){(t=document.createElement("link")).rel="prefetch",t.href=e,t.onload=n,t.onerror=r,document.head.appendChild(t)})}:n,o=window.requestIdleCallback||function(e){var n=Date.now();return setTimeout(function(){e({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-n))}})},1)},i=new Set,c=new Set,u=!1;function a(e){if(e){if(e.saveData)return new Error("Save-Data is enabled");if(/2g/.test(e.effectiveType))return new Error("network conditions are poor")}return!0}function s(e,r,o){var s=a(navigator.connection);return s instanceof Error?Promise.reject(new Error("Cannot prefetch, "+s.message)):(c.size>0&&!u&&console.warn("[Warning] You are using both prefetching and prerendering on the same document"),Promise.all([].concat(e).map(function(e){if(!i.has(e))return i.add(e),(r?function(e){return window.fetch?fetch(e,{credentials:"include"}):n(e)}:t)(new URL(e,location.href).toString())})))}function f(e,n){var r=a(navigator.connection);if(r instanceof Error)return Promise.reject(new Error("Cannot prerender, "+r.message));if(!HTMLScriptElement.supports("speculationrules"))return s(e),Promise.reject(new Error("This browser does not support the speculation rules API. Falling back to prefetch."));if(document.querySelector('script[type="speculationrules"]'))return Promise.reject(new Error("Speculation Rules is already defined and cannot be altered."));for(var t=0,o=[].concat(e);t<o.length;t+=1){var f=o[t];if(window.location.origin!==new URL(f,window.location.href).origin)return Promise.reject(new Error("Only same origin URLs are allowed: "+f));c.add(f)}i.size>0&&!u&&console.warn("[Warning] You are using both prefetching and prerendering on the same document");var l=function(e){var n=document.createElement("script");n.type="speculationrules",n.text='{"prerender":[{"source": "list","urls": ["'+Array.from(e).join('","')+'"]}]}';try{document.head.appendChild(n)}catch(e){return e}return!0}(c);return!0===l?Promise.resolve():Promise.reject(l)}e.listen=function(e){if(e||(e={}),window.IntersectionObserver){var n=function(e){e=e||1;var n=[],r=0;function t(){r<e&&n.length>0&&(n.shift()(),r++)}return[function(e){n.push(e)>1||t()},function(){r--,t()}]}(e.throttle||1/0),r=n[0],t=n[1],a=e.limit||1/0,l=e.origins||[location.hostname],d=e.ignores||[],h=e.delay||0,p=[],m=e.timeoutFn||o,w="function"==typeof e.hrefFn&&e.hrefFn,g=e.prerender||!1;u=e.prerenderAndPrefetch||!1;var v=new IntersectionObserver(function(n){n.forEach(function(n){if(n.isIntersecting)p.push((n=n.target).href),function(e,n){n?setTimeout(e,n):e()}(function(){-1!==p.indexOf(n.href)&&(v.unobserve(n),(u||g)&&c.size<1?f(w?w(n):n.href).catch(function(n){if(!e.onError)throw n;e.onError(n)}):i.size<a&&!g&&r(function(){s(w?w(n):n.href,e.priority).then(t).catch(function(n){t(),e.onError&&e.onError(n)})}))},h);else{var o=p.indexOf((n=n.target).href);o>-1&&p.splice(o)}})},{threshold:e.threshold||0});return m(function(){(e.el||document).querySelectorAll("a").forEach(function(e){l.length&&!l.includes(e.hostname)||function e(n,r){return Array.isArray(r)?r.some(function(r){return e(n,r)}):(r.test||r).call(r,n.href,n)}(e,d)||v.observe(e)})},{timeout:e.timeout||2e3}),function(){i.clear(),v.disconnect()}}},e.prefetch=s,e.prerender=f});
--- a/public/sw.js
+++ b/public/sw.js
@ -0,0 +1,202 @@
+importScripts('https://cdn.staticfile.org/workbox-sw/5.1.4/workbox-sw.min.js');
+
+workbox.setConfig({
+    modulePathPrefix: 'https://cdn.staticfile.org/workbox-sw/5.1.4/'
+});
+
+const { core, precaching, routing, strategies, expiration, cacheableResponse, backgroundSync } = workbox;
+const { CacheFirst, NetworkFirst, NetworkOnly, StaleWhileRevalidate } = strategies;
+const { ExpirationPlugin } = expiration;
+const { CacheableResponsePlugin } = cacheableResponse;
+
+const cacheSuffixVersion = '-231126a',
+    // precacheCacheName = core.cacheNames.precache,
+    // runtimeCacheName = core.cacheNames.runtime,
+    maxEntries = 100;
+
+self.addEventListener('activate', (event) => {
+    event.waitUntil(
+        caches.keys().then((keys) => {
+            return Promise.all(keys.map((key) => {
+                if (!key.includes(cacheSuffixVersion)) return caches.delete(key);
+            }));
+        })
+    );
+});
+
+
+core.setCacheNameDetails({
+    prefix: 'amaneintro',
+    suffix: cacheSuffixVersion
+});
+
+core.skipWaiting();
+core.clientsClaim();
+precaching.cleanupOutdatedCaches();
+
+routing.registerRoute(
+    /.*xgjalbum\.oss-cn-hangzhou\.aliyuncs\.com/,
+    new CacheFirst({
+        cacheName: 'static-immutable' + cacheSuffixVersion,
+        fetchOptions: {
+            mode: 'cors',
+            credentials: 'omit'
+        },
+        plugins: [
+            new ExpirationPlugin({
+                maxAgeSeconds: 30 * 24 * 60 * 60,
+                purgeOnQuotaError: true
+            })
+        ]
+    })
+);
+
+routing.registerRoute(
+    /.*cdn\.staticfile\.org/,
+    new CacheFirst({
+        cacheName: 'static-immutable' + cacheSuffixVersion,
+        fetchOptions: {
+            mode: 'cors',
+            credentials: 'omit'
+        },
+        plugins: [
+            new ExpirationPlugin({
+                maxAgeSeconds: 30 * 24 * 60 * 60,
+                purgeOnQuotaError: true
+            })
+        ]
+    })
+);
+
+routing.registerRoute(
+    /.*cdn\.nofated\.win/,
+    new CacheFirst({
+        cacheName: 'static-immutable' + cacheSuffixVersion,
+        fetchOptions: {
+            mode: 'cors',
+            credentials: 'omit'
+        },
+        plugins: [
+            new ExpirationPlugin({
+                maxAgeSeconds: 30 * 24 * 60 * 60,
+                purgeOnQuotaError: true
+            })
+        ]
+    })
+);
+
+routing.registerRoute(
+    /.*cdn\.jsdelivr\.net/,
+    new CacheFirst({
+        cacheName: 'static-immutable' + cacheSuffixVersion,
+        fetchOptions: {
+            mode: 'cors',
+            credentials: 'omit'
+        },
+        plugins: [
+            new ExpirationPlugin({
+                maxAgeSeconds: 30 * 24 * 60 * 60,
+                purgeOnQuotaError: true
+            })
+        ]
+    })
+);
+
+routing.registerRoute(
+    /.*fonts\.googleapis\.cn/,
+    new CacheFirst({
+        cacheName: 'static-immutable' + cacheSuffixVersion,
+        fetchOptions: {
+            mode: 'cors',
+            credentials: 'omit'
+        },
+        plugins: [
+            new ExpirationPlugin({
+                maxAgeSeconds: 30 * 24 * 60 * 60,
+                purgeOnQuotaError: true
+            })
+        ]
+    })
+);
+
+routing.registerRoute(
+    /.*fonts\.gstatic\.cn/,
+    new CacheFirst({
+        cacheName: 'static-immutable' + cacheSuffixVersion,
+        fetchOptions: {
+            mode: 'cors',
+            credentials: 'omit'
+        },
+        plugins: [
+            new ExpirationPlugin({
+                maxAgeSeconds: 30 * 24 * 60 * 60,
+                purgeOnQuotaError: true
+            })
+        ]
+    })
+);
+
+routing.registerRoute(
+    new RegExp('analytics.google.com'),
+    new NetworkOnly({
+        plugins: [
+            new backgroundSync.BackgroundSyncPlugin('ga_new', {
+                maxRetentionTime: 12 * 60
+            }),
+        ]
+    }),
+    "POST"
+)
+
+const StaleWhileRevalidateInstance = new StaleWhileRevalidate();
+/*
+ * Others img
+ * Method: staleWhileRevalidate
+ * cacheName: img-cache
+ */
+routing.registerRoute(
+    // Cache image files
+    /.*\.(?:png|jpg|jpeg|gif|webp)/,
+    StaleWhileRevalidateInstance
+);
+
+/*
+ * Static Assets
+ * Method: staleWhileRevalidate
+ * cacheName: static-assets-cache
+ */
+routing.registerRoute(
+    // Cache CSS files
+    /.*\.(css|js)/,
+    // Use cache but update in the background ASAP
+    StaleWhileRevalidateInstance
+);
+
+/*
+ * sw.js - Revalidate every time
+ * staleWhileRevalidate
+ */
+routing.registerRoute(
+    '/sw.js',
+    StaleWhileRevalidateInstance
+);
+
+
+
+routing.registerRoute(
+    new RegExp('moe'),
+    StaleWhileRevalidateInstance
+);
+
+routing.registerRoute(
+    /.*localhost/,
+    new NetworkOnly()
+);
+
+/*
+ * Default - Serve as it is
+ * StaleWhileRevalidate
+ */
+routing.setDefaultHandler(
+    new NetworkOnly()
+);
--- a/src/App.tsx
+++ b/src/App.tsx
@ -84,21 +84,21 @@ export default function App() {
          <Grid xs={"auto"}>
            <Avatar
              src={`https://cdn.nofated.win/avatarsoss`}
-              srcSet={`https://cdn.nofated.win/avatar/256`}
-              alt={'Nofated avatar'}
+              srcSet={`https://xgjalbum.oss-cn-hangzhou.aliyuncs.com/623fec2f97df7d3eee768933/AC1BFF0F-E891-41D0-8BB7-08C4DDB70CA9.png?x-oss-process=image/resize,m_fill,h_256,w_256,limit_0/format,webp`}
+              alt={'avatar'}
              sx={{ width: 128, height: 128 }}
            />
            {/* <Avatar alt="Nofated" src="https://cdn.nofated.win/avatarsoss" sx={{ width: 128, height: 128 }} /> */}
          </Grid>
          <Grid xs={8.75}>
            <Typography variant="h4" component="h1" gutterBottom sx={{ fontFamily: 'neonderthaw' }}>
-              Nofated
+              Amane
            </Typography>
            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-              <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+              <Tabs value={value} onChange={handleChange} aria-label="tabs">
                <Tab label="Home" {...a11yProps(0)} />
                <Tab label="About" {...a11yProps(1)} />
-                <Tab label="Blog" href="https://blog.nofated.win" />
+                <Tab label="Blog" href="https://blog.amane.icu" />
              </Tabs>
            </Box>
          </Grid>
@ -109,7 +109,7 @@ export default function App() {
                  <strong>Yoo!</strong>
                </Typography>
                <Typography paragraph>             
-                  I'm Nofated, aka Tanikaze Amane.
+                  I'm Amane, aka Nofated.
                </Typography>
              </Box>
              <Box sx={{ my: 1 }}>
@ -117,7 +117,7 @@ export default function App() {
                  <strong>Misc</strong>
                </Typography>
                <Typography paragraph>
-                  📒️ I have a <Link href="https://blog.nofated.win/">blog</Link> based on Hexo.<br />
+                  📒️ I have a <Link href="https://blog.amane.icu/">blog</Link> based on Hexo.<br />
                  ⌨️ Coding and open-source are great! Let's contribute together!<br />
                  🧪 I used to be an iGEMer. My team won a 🥈silver medal in <Link href="https://competition.igem.org/">iGEM Competition</Link> 2023!<br />
                </Typography>
@ -144,13 +144,15 @@ export default function App() {
                <Typography variant="h5" component="h2" gutterBottom>
                  <strong>About</strong>
                </Typography>
+                <Typography paragraph>
+                  My full name is Tanikaze Amane, but you may here some one call me Nofated or nof.
+                </Typography>
                <Typography paragraph>
                  I am in senior high and I'm preparing for the Chinese College Entrance Examination, aka GaoKao.
                </Typography>
                <Typography paragraph>
                  I do open-source works, you can check them on <Link href='https://github.com/Nofated095'>GitHub</Link>. Most of them are useless and have lots of bugs.
                </Typography>
-
              </Box>
            </TabPanel>
            <TabPanel value={value} index={2}>
				`@ -0,0 +1 @@`
				!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(e.quicklink={})}(this,function(e){function n(e){return new Promise(function(n,r,t){(t=new XMLHttpRequest).open("GET",e,t.withCredentials=!0),t.onload=function(){200===t.status?n():r()},t.send()})}var r,t=(r=document.createElement("link")).relList&&r.relList.supports&&r.relList.supports("prefetch")?function(e){return new Promise(function(n,r,t){(t=document.createElement("link")).rel="prefetch",t.href=e,t.onload=n,t.onerror=r,document.head.appendChild(t)})}:n,o=window.requestIdleCallback\|\|function(e){var n=Date.now();return setTimeout(function(){e({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-n))}})},1)},i=new Set,c=new Set,u=!1;function a(e){if(e){if(e.saveData)return new Error("Save-Data is enabled");if(/2g/.test(e.effectiveType))return new Error("network conditions are poor")}return!0}function s(e,r,o){var s=a(navigator.connection);return s instanceof Error?Promise.reject(new Error("Cannot prefetch, "+s.message)):(c.size>0&&!u&&console.warn("[Warning] You are using both prefetching and prerendering on the same document"),Promise.all([].concat(e).map(function(e){if(!i.has(e))return i.add(e),(r?function(e){return window.fetch?fetch(e,{credentials:"include"}):n(e)}:t)(new URL(e,location.href).toString())})))}function f(e,n){var r=a(navigator.connection);if(r instanceof Error)return Promise.reject(new Error("Cannot prerender, "+r.message));if(!HTMLScriptElement.supports("speculationrules"))return s(e),Promise.reject(new Error("This browser does not support the speculation rules API. Falling back to prefetch."));if(document.querySelector('script[type="speculationrules"]'))return Promise.reject(new Error("Speculation Rules is already defined and cannot be altered."));for(var t=0,o=[].concat(e);t<o.length;t+=1){var f=o[t];if(window.location.origin!==new URL(f,window.location.href).origin)return Promise.reject(new Error("Only same origin URLs are allowed: "+f));c.add(f)}i.size>0&&!u&&console.warn("[Warning] You are using both prefetching and prerendering on the same document");var l=function(e){var n=document.createElement("script");n.type="speculationrules",n.text='{"prerender":[{"source": "list","urls": ["'+Array.from(e).join('","')+'"]}]}';try{document.head.appendChild(n)}catch(e){return e}return!0}(c);return!0===l?Promise.resolve():Promise.reject(l)}e.listen=function(e){if(e\|\|(e={}),window.IntersectionObserver){var n=function(e){e=e\|\|1;var n=[],r=0;function t(){r<e&&n.length>0&&(n.shift()(),r++)}return[function(e){n.push(e)>1\|\|t()},function(){r--,t()}]}(e.throttle\|\|1/0),r=n[0],t=n[1],a=e.limit\|\|1/0,l=e.origins\|\|[location.hostname],d=e.ignores\|\|[],h=e.delay\|\|0,p=[],m=e.timeoutFn\|\|o,w="function"==typeof e.hrefFn&&e.hrefFn,g=e.prerender\|\|!1;u=e.prerenderAndPrefetch\|\|!1;var v=new IntersectionObserver(function(n){n.forEach(function(n){if(n.isIntersecting)p.push((n=n.target).href),function(e,n){n?setTimeout(e,n):e()}(function(){-1!==p.indexOf(n.href)&&(v.unobserve(n),(u\|\|g)&&c.size<1?f(w?w(n):n.href).catch(function(n){if(!e.onError)throw n;e.onError(n)}):i.size<a&&!g&&r(function(){s(w?w(n):n.href,e.priority).then(t).catch(function(n){t(),e.onError&&e.onError(n)})}))},h);else{var o=p.indexOf((n=n.target).href);o>-1&&p.splice(o)}})},{threshold:e.threshold\|\|0});return m(function(){(e.el\|\|document).querySelectorAll("a").forEach(function(e){l.length&&!l.includes(e.hostname)\|\|function e(n,r){return Array.isArray(r)?r.some(function(r){return e(n,r)}):(r.test\|\|r).call(r,n.href,n)}(e,d)\|\|v.observe(e)})},{timeout:e.timeout\|\|2e3}),function(){i.clear(),v.disconnect()}}},e.prefetch=s,e.prerender=f});