Example Codes

Simple Declarative Example

    <!DOCTYPE html>
    <html>
      <head>
        <title>PortableCache Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <meta name="portable-cache" content="version=20130630">
        <link rel="stylesheet" data-cache-url="css/bootstrap.css">
        <script src="js/portable-cache.js"></script>
      </head>
      <body>
        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
              <span class="brand">PortableCache</span>
            </div>
          </div>
        </div>
    ...........snip..............
            <h2>Current Status</h2>
            <p>Under development. Very early stage.</p>
            <h2>Example Image Stabs</h2>
            <img data-cache-url="img/abstract1_640x428.jpg"  data-cache-srcset="img/abstract1_320x214.jpg 320w, img/abstract1_640x428.jpg 640w, img/abstract1_640x428.jpg 320w 2x" alt="" lazyload>
            <img data-cache-url="img/abstract2_640x441.jpg" data-cache-srcset="img/abstract2_320x220.jpg 320w, img/abstract2_640x441.jpg 640w, img/abstract2_640x441.jpg 320w 2x" alt="" lazyload>
            <img data-cache-url="img/abstract3_640x541.jpg" data-cache-srcset="img/abstract3_240x203.jpg 240w, img/abstract3_640x541.jpg 640w, img/abstract3_640x541.jpg 320w 2x" alt="" lazyload>
            <h2>Author</h2>
            <ul>
              <li>Eiji Kitamura (<a href="https://google.com/+agektmr" target="_blank">+agektmr</a>, <a href="https://twitter.com/agektmr" target="_blank">@agektmr</a>)</li>
            </ul>
          </div>
        </div>
      </body>
    </html>

AngularJS manual initialization

HTML

    <html ng-app="App">
      ...
        <script data-cache-url="js/angular.js"></script>
        <script data-cache-url="js/audio.js"></script>
        <script data-cache-url="js/main.js"></script>
        <script src="js/portable-cache.js"></script>
      ...

JavaScript

    var app = angular.module('App', []);
    app.directive('aDirective', function($window) {
      ...
    });
    // Invoke Angular manual initialization after 'pcache-ready' event.
    document.addEventListener('pcache-ready', function() {
      angular.bootstrap(document, ['App']);
    });

Imperative cache resource handling

    var map = [
      '/sample/snare.wav',
      '/sample/bass.wav',
      '/sample/hihat.wav'
    ];
    var ctx = new AudioContext();
    var buffers = [];
    for (var i = 0; i < map.length; i++) {
      (function(i, url) {
        var cache = new CacheEntry({url:url, type:'binary'});
        cache.load(function(cache) {
          cache.getContentAs('arraybuffer', function(b) {
            ctx.decodeAudioData(b, function(buffer) {
              buffers[i] = buffer;
            });
          });
        });
      })(i, map[i]);
    }
    var play = function(key) {
      var s = ctx.createBufferSource();
      s.buffer = buffers[key];
      s.connect(ctx.destination);
      s.start(0);
    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Example Codes

Simple Declarative Example

AngularJS manual initialization

HTML

JavaScript

Imperative cache resource handling

Uh oh!

Uh oh!

Clone this wiki locally