Predictive Prefetch

1import {skipWaiting, clientsClaim} from 'workbox-core';
2import {precacheAndRoute} from 'workbox-precaching';
3import {Prefetcher} from '@edgio/prefetch/sw';
4
5skipWaiting();
6clientsClaim();
7precacheAndRoute(self.__WB_MANIFEST || []);
8
9new Prefetcher().route();

1import install from '@edgio/prefetch/window/install';
2
3install();

1import {Router} from '@edgio/core';
2
3export default new Router()
4  // Here we configure a route for the product API.
5  .get('/api/products/:id.json', ({cache, proxy}) => {
6    // In order to prefetch product data, we must cache responses at the edge and in the service worker.
7    cache({
8      edge: {
9        maxAgeSeconds: 60 * 60, // cache at the edge for one hour
10        staleWhileRevalidateSeconds: 60 * 60 * 24 * 365, // optionally serve stale while retreiving a fresh version from the origin
11      },
12      browser: {
13        serviceWorkerSeconds: 60 * 60, // cache in the browser using the service worker for one hour
14      },
15    });
16  });

1const prefetcher = new Prefetcher({defaultMaxAgeSeconds: 60 * 10}); // set the default TTL to 10 minutes

1import {prefetch} from '@edgio/prefetch/window';
2
3prefetch('/api/products/1.json');

1import {prefetch} from '@edgio/prefetch/window';
2
3prefetch('/api/products/1.json', 'fetch', {
4  maxAgeSeconds: 300, // 5 minutes
5});

1import {Prefetch} from '@edgio/react';
2
3function ProductLink({product}) {
4  return (
5    <Prefetch url={`/api/products/${product.id}.json`}>
6      <a href={`/products/${product.id}`}>{product.name}</a>
7    </Prefetch>
8  );
9}

1import {Prefetch} from '@edgio/react';
2import Link from 'next/link';
3import {useRouter} from 'next/router';
4import {createNextDataURL} from '@edgio/next/client';
5
6export default function ProductListing({products}) {
7  const {locale} = useRouter(); // you can omit this if you're not using localization
8
9  return (
10    <ul>
11      {products.map((product, i) => (
12        <li key={i}>
13          <Link href={product.url} passHref>
14            <Prefetch
15              url={createNextDataURL({
16                href: product.url,
17                locale, // you can omit this if you're not using localization
18                routeParams: {
19                  // keys must match the param names in your next page routes
20                  // So for example if your product page is /products/[id].js:
21                  id: product.id,
22                },
23              })}>
24              <a>
25                <img src={product.thumbnail} />
26              </a>
27            </Prefetch>
28          </Link>
29        </li>
30      ))}
31    </ul>
32  );
33}
34
35export async function getServerSideProps({params: {id}}) {
36  const products = await fetch(/* fetch from your api */).then((res) =>
37    res.json()
38  );
39
40  return {
41    props: {
42      products,
43    },
44  };
45}

1<template>
2  <Prefetch v-bind:url="/api/for/some/page">
3    <router-link v-bind:to="/some/page">Some page</router-link>
4  </Prefetch>
5</template>
6
7<script>
8  import Prefetch from '@edgio/vue/Prefetch'
9  export default {
10    components: {
11      Prefetch,
12    },
13  }
14</script>

1import {Prefetcher} from '@edgio/prefetch/sw';
2import DeepFetchPlugin from '@edgio/prefetch/sw/DeepFetchPlugin';
3
4new Prefetcher({
5  plugins: [
6    new DeepFetchPlugin([
7      {
8        /* Deep fetching configuration objects go here */
9      },
10    ]),
11  ],
12});

1new DeepFetchPlugin([
2  // parses the category API response to deep fetch the product images:
3  {
4    jsonQuery: 'Bundles.[**].Products:products(Product).MediumImageFile',
5    jsonQueryOptions: {
6      locals: {
7        // filters out null products:
8        products: (input) => input.filter((prod) => prod),
9      },
10    },
11    maxMatches: 10,
12    as: 'image',
13  },
14]);

1import {Prefetcher} from '@edgio/prefetch/sw';
2import DeepFetchPlugin from '@edgio/prefetch/sw/DeepFetchPlugin';
3
4new Prefetcher({
5  plugins: [
6    new DeepFetchPlugin([
7      {
8        selector: 'img.product-featured-media', // CSS selector syntax - just like you would use with document.querySelector()
9        maxMatches: 1, // limits the number of matched elements to prefetch to 1 per page
10        attribute: 'src', // the attribute holding the URL to prefetching
11        as: 'image', // the type of asset being prefetched
12      },
13    ]),
14  ],
15});

1import {Prefetcher, prefetch} from '@edgio/prefetch/sw';
2import DeepFetchPlugin, {
3  DeepFetchCallbackParam,
4} from '@edgio/prefetch/sw/DeepFetchPlugin';
5
6new Prefetcher({
7  plugins: [
8    new DeepFetchPlugin([
9      {
10        selector: 'img.grid-view-item__image',
11        maxMatches: 4,
12        as: 'image',
13        callback: deepFetchResponsiveImages,
14      },
15    ]),
16  ],
17});
18
19function deepFetchResponsiveImages({$el, el, $}: DeepFetchCallbackParam) {
20  const urlTemplate = $el.attr('data-src');
21  const dataWidths = $el.attr('data-widths');
22
23  if (dataWidths && urlTemplate) {
24    const widths = JSON.parse(dataWidths);
25
26    for (let width of widths.slice(0, 2)) {
27      const url = urlTemplate?.replace(/\{width\}/, width);
28      prefetch(url, 'image');
29    }
30  }
31}

1router.get('/p/:productId', ({cache}) => {
2  cache({
3    edge: {
4      maxAgeSeconds: 60 * 60,
5      staleWhileRevalidateSeconds: 60 * 60 * 24, // this way stale items can still be prefetched
6    },
7  });
8});

1import install from '@edgio/prefetch/window/install';
2
3// Call the following once when the page loads to allow prefetch requests to be served when responses
4// aren't available in the edge cache:
5install({includeCacheMisses: true});