Prefetch pages with Service Workers #375

arunoda · 2016-12-10T11:01:08Z

This will add support for prefetching pages using service workers.

This PR is based on the master, but porting it to support #310 is pretty simple.

Declarative API

You can simply ask to prefetch pages by using the <Link> provided by next/prefetch. See:

import Link from 'next/prefetch'

// This is the header component
export default () => (
  <div>
    <Link href='/'>Home</Link>
    <Link href='/about'>Home</Link>
    <Link href='/contact'>Home</Link>
  </div>
)

Now we'll prefetch all the pages. So, when you click on any of the link it won't need to do a network hit.

If you need you could stop prefetching like this:

<Link href='/' prefetch={false}>Home</Link>

Imperative API

You can get started with <Link> prefetching pretty quickly and it's a pretty decent way to prefetch. But you may want to prefetch based on your own logic.

Then you can do it like this:

import { prefetch } from 'next/prefetch'

prefetch('/')
prefetch('/features')

Browser Support

Service Workers are available only in Chrome, Firefox and Opera. For other browsers prefetching won't work. But <Link> from next/prefetch will be work like <Link> from next/link

support "import <Link>, { prefetch } from 'next/prefetch'"

coveralls · 2016-12-10T11:03:22Z

Coverage decreased (-3.2%) to 33.979% when pulling 57f57b2 on arunoda:prefetch into 3de4788 on zeit:master.

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.

coveralls · 2016-12-10T11:12:55Z

Coverage decreased (-2.9%) to 34.331% when pulling 09325d9 on arunoda:prefetch into 3de4788 on zeit:master.

coveralls · 2016-12-10T11:20:15Z

Coverage decreased (-2.9%) to 34.331% when pulling 09325d9 on arunoda:prefetch into 3de4788 on zeit:master.

nkzawa · 2016-12-10T14:45:44Z

lib/prefetch.js

+  parser.href = href
+
+  return parser.pathname
+}


We can use url module here ?

Okay. sure.

nkzawa · 2016-12-10T14:47:44Z

pages/_next-prefetcher.js

@@ -0,0 +1,108 @@
+/* global self */


Can you move this file to client dir ?
pages directory is intended to be for default pages like /_error.

It looks this file is not a target of gulp and webpack. Any reasons ?

I tried at first, but it adds more code (because I use async await). But writing it with pure ES5 make it pretty simple (I just want this to work).
But I'd like to try something different now.

This is the all the features we need to add to the service worker code. Writing ES5 makes it smaller. Do we need to use ES6 and transpile it?

Anyway, I'll move it to the client directory.

@nkzawa I tried this now and It'll add ~28K with webpack but without it it's just 4K. Do we still need to proceed with webpack or just use the code written with ES5.

@nkzawa Moved the prefetcher code to client. I also managed to reduced the bundle size by using babel-preset-env and not using async await.

I personally prefer consistency than small optimizations which we can improve later if required.

coveralls · 2016-12-10T15:44:24Z

Coverage decreased (-2.7%) to 34.513% when pulling aebe067 on arunoda:prefetch into 3de4788 on zeit:master.

Now we also do a webpack build for the prefetcher code.

coveralls · 2016-12-10T18:16:30Z

Coverage decreased (-2.7%) to 34.513% when pulling 3db546d on arunoda:prefetch into 3de4788 on zeit:master.

luisrudge · 2016-12-11T12:13:03Z

This is going to be nuts! ❤️

coveralls · 2016-12-12T01:30:15Z

Coverage decreased (-2.7%) to 34.513% when pulling 08c8249 on arunoda:prefetch into 3de4788 on zeit:master.

coveralls · 2016-12-12T01:52:32Z

Coverage decreased (-2.7%) to 34.513% when pulling cd82429 on arunoda:prefetch into 3de4788 on zeit:master.

arunoda · 2016-12-12T02:35:19Z

README.md

@@ -182,6 +182,58 @@ Each top-level component receives a `url` property with the following API:
 - `pushTo(url)` - performs a `pushState` call that renders the new `url`. This is equivalent to following a `<Link>`
 - `replaceTo(url)` - performs a `replaceState` call that renders the new `url`

+### Prefetching Pages


@rauchg here's the docs for README.

ccorcos · 2016-12-12T03:41:02Z

Doesn't Next already prefetch routes?

luisrudge · 2016-12-12T03:42:40Z

@ccorcos no

ccorcos · 2016-12-12T03:48:22Z

Go to https://zeit.co and look at the network tab when you click on "blog":

Also: https://zeit.co/blog/next#anticipation-is-the-key-to-performance

For www.zeit.co we've implemented a technique on top of Next.js that brings us the best of both worlds: every single tag pre-fetches the component's JSON representation on the background, via a ServiceWorker.

luisrudge · 2016-12-12T03:50:52Z

they implemented it. it's not on next.js yet. they were running an internal component (probably was extracted as this PR). Related: #24

ccorcos · 2016-12-12T04:00:59Z

ah, I see

arunoda · 2016-12-12T05:30:26Z

@ccorcos @luisrudge

Guys, this is a ground up implementation of prefetching for Next.js. It's not based on the zeit.co's implementation but definitely I took some core ideas from that.

With this PR, Next.js doesn't prefetch all the pages. But only pages you have asked to prefetch.
Have a look at the docs for more info.

