next.js/examples/with-prefetching/README.md

# Example app with prefetching pages

## How to use

Download the example:

```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-prefetching
cd with-prefetching
```

or clone the repo:

```bash
git clone https://github.com/zeit/next.js.git --depth=1
cd next.js/examples/with-prefetching
```

Install the dependencies:

```bash
npm install
```

Run the dev server:

```bash
npm run dev
```

## The idea behind the example

This example features:

* An app with four simple pages
* The "about" page uses the imperative (i.e.: "manual") prefetching API to prefetch on hover
* It will prefetch all the pages in the background except the "contact" page
Prefetch pages with Service Workers (#375) * Register the service worker. * Update prefetcher code to do prefetching. * Implement the core prefetching API. support "import <Link>, { prefetch } from 'next/prefetch'" * Implement a better communication system with the service worker. * Add a separate example for prefetching * Fix some typos. * Initiate service worker support even prefetching is not used. This is pretty important since initiating will reset the cache. If we don't do this, it's possible to have old cached resources after the user decided to remove all of the prefetching logic. In this case, even the page didn't prefetch it'll use the previously cached pages. That because of there might be a already running service worker. * Use url module to get pathname. * Move prefetcher code to the client from pages Now we also do a webpack build for the prefetcher code. * Add prefetching docs to the README.md * Fix some typo. * Register service worker only if asked to prefetch We also clean the cache always, even we initialize the service worker or not. 2016-12-15 19:13:40 +00:00			`# Example app with prefetching pages`

Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 05:10:54 +00:00			`## How to use`
Prefetch pages with Service Workers (#375) * Register the service worker. * Update prefetcher code to do prefetching. * Implement the core prefetching API. support "import <Link>, { prefetch } from 'next/prefetch'" * Implement a better communication system with the service worker. * Add a separate example for prefetching * Fix some typos. * Initiate service worker support even prefetching is not used. This is pretty important since initiating will reset the cache. If we don't do this, it's possible to have old cached resources after the user decided to remove all of the prefetching logic. In this case, even the page didn't prefetch it'll use the previously cached pages. That because of there might be a already running service worker. * Use url module to get pathname. * Move prefetcher code to the client from pages Now we also do a webpack build for the prefetcher code. * Add prefetching docs to the README.md * Fix some typo. * Register service worker only if asked to prefetch We also clean the cache always, even we initialize the service worker or not. 2016-12-15 19:13:40 +00:00
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 05:10:54 +00:00			`Download the example:`

			```bash
examples: simplify download instruction 2016-12-22 09:07:54 +00:00			`curl https://codeload.github.com/zeit/next.js/tar.gz/master \| tar -xz --strip=2 next.js-master/examples/with-prefetching`
			`cd with-prefetching`
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 05:10:54 +00:00			```

			`or clone the repo:`
Prefetch pages with Service Workers (#375) * Register the service worker. * Update prefetcher code to do prefetching. * Implement the core prefetching API. support "import <Link>, { prefetch } from 'next/prefetch'" * Implement a better communication system with the service worker. * Add a separate example for prefetching * Fix some typos. * Initiate service worker support even prefetching is not used. This is pretty important since initiating will reset the cache. If we don't do this, it's possible to have old cached resources after the user decided to remove all of the prefetching logic. In this case, even the page didn't prefetch it'll use the previously cached pages. That because of there might be a already running service worker. * Use url module to get pathname. * Move prefetcher code to the client from pages Now we also do a webpack build for the prefetcher code. * Add prefetching docs to the README.md * Fix some typo. * Register service worker only if asked to prefetch We also clean the cache always, even we initialize the service worker or not. 2016-12-15 19:13:40 +00:00
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 05:10:54 +00:00			```bash
examples: use HTTPS URL 2016-12-22 09:14:12 +00:00			`git clone https://github.com/zeit/next.js.git --depth=1`
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 05:10:54 +00:00			`cd next.js/examples/with-prefetching`
			```
Prefetch pages with Service Workers (#375) * Register the service worker. * Update prefetcher code to do prefetching. * Implement the core prefetching API. support "import <Link>, { prefetch } from 'next/prefetch'" * Implement a better communication system with the service worker. * Add a separate example for prefetching * Fix some typos. * Initiate service worker support even prefetching is not used. This is pretty important since initiating will reset the cache. If we don't do this, it's possible to have old cached resources after the user decided to remove all of the prefetching logic. In this case, even the page didn't prefetch it'll use the previously cached pages. That because of there might be a already running service worker. * Use url module to get pathname. * Move prefetcher code to the client from pages Now we also do a webpack build for the prefetcher code. * Add prefetching docs to the README.md * Fix some typo. * Register service worker only if asked to prefetch We also clean the cache always, even we initialize the service worker or not. 2016-12-15 19:13:40 +00:00
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 05:10:54 +00:00			`Install the dependencies:`

			```bash
Prefetch pages with Service Workers (#375) * Register the service worker. * Update prefetcher code to do prefetching. * Implement the core prefetching API. support "import <Link>, { prefetch } from 'next/prefetch'" * Implement a better communication system with the service worker. * Add a separate example for prefetching * Fix some typos. * Initiate service worker support even prefetching is not used. This is pretty important since initiating will reset the cache. If we don't do this, it's possible to have old cached resources after the user decided to remove all of the prefetching logic. In this case, even the page didn't prefetch it'll use the previously cached pages. That because of there might be a already running service worker. * Use url module to get pathname. * Move prefetcher code to the client from pages Now we also do a webpack build for the prefetcher code. * Add prefetching docs to the README.md * Fix some typo. * Register service worker only if asked to prefetch We also clean the cache always, even we initialize the service worker or not. 2016-12-15 19:13:40 +00:00			`npm install`
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 05:10:54 +00:00			```

			`Run the dev server:`

			```bash
Prefetch pages with Service Workers (#375) * Register the service worker. * Update prefetcher code to do prefetching. * Implement the core prefetching API. support "import <Link>, { prefetch } from 'next/prefetch'" * Implement a better communication system with the service worker. * Add a separate example for prefetching * Fix some typos. * Initiate service worker support even prefetching is not used. This is pretty important since initiating will reset the cache. If we don't do this, it's possible to have old cached resources after the user decided to remove all of the prefetching logic. In this case, even the page didn't prefetch it'll use the previously cached pages. That because of there might be a already running service worker. * Use url module to get pathname. * Move prefetcher code to the client from pages Now we also do a webpack build for the prefetcher code. * Add prefetching docs to the README.md * Fix some typo. * Register service worker only if asked to prefetch We also clean the cache always, even we initialize the service worker or not. 2016-12-15 19:13:40 +00:00			`npm run dev`
			```
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 05:10:54 +00:00
			`## The idea behind the example`

			`This example features:`

			`* An app with four simple pages`
			`* The "about" page uses the imperative (i.e.: "manual") prefetching API to prefetch on hover`
			`* It will prefetch all the pages in the background except the "contact" page`