Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

update readme with client/server examples

  • Loading branch information...
commit a1bf8c868bcfc0bde544f5047e948c1fac41661c 1 parent 87a9414
Ilya Grigorik authored

Showing 1 changed file with 21 additions and 33 deletions. Show diff stats Hide diff stats

  1. +21 33 server/README.md
54 server/README.md
Source Rendered
... ... @@ -1,38 +1,43 @@
1   -A simple reference server to demo Client-Hints in action. For an end-to-end demo, first you'll need Chrome Canary, and then:
  1 +To see Client-Hints in action you will need both a CH-aware server and a CH-aware client...
2 2
3   -* Enable chrome://flags/#enable-experimental-web-platform-features
4   -* Launch Canary with `--enable-clients` from comand line
5   -* Visit: http://jsbin.com/akOtEJA/1/quiet
  3 +### Client-Hints servers
6 4
7   -If you've enabled the right flags, then the above page should render all images with the same intrinsic size and the DPR negotiation is handled transparently by the browser (Chrome sends CH-DPR header).
  5 +* See checked in **ch-dpr-server** for a sample ruby server
  6 +* See checked in **nginx-ch-dpr.conf** for sample nginx implementation
8 7
9   -_Note: above demo provides an override DPR parameter to illustrate rendering at differing resolutions. In practice, no such thing is actually required - i.e. look at the source for first example image._
  8 +You can run both of the above locally to test the server. Alternatively, you can seem them in action here:
10 9
11   -* See **nginx-ch-dpr.conf** for example Nginx config.
  10 +* Ruby server: http://ch-dpr-demo.herokuapp.com/photo.jpg
  11 +* Nginx server: http://www.igvita.com/downloads/ch/photos/awesome.jpg
12 12
  13 +For an end-to-end test, setup your client (see below) and head to: http://www.igvita.com/downloads/ch/
13 14
14   -## Demo instance on Heroku
15 15
16   -* http://ch-dpr-demo.herokuapp.com/photo.jpg
17   -* http://ch-dpr-demo.herokuapp.com/photo.jpg?force_dpr=2.2
  16 +### Client-Hints clients
18 17
19   -A quick example using curl:
  18 +* Chrome Canary supports Client-Hints:
  19 + * Enable _chrome://flags/#enable-experimental-web-platform-features_
  20 + * Launch Canary with `--enable-clients` from comand line
  21 + * You can also install [Client-Hints extension for Chrome](https://chrome.google.com/webstore/detail/client-hints/gdghpgmkfaedgngmnahnaaegpacanlef) to easily overwrite the advertised client DPR.
  22 +
  23 +Chrome will automatically send the device DPR (via CH-DPR header), and will also use the returned DPR confirmation (via DPR header) to adjust the intrinsic size calculation of the displayed asset. Finally, head to http://www.igvita.com/downloads/ch/ to see Client-Hints in action - if you've enabled the right flags then all images should be displayed at correct intrinsic size and resolution. Now try changing your DPR value via the extension - voila!
  24 +
  25 +Alternatively, you can test Client-Hints with your favorite command line client. Simply pass the right CH headers when making the request. For example, using curl:
20 26
21 27 ```bash
22   -$> curl -H'CH-DPR:1.8' -v http://ch-dpr-demo.herokuapp.com/photo.jpg | wc -l
  28 +$> curl -H'CH-DPR: 1.8' -v http://ch-dpr-demo.herokuapp.com/photo.jpg | wc -l
23 29
24 30 > GET /photo.jpg HTTP/1.1
25 31 > User-Agent: curl/7.30.0
26 32 > Host: ch-dpr-demo.herokuapp.com
27 33 > Accept: */*
28   -> CH-DPR:1.8
  34 +> CH-DPR: 1.8
29 35 >
30 36 < HTTP/1.1 200 OK
31 37 < Content-Type: image/jpeg
32 38 < Date: Wed, 30 Oct 2013 19:02:18 GMT
33   -< Dpr: 1.5
34   -* Server WEBrick/1.3.1 (Ruby/2.0.0/2013-06-27) is not blacklisted
35 39 < Server: WEBrick/1.3.1 (Ruby/2.0.0/2013-06-27)
  40 +< DPR: 1.5
36 41 < Vary: CH-DPR
37 42 < X-Content-Type-Options: nosniff
38 43 < Content-Length: 381135
@@ -42,23 +47,6 @@ $> curl -H'CH-DPR:1.8' -v http://ch-dpr-demo.herokuapp.com/photo.jpg | wc -l
42 47 1361
43 48 ```
44 49
45   -Note that we sent a "1.8" DPR hint and the server has responded with closest
46   -match it has on disk, which in this case is "1.5" (as confirmed by DPR header). To test this behavior in the browser
47   -
48   -
49   -### Running local instance
50   -
51   -```bash
52   -$> bundle install
53   -$> ruby dpr_server.rb
54   -
55   -# to run specs
56   -$> rake spec
57   -```
58   -
59   -With the server up and running, try loading a few images:
  50 +In example above we're sending a "1.8" DPR hint to the server, and the server has decided to respond with a "1.5" (as confirmed via "DPR: 1.5" header) asset. Try changing it to a different value, or omit the header entirely.
60 51
61   -* http://localhost:4567/missing.jpg (return 404)
62   -* http://localhost:4567/photo.jpg (if sending CH-DPR header)
63   -* http://localhost:4567/photo.jpg?force_dpr=1.8 (force DPR)
64 52

0 comments on commit a1bf8c8

Please sign in to comment.
Something went wrong with that request. Please try again.