Shopping demo (compression dictionary transport feature dynamic resources flow)

This demo describes how the Compression Dictionary Transport feature can be used for compressing HTML files using a shared dictionary.

To try this demo, please follow these instructions:

1. Use Chrome Canary or Dev (version > 117.0.5906.0).
2. Enable both chrome://flags/#enable-compression-dictionary-transport and chrome://flags/#enable-compression-dictionary-transport-backend
3. Open DevTools (Windows: F12 key, Mac: Command + Option + I), and select the Network tab.
4. Go to the top page
   • You will see "/dictionary" file fetched.
   • This is triggered by a link tag in the HTML.

     <link rel="dictionary" href="/dictionary" />

   • When you click "dictionary", you can see this new response header:

     Use-As-Dictionary: match="/items/*"

   This response header means that the content of "dictionary" can be used as a shared dictionary for fetching resources under "/item/".
   • In chrome://net-internals/#sharedDictionary, you can see the registered dictionary information.
5. Click "Man's Shoe" in the top page
   • The transferred data size for the html file (1f45e.html) will be about "1.5 KB".
   • This is compressed using Shared Brotli using the dictionary. The original size of "1f45e.html" is 105,056 bytes. And the compressed data size is 1,318 bytes.
   • When you click "1f45e.html", you can see this new request header:

     Available-Dictionary: :tHfcpuKzLUouC+XG9oiG3H4wyfFrKHk9EKtV8rv3Hxk=:

     Also you can see new "br-d" and "zstd-d" Accept-Encoding types:

     Accept-Encoding: gzip, deflate, br, zstd, br-d, zstd-d

     This request header means that the browser has a dictionary with the hash, and can use Shared Brotli ans Shared Zstd compression.
   • And the response header has

     Content-Encoding: zstd-d

     and

     Content-Dictionary: :tHfcpuKzLUouC+XG9oiG3H4wyfFrKHk9EKtV8rv3Hxk=:

     headers. This means that the response is Shared Zstd compressed using the dictionary.

The source code of this demo is available at GitHub.