← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/sw-toolbox/recipes/cache-expiration-options/index.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/sw-toolbox/recipes/cache-expiration-options/index.html
 
1
<html>
 
2
  <head>
 
3
    <title>Cache Expiration Demo</title>
 
4
    <link rel="stylesheet" href="../common.css">
 
5
    <link rel="stylesheet" href="styles.css">
 
6
    <script>
 
7
      // If we're running on a real web server (as opposed to localhost, which is whitelisted),
 
8
      // then change the protocol to HTTPS.
 
9
      // See https://goo.gl/lq4gCo for an explanation as to why this is needed for some features.
 
10
      (function() {
 
11
        var isLocalhost = !!(window.location.hostname === 'localhost' ||
 
12
          // [::1] is the IPv6 localhost address.
 
13
          window.location.hostname === '[::1]' ||
 
14
          // 127.0.0.1/8 is considered localhost for IPv4.
 
15
          window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));
 
16
        if (window.location.protocol === 'http:' && !isLocalhost) {
 
17
          // Redirect to https: if we're currently using http: and we're not on localhost.
 
18
          window.location.protocol = 'https:';
 
19
        }
 
20
      })();
 
21
    </script>
 
22
  </head>
 
23
 
 
24
  <body>
 
25
    <h1>Cache Expiration Demo</h1>
 
26
 
 
27
    <h3>Background</h3>
 
28
    <p>
 
29
      The <a href="service-worker.js" target="_blank">service worker</a> in this example
 
30
      demonstrates using the <code>maxCacheEntries</code> and <code>maxCacheAgeSeconds</code>
 
31
      options. It uses a dedicated cache to hold YouTube video thumbnails. That
 
32
      dedicated cache will purge entries once they're older than 30 seconds, and store at most 10
 
33
      entries. It uses the <code>cacheFirst</code> strategy, so any responses that are still in the
 
34
      cache will be used directly, without going against the network.
 
35
    </p>
 
36
 
 
37
    <p>
 
38
      While this example uses both <code>maxCacheEntries</code> and <code>maxCacheAgeSeconds</code>,
 
39
      it's possible to use each of those options independently.
 
40
    </p>
 
41
 
 
42
    <p>
 
43
      The cache used for YouTube thumbnail URLs is separate from the "default" cache, which is
 
44
      used for all other requests, like YouTube API responses and this page's CSS, JavaScript, and
 
45
      HTML. The page doesn't impose any upper limit on the size of that default cache, and we can
 
46
      use a <code>networkFirst</code> strategy for it.
 
47
    </p>
 
48
 
 
49
    <p>
 
50
      Creating a dedicated cache with expiration options for dynamic, unbounded requests is a useful
 
51
      pattern to follow. If we just used the default cache without imposing a cache expiration,
 
52
      then that cache would grow in size as more and more searches were performed, needlessly
 
53
      consuming disk space for old thumbnails that are likely no longer needed.
 
54
    </p>
 
55
 
 
56
    <h3>Live Demo</h3>
 
57
    <p>
 
58
      Try increasing the number of thumbnails returned, or changing the search term, and then
 
59
      observe the cache expirations logged in the developer console.
 
60
    </p>
 
61
    <form id="search">
 
62
      <label for="searchTerm">Search YouTube for</label>
 
63
      <input id="searchTerm" type="search" value="javascript">
 
64
      <label for="maxResults">, returning at most</label>
 
65
      <input id="maxResults" type="number" min="1" max="50" value="10">
 
66
      <span>thumbnails.</span>
 
67
      <input type="submit" value="Search">
 
68
    </form>
 
69
 
 
70
    <div id="results"></div>
 
71
 
 
72
    <script src="app.js"></script>
 
73
    <script src="../../companion.js" data-service-worker="service-worker.js"></script>
 
74
  </body>
 
75
</html>