From 9dde252e076c2e3b4e00a5dece61a54d77b195be Mon Sep 17 00:00:00 2001 From: shyakadev Date: Thu, 13 Oct 2022 01:24:01 +0200 Subject: [PATCH 1/4] ft: Add Fetch API --- public/sw.js | 2 +- src/modules/apis/data.ts | 19 ++++ src/modules/apis/fetch-api/index.ts | 62 +++++++++++ src/modules/demos/fetch-api/index.tsx | 151 ++++++++++++++++++++++++++ 4 files changed, 233 insertions(+), 1 deletion(-) create mode 100644 src/modules/apis/fetch-api/index.ts create mode 100644 src/modules/demos/fetch-api/index.tsx diff --git a/public/sw.js b/public/sw.js index 883b838..880222a 100644 --- a/public/sw.js +++ b/public/sw.js @@ -1 +1 @@ -if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let s=Promise.resolve();return i[e]||(s=new Promise((async s=>{if("document"in self){const i=document.createElement("script");i.src=e,document.head.appendChild(i),i.onload=s}else importScripts(e),s()}))),s.then((()=>{if(!i[e])throw new Error(`Module ${e} didn’t register its module`);return i[e]}))},s=(s,i)=>{Promise.all(s.map(e)).then((e=>i(1===e.length?e[0]:e)))},i={require:Promise.resolve(s)};self.define=(s,n,a)=>{i[s]||(i[s]=Promise.resolve().then((()=>{let i={};const c={uri:location.origin+s.slice(1)};return Promise.all(n.map((s=>{switch(s){case"exports":return i;case"module":return c;default:return e(s)}}))).then((e=>{const s=a(...e);return i.default||(i.default=s),i}))})))}}define("./sw.js",["./workbox-4a677df8"],(function(e){"use strict";importScripts(),self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"/_next/static/chunks/framework-2191d16384373197bc0a.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/main-8aed1c524f2d37218d9a.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/_app-17c7b86ba23793aaf153.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/_error-737a04e9a0da63c9d162.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/demos/battery-status-617c4c8f3c26ef9ec8cc.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/demos/broadcast-channel-8db4ef369371294c7db3.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/demos/clipboard-6f5bfd904b5f526e4d2b.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/demos/drag-and-drop-b7b0a026c94fcfd3bc4f.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/demos/filesystem-api-66f9e62526d65c0fbf5c.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/demos/fullscreen-fe113cd4ae640c5d5374.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/demos/geolocation-c55d9b420872b15113cb.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/demos/image-capture-b5a2ab659a51cb68acd3.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/demos/network-information-d5d16d3bde66e77dfc6c.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/demos/picture-in-picture-5d9b46c7d985b3c0b458.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/demos/resize-observer-6f95bb87a687d4157671.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/demos/screen-capture-13cdba7877696b6b36f5.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/demos/vibration-5d09247d79ede7e8914f.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/demos/web-payments-4256b2109ad021e9d685.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/demos/web-share-api-f6ffdf00332ee5b20458.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/pages/index-c5608afd4f982eb6dc28.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/chunks/webpack-f47d69457824065d04c3.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/css/256fca2b2008f9e2306c.css",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/fu2ihHeUgL1ZO_7fPlSzI/_buildManifest.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/_next/static/fu2ihHeUgL1ZO_7fPlSzI/_ssgManifest.js",revision:"fu2ihHeUgL1ZO_7fPlSzI"},{url:"/assets/png/faviconDark.png",revision:"7edb81acaa8bdb2284b6e9a54a887964"},{url:"/assets/png/faviconLight.png",revision:"da1bb6220a17fb8fca2df21d55ee5968"},{url:"/assets/svg/logoDark.svg",revision:"c79b0a5e6232abaf786dddbd7b9355c4"},{url:"/assets/svg/logoLight.svg",revision:"f441dd09912a8084cdb445e1a24daec8"},{url:"/favicon.ico",revision:"21b739d43fcb9bbb83d8541fe4fe88fa"},{url:"/favicon2.ico",revision:"a2ad26e58ad794be86fb841b490d30f4"},{url:"/faviconDark.ico",revision:"bdbd368a74260b3d2095c139e65f432d"},{url:"/faviconLight.ico",revision:"74d45c063dca7e8f31ef69e5c26bf8c9"},{url:"/icons/icon-192x192.png",revision:"f4b8c9331c28c3508e9f47241f915ec1"},{url:"/icons/icon-256x256.png",revision:"0b3b5d7c1aefbb6ada79d87d86b1f35e"},{url:"/icons/icon-384x384.png",revision:"d47f7e4b17bc6151a03405eab2a925ae"},{url:"/icons/icon-512x512.png",revision:"6ce4baa15590c307decedd5e44262e2d"},{url:"/icons/maskable_icon.png",revision:"62a58f0bc8ae543646d35ce1fecded6b"},{url:"/manifest.json",revision:"59f3458c2e5aef6abbf0b8f86f199a96"},{url:"/readme/Logo.png",revision:"dd85efe045df2611d5e92b0a9eb948c9"},{url:"/readme/gen-demo-steps.png",revision:"62962de6c75701ddc549c9af9de9ec80"},{url:"/readme/og.png",revision:"cd9c13f153b47b8d3ad70180d8ea8dc4"},{url:"/vercel.svg",revision:"4b4f1876502eb6721764637fe5c41702"}],{ignoreURLParametersMatching:[]}),e.cleanupOutdatedCaches(),e.registerRoute("/",new e.NetworkFirst({cacheName:"start-url",plugins:[{cacheWillUpdate:async({request:e,response:s,event:i,state:n})=>s&&"opaqueredirect"===s.type?new Response(s.body,{status:200,statusText:"OK",headers:s.headers}):s}]}),"GET"),e.registerRoute(/^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,new e.CacheFirst({cacheName:"google-fonts-webfonts",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:31536e3})]}),"GET"),e.registerRoute(/^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,new e.StaleWhileRevalidate({cacheName:"google-fonts-stylesheets",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:604800})]}),"GET"),e.registerRoute(/\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,new e.StaleWhileRevalidate({cacheName:"static-font-assets",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:604800})]}),"GET"),e.registerRoute(/\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,new e.StaleWhileRevalidate({cacheName:"static-image-assets",plugins:[new e.ExpirationPlugin({maxEntries:64,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\/_next\/image\?url=.+$/i,new e.StaleWhileRevalidate({cacheName:"next-image",plugins:[new e.ExpirationPlugin({maxEntries:64,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:mp3|wav|ogg)$/i,new e.CacheFirst({cacheName:"static-audio-assets",plugins:[new e.RangeRequestsPlugin,new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:mp4)$/i,new e.CacheFirst({cacheName:"static-video-assets",plugins:[new e.RangeRequestsPlugin,new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:js)$/i,new e.StaleWhileRevalidate({cacheName:"static-js-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:css|less)$/i,new e.StaleWhileRevalidate({cacheName:"static-style-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\/_next\/data\/.+\/.+\.json$/i,new e.StaleWhileRevalidate({cacheName:"next-data",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:json|xml|csv)$/i,new e.NetworkFirst({cacheName:"static-data-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute((({url:e})=>{if(!(self.origin===e.origin))return!1;const s=e.pathname;return!s.startsWith("/api/auth/")&&!!s.startsWith("/api/")}),new e.NetworkFirst({cacheName:"apis",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:16,maxAgeSeconds:86400})]}),"GET"),e.registerRoute((({url:e})=>{if(!(self.origin===e.origin))return!1;return!e.pathname.startsWith("/api/")}),new e.NetworkFirst({cacheName:"others",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute((({url:e})=>!(self.origin===e.origin)),new e.NetworkFirst({cacheName:"cross-origin",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:3600})]}),"GET")})); +if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let s=Promise.resolve();return n[e]||(s=new Promise((async s=>{if("document"in self){const n=document.createElement("script");n.src=e,document.head.appendChild(n),n.onload=s}else importScripts(e),s()}))),s.then((()=>{if(!n[e])throw new Error(`Module ${e} didn’t register its module`);return n[e]}))},s=(s,n)=>{Promise.all(s.map(e)).then((e=>n(1===e.length?e[0]:e)))},n={require:Promise.resolve(s)};self.define=(s,t,i)=>{n[s]||(n[s]=Promise.resolve().then((()=>{let n={};const a={uri:location.origin+s.slice(1)};return Promise.all(t.map((s=>{switch(s){case"exports":return n;case"module":return a;default:return e(s)}}))).then((e=>{const s=i(...e);return n.default||(n.default=s),n}))})))}}define("./sw.js",["./workbox-4a677df8"],(function(e){"use strict";importScripts(),self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"/_next/static/JBpV9UXbEqbutRpKWEhz4/_buildManifest.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/JBpV9UXbEqbutRpKWEhz4/_ssgManifest.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/146.41c8f7e99814a980df6d.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/200.6c133cde59d6d92f8dc5.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/246.1d8ad841113184a62153.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/252f366e.c5923606d73a36570ab9.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/292.1e75ff381d92b53261fe.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/325.8548c23fb208fff6de61.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/335.eebed9dac6c02140f189.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/344.58c16ca7918c5bc6b248.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/373.9637f4aa79430ab32a42.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/403.d24cc730b004e1b09940.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/421.59f3228522f12dde5386.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/558.7a8920badeae57fd3d42.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/584.6b15d28891dde9a7367b.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/628.52b2c20e95ec048a2721.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/666.7eed6f9649259d9075f8.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/755.9cee7a7ab5bb036be987.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/777.0c1e9aa05f73f9c386f4.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/78e521c3.fdee09f9ff3ed7eaf5ed.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/805.d967eed75e1c4081719c.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/905.9f2506d6bed894f07711.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/917.8b49be0d5909869acda5.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/928.b177fbbc4f0b75af022d.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/942.b6110245d916986846e0.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/95b64a6e.9e06efdf9d4cb507bd38.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/964.15cb2fa90e4c6def2f74.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/977.eb37fa4f66d9879df49c.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/framework-c93ed74a065331c4bd75.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/main-62a3e12e79ce59795999.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/pages/_app-bd3254fec9406f296826.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/pages/_error-737a04e9a0da63c9d162.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/pages/demo/%5Bid%5D-865937c07d1613874df9.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/pages/index-0024ed5792bafefa1d3d.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/chunks/webpack-fee876ad828f46dc08a6.js",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/_next/static/css/de46f6cfbb7290dca77e.css",revision:"JBpV9UXbEqbutRpKWEhz4"},{url:"/assets/images/Exclamation-Mark.png",revision:"25ab61a5c5424bf6542915f3e015610b"},{url:"/assets/png/faviconDark.png",revision:"7edb81acaa8bdb2284b6e9a54a887964"},{url:"/assets/png/faviconLight.png",revision:"da1bb6220a17fb8fca2df21d55ee5968"},{url:"/assets/svg/logoDark.svg",revision:"c79b0a5e6232abaf786dddbd7b9355c4"},{url:"/assets/svg/logoLight.svg",revision:"f441dd09912a8084cdb445e1a24daec8"},{url:"/favicon.ico",revision:"21b739d43fcb9bbb83d8541fe4fe88fa"},{url:"/favicon2.ico",revision:"a2ad26e58ad794be86fb841b490d30f4"},{url:"/faviconDark.ico",revision:"bdbd368a74260b3d2095c139e65f432d"},{url:"/faviconLight.ico",revision:"74d45c063dca7e8f31ef69e5c26bf8c9"},{url:"/fonts/Ephesis/Ephesis-Regular.ttf",revision:"177ad08507e112f445dccce53e9b4724"},{url:"/fonts/Festive/Festive-Regular.ttf",revision:"6008937a2510d28c5afa2de91840b551"},{url:"/fonts/Inconsolata/Inconsolata-Regular.ttf",revision:"39cba59a48ffa6eea39a5d5f9ec63df6"},{url:"/fonts/OpenSans/OpenSans-Regular.ttf",revision:"ebe0fbcd13a1e4b1cea24fa992f28fbb"},{url:"/fonts/Roboto/Roboto-Regular.ttf",revision:"f36638c2135b71e5a623dca52b611173"},{url:"/icons/icon-192x192.png",revision:"f4b8c9331c28c3508e9f47241f915ec1"},{url:"/icons/icon-256x256.png",revision:"0b3b5d7c1aefbb6ada79d87d86b1f35e"},{url:"/icons/icon-384x384.png",revision:"d47f7e4b17bc6151a03405eab2a925ae"},{url:"/icons/icon-512x512.png",revision:"6ce4baa15590c307decedd5e44262e2d"},{url:"/icons/maskable_icon.png",revision:"62a58f0bc8ae543646d35ce1fecded6b"},{url:"/manifest.json",revision:"59f3458c2e5aef6abbf0b8f86f199a96"},{url:"/readme/Logo.png",revision:"dd85efe045df2611d5e92b0a9eb948c9"},{url:"/readme/gen-demo-steps.png",revision:"62962de6c75701ddc549c9af9de9ec80"},{url:"/readme/og.png",revision:"cd9c13f153b47b8d3ad70180d8ea8dc4"},{url:"/vercel.svg",revision:"4b4f1876502eb6721764637fe5c41702"}],{ignoreURLParametersMatching:[]}),e.cleanupOutdatedCaches(),e.registerRoute("/",new e.NetworkFirst({cacheName:"start-url",plugins:[{cacheWillUpdate:async({request:e,response:s,event:n,state:t})=>s&&"opaqueredirect"===s.type?new Response(s.body,{status:200,statusText:"OK",headers:s.headers}):s}]}),"GET"),e.registerRoute(/^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,new e.CacheFirst({cacheName:"google-fonts-webfonts",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:31536e3})]}),"GET"),e.registerRoute(/^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,new e.StaleWhileRevalidate({cacheName:"google-fonts-stylesheets",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:604800})]}),"GET"),e.registerRoute(/\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,new e.StaleWhileRevalidate({cacheName:"static-font-assets",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:604800})]}),"GET"),e.registerRoute(/\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,new e.StaleWhileRevalidate({cacheName:"static-image-assets",plugins:[new e.ExpirationPlugin({maxEntries:64,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\/_next\/image\?url=.+$/i,new e.StaleWhileRevalidate({cacheName:"next-image",plugins:[new e.ExpirationPlugin({maxEntries:64,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:mp3|wav|ogg)$/i,new e.CacheFirst({cacheName:"static-audio-assets",plugins:[new e.RangeRequestsPlugin,new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:mp4)$/i,new e.CacheFirst({cacheName:"static-video-assets",plugins:[new e.RangeRequestsPlugin,new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:js)$/i,new e.StaleWhileRevalidate({cacheName:"static-js-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:css|less)$/i,new e.StaleWhileRevalidate({cacheName:"static-style-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\/_next\/data\/.+\/.+\.json$/i,new e.StaleWhileRevalidate({cacheName:"next-data",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:json|xml|csv)$/i,new e.NetworkFirst({cacheName:"static-data-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute((({url:e})=>{if(!(self.origin===e.origin))return!1;const s=e.pathname;return!s.startsWith("/api/auth/")&&!!s.startsWith("/api/")}),new e.NetworkFirst({cacheName:"apis",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:16,maxAgeSeconds:86400})]}),"GET"),e.registerRoute((({url:e})=>{if(!(self.origin===e.origin))return!1;return!e.pathname.startsWith("/api/")}),new e.NetworkFirst({cacheName:"others",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute((({url:e})=>!(self.origin===e.origin)),new e.NetworkFirst({cacheName:"cross-origin",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:3600})]}),"GET")})); diff --git a/src/modules/apis/data.ts b/src/modules/apis/data.ts index 9d12523..19afc67 100644 --- a/src/modules/apis/data.ts +++ b/src/modules/apis/data.ts @@ -398,6 +398,25 @@ export const data: Array = [ apiDocURL: '', canIUseURL: 'https://caniuse.com/pagevisibility', }, + }, + { + id: 'fetch-api', + emoji: '〽️', + title: 'Fetch API', + description: + 'The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set. Used JSONPlaceholder a free online REST API that you can use whenever you need some fake data for testing and prototyping.', + meta: { + author: { + name: 'Shyaka Tresor', + social: { + email: 'shyakadev@gmail.com', + github: 'shyakadev', + twitter: 'tshyaka', + }, + }, + apiDocURL: '', + canIUseURL: 'https://caniuse.com/fetch', + }, }, //replace item here { id: 'selection-api', diff --git a/src/modules/apis/fetch-api/index.ts b/src/modules/apis/fetch-api/index.ts new file mode 100644 index 0000000..9850843 --- /dev/null +++ b/src/modules/apis/fetch-api/index.ts @@ -0,0 +1,62 @@ +export const hasSupport = (): boolean => + Boolean('connection' in window.navigator); + +async function get(url: string) { + const requestOptions = { + method: 'GET', + }; + const response = await fetch(url, requestOptions); + return handleResponse(response); +} + +async function post(url: string, body: any) { + // eslint-disable-next-line no-useless-catch + try { + const requestOptions = { + method: 'POST', + headers: { 'Content-Type': 'application/json; charset=UTF-8' }, + body, + }; + + const response = await fetch(url, requestOptions); + return response.json(); + } catch (error) { + throw error; + } +} + +async function put(url: string, body: any) { + const requestOptions = { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: body, + }; + + const response = await fetch(url, requestOptions); + return response.json(); +} + +// prefixed with underscore because delete is a reserved word in javascript +async function _delete(url: string) { + const requestOptions = { + method: 'DELETE', + }; + const response = await fetch(url, requestOptions); + return response.json(); +} +const run = { + get, + post, + put, + _delete, +}; + +function handleResponse(response: any) { + try { + return response.json(); + } catch (error: any) { + error.message; + } +} + +export default run; diff --git a/src/modules/demos/fetch-api/index.tsx b/src/modules/demos/fetch-api/index.tsx new file mode 100644 index 0000000..3108de8 --- /dev/null +++ b/src/modules/demos/fetch-api/index.tsx @@ -0,0 +1,151 @@ +import { Button, Input } from 'components'; +import { useState } from 'react'; +import run, { hasSupport } from '../../apis/fetch-api'; + +function FetchApi() { + const defaultBody = { + userId: 1, + id: 1, + title: 'Fetch Api', + body: 'The global fetch() method starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.', + }; + const [body, setBody] = useState(JSON.stringify(defaultBody, undefined, 4)); + const [error, setError] = useState(''); + const [url, setUrl] = useState('https://jsonplaceholder.typicode.com/posts'); + const [response, setResponse] = useState(''); + if (!hasSupport) { + return

Unsupported

; + } + + const handleUrl = (event: any) => { + setUrl(event.target.value); + }; + const handleBody = (event: any) => { + setBody(event.target.value); + }; + + async function handleMethod(method: string) { + let response = ''; + switch (method) { + case 'GET': + response = await run.get(url); + handleResponse(response); + break; + case 'POST': + try { + response = await run.post(url, body); + handleResponse(response); + setError(''); + } catch (error) { + setError(`${error}`); + } + break; + case 'PUT': + try { + response = await run.put(url, body); + handleResponse(response); + setError(''); + } catch (error) { + setError(`${error}`); + } + break; + case 'DELETE': + response = await run._delete(url); + handleResponse(response); + break; + default: + response = ''; + handleResponse(response); + } + } + + const handleResponse = (response: any) => + setResponse(JSON.stringify(response, undefined, 4)); + + return ( +
+ + +
+ + + + +
+ +
+
+

+ Body +

+