Demo 178 background fetch api

README.md

@@ -90,6 +90,7 @@ So far, it includes the following examples:
 1. 🌐 URL API
 1. 🗒️ Selection API
 1. 📃 Page Visibility API
+1. 🚇 Background Fetch API
 
 # 🤝 Open Source
 

public/service-worker.js

@@ -0,0 +1,26 @@
+addEventListener('backgroundfetchsuccess', event => {
+  console.log('[Service Worker]: Background Fetch Success', event.registration);
+  event.waitUntil(registerCache(event));
+});
+
+async function registerCache(event) {
+  try {
+    const cache = await caches.open(event.registration.id);
+    const records = await event.registration.matchAll();
+    const promises = records.map(async record => {
+      const response = await record.responseReady;
+      await cache.put(record.request, response);
+    });
+    await Promise.all(promises);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+addEventListener('install', () => {
+  console.log('[Service Worker]: Installed');
+});
+
+addEventListener('activate', () => {
+  console.log('[Service Worker]: Active');
+});

src/modules/apis/background-fetch/index.ts

@@ -0,0 +1,28 @@
+export const hasSupport = (): boolean => {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/service-worker.js');
+    return true;
+  }
+  return false;
+};
+export async function backgroundFetch(url: string) {
+  const registration = await navigator.serviceWorker.ready;
+  return await registration.backgroundFetch.fetch('my-fetch', [url], {
+    title: 'Blog build tools, JS blocks, and opener-policy',
+    downloadTotal: 22032728,
+  });
+}
+
+function download(url: string) {
+  try {
+    backgroundFetch(url);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+const run = {
+  download,
+};
+
+export default run;

src/modules/apis/data.ts

@@ -438,5 +438,25 @@ export const data: Array<Demo> = [
         'https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API',
       canIUseURL: 'https://caniuse.com/mdn-api_eyedropper',
     },
+  },
+  {
+    id: 'background-fetch',
+    emoji: '🚇',
+    title: 'Background Fetch API',
+    description:
+      'The Background Fetch API provides a method for managing downloads that may take a significant amount of time such as movies, audio files, and software. The Background Fetch API will enable the fetch to happen if the user starts the process while offline. Once they are connected it will begin. If the user goes off line, the process pauses until the user is on again.',
+    meta: {
+      author: {
+        name: 'Shyaka Tresor',
+        social: {
+          email: '[email protected]',
+          github: 'shyakadev',
+          twitter: 'tshyaka',
+        },
+      },
+      apiDocURL:
+        'https://developer.mozilla.org/en-US/docs/Web/API/Background_Fetch_API',
+      canIUseURL: 'https://caniuse.com/mdn-api_backgroundfetchmanager',
+    },
   }, //replace item here
 ];

src/modules/demos/background-fetch/index.tsx

@@ -0,0 +1,43 @@
+import { Button } from '@/components/Button';
+import { NotSupported } from '@/components/NotSupported';
+import Link from 'next/link';
+import run, { hasSupport } from '../../apis/background-fetch';
+
+function BackgroundFetch() {
+  if (!hasSupport()) {
+    return <NotSupported />;
+  }
+  const download = (url: string) => {
+    return run.download(url);
+  };
+
+  return (
+    <div className="tw-p-6 tw-max-w-sm tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-md dark:tw-bg-gray-800 dark:tw-border-gray-700">
+      <a href="#">
+        <h5 className="tw-mb-2 tw-text-2xl tw-font-bold tw-tracking-tight tw-text-gray-900 dark:tw-text-white">
+          Blog build tools, JS blocks, and opener-policy - Podcast
+        </h5>
+      </a>
+      <p className="tw-mb-3 tw-font-normal tw-text-gray-700 dark:tw-text-gray-400">
+        In this episode of the top-10-most-popular-JavaScript podcast, Jake and
+        Surma chat about using our blogs to experiment with build systems.{' '}
+        <Link href="https://http203.libsyn.com/blog-build-tools-js-blocks-and-opener-policy">
+          <a className="tw-text-blue-700 tw-font-medium">Reference</a>
+        </Link>
+      </p>
+      <div className="tw-grid tw-justify-items-end">
+        <Button
+          onClick={() =>
+            download('https://traffic.libsyn.com/secure/http203/HTT_P007.m4a')
+          }
+        >
+          Download 🔻
+        </Button>
+
+        {/* </a> */}
+      </div>
+    </div>
+  );
+}
+
+export default BackgroundFetch;