Permalink
Browse files

update readme with client/server examples

  • Loading branch information...
1 parent 87a9414 commit a1bf8c868bcfc0bde544f5047e948c1fac41661c @igrigorik committed Oct 31, 2013
Showing with 21 additions and 33 deletions.
  1. +21 −33 server/README.md
View
@@ -1,38 +1,43 @@
-A simple reference server to demo Client-Hints in action. For an end-to-end demo, first you'll need Chrome Canary, and then:
+To see Client-Hints in action you will need both a CH-aware server and a CH-aware client...
-* Enable chrome://flags/#enable-experimental-web-platform-features
-* Launch Canary with `--enable-clients` from comand line
-* Visit: http://jsbin.com/akOtEJA/1/quiet
+### Client-Hints servers
-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).
+* See checked in **ch-dpr-server** for a sample ruby server
+* See checked in **nginx-ch-dpr.conf** for sample nginx implementation
-_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._
+You can run both of the above locally to test the server. Alternatively, you can seem them in action here:
-* See **nginx-ch-dpr.conf** for example Nginx config.
+* Ruby server: http://ch-dpr-demo.herokuapp.com/photo.jpg
+* Nginx server: http://www.igvita.com/downloads/ch/photos/awesome.jpg
+For an end-to-end test, setup your client (see below) and head to: http://www.igvita.com/downloads/ch/
-## Demo instance on Heroku
-* http://ch-dpr-demo.herokuapp.com/photo.jpg
-* http://ch-dpr-demo.herokuapp.com/photo.jpg?force_dpr=2.2
+### Client-Hints clients
-A quick example using curl:
+* Chrome Canary supports Client-Hints:
+ * Enable _chrome://flags/#enable-experimental-web-platform-features_
+ * Launch Canary with `--enable-clients` from comand line
+ * 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.
+
+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!
+
+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:
```bash
-$> curl -H'CH-DPR:1.8' -v http://ch-dpr-demo.herokuapp.com/photo.jpg | wc -l
+$> curl -H'CH-DPR: 1.8' -v http://ch-dpr-demo.herokuapp.com/photo.jpg | wc -l
> GET /photo.jpg HTTP/1.1
> User-Agent: curl/7.30.0
> Host: ch-dpr-demo.herokuapp.com
> Accept: */*
-> CH-DPR:1.8
+> CH-DPR: 1.8
>
< HTTP/1.1 200 OK
< Content-Type: image/jpeg
< Date: Wed, 30 Oct 2013 19:02:18 GMT
-< Dpr: 1.5
-* Server WEBrick/1.3.1 (Ruby/2.0.0/2013-06-27) is not blacklisted
< Server: WEBrick/1.3.1 (Ruby/2.0.0/2013-06-27)
+< DPR: 1.5
< Vary: CH-DPR
< X-Content-Type-Options: nosniff
< Content-Length: 381135
@@ -42,23 +47,6 @@ $> curl -H'CH-DPR:1.8' -v http://ch-dpr-demo.herokuapp.com/photo.jpg | wc -l
1361
```
-Note that we sent a "1.8" DPR hint and the server has responded with closest
-match it has on disk, which in this case is "1.5" (as confirmed by DPR header). To test this behavior in the browser
-
-
-### Running local instance
-
-```bash
-$> bundle install
-$> ruby dpr_server.rb
-
-# to run specs
-$> rake spec
-```
-
-With the server up and running, try loading a few images:
+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.
-* http://localhost:4567/missing.jpg (return 404)
-* http://localhost:4567/photo.jpg (if sending CH-DPR header)
-* http://localhost:4567/photo.jpg?force_dpr=1.8 (force DPR)

0 comments on commit a1bf8c8

Please sign in to comment.