How to retrieve the tile URL in OpenLayers 3?

I have a question about Openlayers3 , I have the below code that initializes my map on my small demo application:

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: 'map',
    controls: ol.control.defaults({

        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
        })
    }),
    view: view
}); 

You can see a demo HERE

Now my question is how do I get the Tile url , so that I can store it locally using localstorage ? how do I get the Tile url ?

I saw the ol.TileUrlFunctionType() , but I am not sure how to use it ? can anybody help me understand how to get the tile url ? (can can play around in the Chrome Developer Tools for the demo that I have provided.)

Answer

Just get the source with

// From the map we get all layers, then take the first one
// (index 0 in item) and then access the source
var source = map.getLayers().item(0).getSource()

Then, get urls with

console.log(source.getUrls());

We deduced this from the API for the OSM source.

Edit

To get each individual tiles, do

var source = map.getLayers().item(0).getSource()
var tileUrlFunction = source.getTileUrlFunction()
source.on('tileloadend', function (evt) {
    console.log(tileUrlFunction(evt.tile.getTileCoord(), 1, ol.proj.get('EPSG:3857')));
});

Where evt.tile.getTileCoord() is an array of [z, x, y], 1 the pixelRatio (1 if not on Retina) and ol.proj.get('EPSG:3857'), the getter for projection used in OpenStreetMap. you can replace the 1 with ol.has.DEVICE_PIXEL_RATIO in fact, to "automagically" get the "right" ratio.

Again, deduced from the API e.g the TileUrlFunctionType part. Forgot also to mentioned the tileloadend event documentation