ccorcos · 2016-12-12T06:52:00Z

Looking awesome @arunoda

nkzawa · 2016-12-12T12:33:17Z

gulpfile.js

+              ['env', {
+                'targets': {
+                  // All browsers which supports service workers
+                  'browsers': ['chrome 49', 'firefox 49', 'opera 41']


👍 👍 👍

nkzawa · 2016-12-12T12:37:18Z

lib/prefetch.js

+    pathname = '/index'
+  }
+
+  const url = `${pathname}.json`


Btw this url will become the same with non-json url and need to set the Accept header with #310

Yep. I will update this once we merge #310.

nkzawa · 2016-12-12T12:41:21Z

lib/prefetch.js

+
+  _register () {
+    this.serviceWorkerState = 'REGISTERING'
+    navigator.serviceWorker.register('/_next-prefetcher.js')


Do we have a way to disable Service Worker completely ? I believe we need it.

I didn't get this?
You mean implement prefetching without service workers of something else?

I mean you'd like to not register the script of ServiceWorker at all if you don't need prefetching.
It looks _register() is always called if browser supports ServiceWorker for now ?

I tried that way. See this commit message.
09325d9

queso · 2016-12-12T18:40:51Z

This looks awesome, what else needs done to get this merged?

We also clean the cache always, even we initialize the service worker or not.

coveralls · 2016-12-13T06:11:36Z

Coverage decreased (-3.0%) to 34.211% when pulling f862847 on arunoda:prefetch into 3de4788 on zeit:master.

zackify · 2016-12-16T13:18:00Z

When will there be a release with this new prefetch stuff?

philcockfield · 2016-12-20T06:47:07Z

@arunoda - this has been merged into master, it doesn't look like it's been released on NPM yet though. Is that right?

arunoda · 2016-12-20T07:48:34Z

@philcockfield That's right.
@rauchg is looking for few more things before doing 2.0 release.

I assume it's coming pretty soon.

arunoda added 6 commits December 8, 2016 20:03

Register the service worker.

f0d5d4a

Update prefetcher code to do prefetching.

dae4ffd

Implement the core prefetching API.

767b6be

support "import <Link>, { prefetch } from 'next/prefetch'"

Implement a better communication system with the service worker.

9d5b2eb

Add a separate example for prefetching

57f57b2

Fix some typos.

e26eebe

arunoda closed this Dec 10, 2016

arunoda reopened this Dec 10, 2016

nkzawa reviewed Dec 10, 2016

View reviewed changes

Use url module to get pathname.

aebe067

Move prefetcher code to the client from pages

3db546d

Now we also do a webpack build for the prefetcher code.

Add prefetching docs to the README.md

08c8249

Fix some typo.

cd82429

arunoda commented Dec 12, 2016

View reviewed changes

arunoda mentioned this pull request Dec 12, 2016

Document next-prefetch #24

Closed

nkzawa reviewed Dec 12, 2016

View reviewed changes

Register service worker only if asked to prefetch

f862847

We also clean the cache always, even we initialize the service worker or not.

rauchg merged commit 36abdc7 into vercel:master Dec 15, 2016

arunoda deleted the prefetch branch December 15, 2016 22:12

arunoda mentioned this pull request Dec 15, 2016

Make the Programmatic API aware of prefetching #400

Closed

lock bot locked as resolved and limited conversation to collaborators Jan 19, 2019

Prefetch pages with Service Workers #375

Prefetch pages with Service Workers #375

Conversation

arunoda commented Dec 10, 2016 • edited Loading

Declarative API

Imperative API

Browser Support

coveralls commented Dec 10, 2016 • edited Loading

coveralls commented Dec 10, 2016 • edited Loading

coveralls commented Dec 10, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arunoda Dec 10, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arunoda Dec 10, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented Dec 10, 2016 • edited Loading

coveralls commented Dec 10, 2016 • edited Loading

luisrudge commented Dec 11, 2016

coveralls commented Dec 12, 2016 • edited Loading

coveralls commented Dec 12, 2016 • edited Loading

Choose a reason for hiding this comment

ccorcos commented Dec 12, 2016

luisrudge commented Dec 12, 2016

ccorcos commented Dec 12, 2016

luisrudge commented Dec 12, 2016

ccorcos commented Dec 12, 2016

arunoda commented Dec 12, 2016 • edited Loading

ccorcos commented Dec 12, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

queso commented Dec 12, 2016

coveralls commented Dec 13, 2016 • edited Loading

zackify commented Dec 16, 2016

philcockfield commented Dec 20, 2016

arunoda commented Dec 20, 2016

arunoda commented Dec 10, 2016 •

edited

Loading

coveralls commented Dec 10, 2016 •

edited

Loading

coveralls commented Dec 10, 2016 •

edited

Loading

coveralls commented Dec 10, 2016 •

edited

Loading

arunoda Dec 10, 2016 •

edited

Loading

arunoda Dec 10, 2016 •

edited

Loading

coveralls commented Dec 10, 2016 •

edited

Loading

coveralls commented Dec 10, 2016 •

edited

Loading

coveralls commented Dec 12, 2016 •

edited

Loading

coveralls commented Dec 12, 2016 •

edited

Loading

arunoda commented Dec 12, 2016 •

edited

Loading

coveralls commented Dec 13, 2016 •

edited

Loading