We Keep Coding

Object appears in console.log, but is empty when passed to function

I am trying to create a serverless React app to make recommendations by processing some data from Spotify's API. I am using spotify web api js as a wrapper to make the API calls. My problem is that one of the results I get from my functions appears when I call console.log on it, but not when I pass it to another function. Here's the code for the submit handler on my page:
handleSubmit(e) {
e.preventDefault();
this.setState({recOutput: {}});
spotify.setAccessToken(this.props.vars.token);
spotify.searchArtists(this.state.artist)
.then(res => this.getRecs(res))
.then(output => this.processResults(output))
.then(processed => this.setState({resultReceived: true, recOutput: processed}))
.catch(err => this.handleError(err));
}
And here are all the functions it's calling:
/**
* Gets recommendations for a specific artist and outputs recOutput value in redux store
* #param {string} name The name of the artist
* #return Promise with output
* TODO: catch errors again lol
* /
**/
async getRecs(name) {
const MAX_SONGS = 50;
var output = {};
spotify.searchPlaylists(name, {limit: 1})
.then(searchTotal => {spotify.searchPlaylists(name, {limit: 50, offset: Math.floor(Math.random() * (searchTotal.playlists.total/50))}).then(
res => {
for (let i of res.playlists.items) {
spotify.getPlaylistTracks(i.id).then(
pt => {
let curSongs = 0;
if (pt == undefined) {
return;
}
for (let track of pt.items) {
if (curSongs > MAX_SONGS) break;
if (track.track != null
&& track.track.artists[0].name !== name
&& track.track.artists[0].name !== "") {
if (track.track.artists[0].name in output) {
output[track.track.artists[0].name]++;
} else {
output[track.track.artists[0].name] = 1;
}
}
curSongs++;
}
})
}
}
)
}).catch(err => this.handleError(err));
return output;
}
/**
* Processes results from our query to spotify, removing entries beyond a certain threshhold then sorting the object.
* #return Promise for updated results update
*/
async processResults(input) {
debugger;
let processed = {};
for (let key in input) {
console.log(key);
if (input[key]> 10) {
processed.key = input.key;
}
}
return processed;
}
My problem is that when I call .then(output => this.processResults(output)), the process method receives an empty output in the debugger, but when I call .then(output => console.log(output)), I see the expected output for the function.
Here is the context of my component:

javascript sets - adding value to array in object inside a set

I'm trying to make an array of sets to make something like this
{
'user1': ["value#1", "value#2",..."value#N"],
'user2': ["value#2",..."value#N"],
'userN': [..."value#N"]
}
and then remove the value#x after 5 seconds (for example).
here is my code:
var myset = new Set();
var ran = myset[USERID] = commandNumber;
//i'm trying to make "if myset contains userNumber AND commandName" return,
//if its not, run someFunction() and continue
if (myset.has(ran)) return;
someFunction();
myset.add(ran);
setTimeout(() => {
myset.delete(ran);
}, 5000);
instead of getting output like the first code, i get this output instead
Set { 'command1', 'command2',
'USER1': 'command3',
'USER2': 'command4'
'USERN': 'commandN'
}
Feel free to comment if you have a question, so sorry if my question is hard to understand

A Set for this purpose is not necessary but I did a small POC that could help you to implement the solution you need:
'use strict';
const mySet = new Set();
const mySetMetadata = {};
const removeFromSet = (userKey, commandName) => {
const commands = mySetMetadata[userKey] || [];
if (commands.includes(commandName)) {
mySetMetadata[userKey] = commands.filter(c => c !== commandName);
if (mySetMetadata[userKey].length === 0) {
mySet.delete(userKey);
mySetMetadata[userKey] = undefined;
}
}
};
/**
* Add relation between an userKey and a command
* #param {String} userKey
* #param {Array} commands Array of commands
*/
const addToSet = (userkey, commands) => {
mySet.add(userkey);
if (typeof mySetMetadata[userkey] === 'undefined') {
mySetMetadata[userkey] = commands;
} else {
mySetMetadata[userKey] = [...mySetMetadata[userKey], ...commands]
}
}
// Populate with demo data
addToSet('user1', ['value#1', 'value#2', 'value#N']);
addToSet('user2', ['value#2', 'value#N']);
addToSet('user3', ['value#N']);
// Set up a timeout for a given user + key
setTimeout(() => {
removeFromSet('user1', 'value#2');
}, 5000);

Trouble with javascript, protractor, and classes

I'm having some trouble understanding class scope and how to utilize objects, prototypes, etc, within the system I'm having. It seems to me that I'm doing things correctly, but it isn't working and I'm hoping someone can explain it to me or get me pointed in the right direction.
So here's the situation:
I'm trying to create a generic page object and verification object that would handle an input box with an associated text label. Things do appear to work if I have the verification in the same class as the page object structure, but I've recently learned that is bad design.
This is an Angular 2 rc1 site. I'm using protractor 3.3.0 and have ensured that the project version of selenium and chromedriver are up-to-date by using webdriver-manager.
So here's what I've done (filenames are in the comments at the start of each section):
'use strict';
/*
* InputLabelPageObject.js
*
* This object will provide basic methods for an Input box with an attached label.
* It is expected that the label will have an element called "label" and an element called "input"
*/
module.exports = InputLabelPageObject;
/**
* Create an object that will provide methods for an input/label combination of elements.
*
* #param container The selector for the __container of the input/label combination of elements.
*/
function InputLabelPageObject(container) {
this.Container = container;
}
InputLabelPageObject.prototype = {
constructor: InputLabelPageObject,
/**
* Return the element for the label of the input/label combination of elements.
*
* #returns {protractor.element}
*/
getLabel: function () {
return this.Container.$('label');
},
/**
* Return the element for the input of the input/label combination of elements.
*
* #returns {ElementFinder}
*/
getInput: function () {
return this.Container.$('input');
},
/**
* Return the text shown in the input of the input/label combination of elements.
*
* #returns {Promise}
*/
getValue: function () {
return this.getInput().getAttribute('value');
},
/**
* Get the placeholder text shown in the input of the input/label combination of elements.
*
* #returns {Promise}
*/
getPlaceholder: function () {
return this.getInput().getAttribute('placeholder');
},
/**
* Clears the input element then puts the text from data into the input element.
*
* #param data The text to be entered into the input element.
*/
sendKeys: function (data) {
var el = this.getInput();
el.clear().then(function () {
return el.sendKeys(data);
});
}
};
--
'use strict';
/*
* InputLabelVerification.js
*
* Provide verification methods associated with an Input and Label
* combination of elements.
*/
module.exports = InputLabelVerifications;
var inputLabelPageObject;
function InputLabelVerifications(inputLabelPageObject) {
this.__setPageObject(inputLabelPageObject);
}
InputLabelVerifications.prototype = {
constructor: InputLabelVerifications,
__setPageObject: function (ilpo) {
inputLabelPageObject = ilpo;
},
/**
* Verify the text on the label of the input/label combination of elements.
*
* #param expected The expected text on the label.
*/
verifyText: function (expected) {
//console.log('Asserting text [' + expected + ']');
expect(inputLabelPageObject.getLabel()).toEqual(expected);
},
/**
* Verify the text shown in the input of the input/label combination of elements.
*
* #param expected The expected text in the input element.
*/
verifyValue: function (expected) {
//console.log('Asserting input value [' + expected + ']');
expect(inputLabelPageObject.getValue()).toEqual(expected);
},
/**
* Verify the placeholder text shown in the input of the input/label combination of elements.
*
* #param expected The expected text of the placeholder.
*/
verifyPlaceholder: function (expected) {
//console.log('Verifying placeholder text [' + expected + ']');
expect(inputLabelPageObject.getPlaceholder()).toEqual(expected);
}
};
--
'use strict';
/*
* LoginPageObject.js
*
*/
var InputLabelPageObject = require('./generics/InputLabelPageObject.js');
module.exports = LoginPageObject;
var __container = $('login-component');
var username = new InputLabelPageObject(__container.$('form:nth-child(2) > div:nth-child(1)'));
var password = new InputLabelPageObject(__container.$('form:nth-child(2) > div:nth-child(2)'));
/**
* Create an object that contains the methods necessary to perform actions against the LoginPageObject page.
*
* #param url The base URL string. If not undefined, it will load the url+'/login' page.
* #constructor new LoginPageObject('http://localhost:9000');
*/
function LoginPageObject(url) {
if (url) {
this.loadPage(url)
}
}
LoginPageObject.prototype = {
constructor: LoginPageObject,
loadPage: function (url) {
url = url + '/login';
console.log('Loading page: '+ url);
browser.get(url);
},
welcome: {
/**
* Return the element for the Welcome text
*
* #returns {ElementFinder}
*/
get: function () {
return __container.$('section:first-child h1:first-child');
},
},
/**
* Return an InputLabelPageObject object specific for the username input and label elements.
*/
username: username,
/**
* Return an InputLabelPageObject object specific for the password input and label elements.
*/
password: password,
loginButton: {
/**
* Return the element for the login button.
*
* #returns {ElementFinder}
*/
get: function () {
return __container.$('form > button');
},
/**
* Click the LoginPageObject button.
* #returns {*|void|webdriver.promise.Promise<void>|ActionSequence|!webdriver.promise.Promise.<void>}
*/
click: function () {
return this.get().click();
}
}
};
--
'use strict';
/*
* LoginPageVerifications.js
*/
var LoginPageObject = require('../pageObjects/LoginPageObject');
var verifyText = require('./generics/VerifyText');
var inputLabelVerifications = require('./generics/InputLabelVerifications');
module.exports = LoginPageVerifications;
var __loginPageObject = new LoginPageObject();
function LoginPageVerifications(url) {
if (url) {
__loginPageObject = new LoginPageObject(url);
}
}
LoginPageVerifications.prototype = {
constructor: LoginPageVerifications,
loginPageObject: new LoginPageObject(),
welcome: {
verifyText: function (expected) {
verifyText(__loginPageObject.welcome.get(), expected);
}
},
username: new inputLabelVerifications(__loginPageObject.username),
password: new inputLabelVerifications(__loginPageObject.password),
loginButton: {
verifyText: function (expected) {
verifyText(__loginPageObject.loginButton.get(), expected);
}
},
/**
* Performs the actions of logging in. That is, enter the username and password values,
* then click the LoginPageObject button. This does *not* verify page load.
*
* #param username The username to login with.
* #param password The password to login with.
*/
doLogin: function (username, password) {
var uPromise = __loginPageObject.username.sendKeys(username);
var pPromise = __loginPageObject.password.sendKeys(password);
protractor.promise.asap(this.username.verifyValue(username));
protractor.promise.asap(this.password.verifyValue(password));
protractor.promise.all([uPromise, pPromise]).then(this.loginButton.click());
},
/**
* Verifies all page elements' text or other default attributes.
*
* #param welcomeText The expected Welcome text
* #param userText The expected username label text.
* #param userPlaceholder The expected username's input element's placeholder text.
* #param passText The expected password label text.
* #param passPlaceholder The expected password's input element's placeholder text.
* #param loginText The expected login button text.
*/
verifyPage: function (welcomeText, userText, userPlaceholder, passText, passPlaceholder, loginText) {
this.welcome.verifyText(welcomeText);
this.username.verifyText(userText);
this.username.verifyPlaceholder(userPlaceholder);
this.password.verifyText(passText);
this.password.verifyPlaceholder(passPlaceholder);
this.loginButton.verifyText(loginText);
}
};
--
'use strict';
/*
* login-spec.js
*/
var LoginPageVerifications = require('../components/actions/LoginPageVerifications');
var myUrl = 'http://localhost:3000';
describe('My Login Page test', function() {
var loginPage;
beforeAll(function() {
loginPage = new LoginPageVerifications(myUrl);
});
it('should verify username input and label values', function() {
var welcomeText = 'Thank you for visiting my login page';
var userText = 'Username';
var userPlaceholder = 'Enter your username';
var passText = 'Password';
var passPlaceholder = 'Enter your password';
var loginText = 'Login';
loginPage.username.verifyText(userText);
// loginPage.verifyPage(welcomeText, userText, userPlaceholder, passText, passPlaceholder, loginText);
});
});
The results that I'm usually seeing:
If in InputLabelVerification.js I leave out var inputLabelPageObject or try to set the value only in the constructor function, I get Failed: Cannot read property 'getLabel' of undefined. So, I've figured that I must set it the way I have it shown above.
The closest I seem to get is when I get the following response:
A Jasmine spec timed out. Resetting the WebDriver Control Flow.
F
Failures:
1) My Login Page test should verify username input and label values
Expected ({ ptor_: ({ controlFlow: Function, schedule: Function,
setFileDetector: Function, getSession: Function, getCapabilities: Function,
quit: Function, actions: Function, touchActions: Function,
executeScript: Function, executeAsyncScript: Function, call: Function,
wait: Function, sleep: Function, getWindowHandle... }) }) to equal 'Username'.
In the LoginPageVerification.js, I've tested and ensured that the other verifications (welcome and loginButton) work fine.
Also, if from login-spec.js I add this line:
expect(loginPage.loginPageObject.username.getLabel().getText()).toEqual(userText);
this expect passes the test.

I've got the answer. And now I feel silly. I'll post as the answer when I can in 2 days. (This only took me several days to get it right.)
Essentially, I'm calling .getLabel() from the InputLabelPageObject from InputLabelVerifications, which returns an ElementFinder... it does not return a string as is needed. (oops)
In InputLabelPageObject, I added the following line:
getText: function() {
this.getLabel().getText();
}
and then called that function in the InputLabelVerifications class,
verifyText: function (expected) {
//console.log('Asserting text [' + expected + ']');
expect(inputLabelPageObject.getText()).toEqual(expected);
},
and all is working as expected.

Undefined is not a function, wysiwyg drupal7

I have the following code "js", and the browser puts this error "in line 8, "undefined is not a function".
The line 8 is: $('.wysiwyg', context).once('wysiwyg', function () {
I have no idea about what happens!
Any suggestions? Thank you.
Drupal.behaviors.attachWysiwyg = {
attach: function (context, settings) {
// This breaks in Konqueror. Prevent it from running.
if (/KDE/.test(navigator.vendor)) {
return;
}
$('.wysiwyg', context).once('wysiwyg', function () {
if (!this.id || typeof Drupal.settings.wysiwyg.triggers[this.id] === 'undefined') {
return;
}
var $this = $(this);
var params = Drupal.settings.wysiwyg.triggers[this.id];
for (var format in params) {
params[format].format = format;
params[format].trigger = this.id;
params[format].field = params.field;
}
var format = 'format' + this.value;
// Directly attach this editor, if the input format is enabled or there is
// only one input format at all.
if ($this.is(':input')) {
Drupal.wysiwygAttach(context, params[format]);
}
// Attach onChange handlers to input format selector elements.
if ($this.is('select')) {
$this.change(function() {
// If not disabled, detach the current and attach a new editor.
Drupal.wysiwygDetach(context, params[format]);
format = 'format' + this.value;
Drupal.wysiwygAttach(context, params[format]);
});
}
// Detach any editor when the containing form is submitted.
$('#' + params.field).parents('form').submit(function (event) {
// Do not detach if the event was cancelled.
if (event.isDefaultPrevented()) {
return;
}
Drupal.wysiwygDetach(context, params[format], 'serialize');
});
});
},
detach: function (context, settings, trigger) {
var wysiwygs;
// The 'serialize' trigger indicates that we should simply update the
// underlying element with the new text, without destroying the editor.
if (trigger == 'serialize') {
// Removing the wysiwyg-processed class guarantees that the editor will
// be reattached. Only do this if we're planning to destroy the editor.
wysiwygs = $('.wysiwyg-processed', context);
}
else {
wysiwygs = $('.wysiwyg', context).removeOnce('wysiwyg');
}
wysiwygs.each(function () {
var params = Drupal.settings.wysiwyg.triggers[this.id];
Drupal.wysiwygDetach(context, params, trigger);
});
}
};
/**
* Attach an editor to a target element.
*
* This tests whether the passed in editor implements the attach hook and
* invokes it if available. Editor profile settings are cloned first, so they
* cannot be overridden. After attaching the editor, the toggle link is shown
* again, except in case we are attaching no editor.
*
* #param context
* A DOM element, supplied by Drupal.attachBehaviors().
* #param params
* An object containing input format parameters.
*/
Drupal.wysiwygAttach = function(context, params) {
if (typeof Drupal.wysiwyg.editor.attach[params.editor] == 'function') {
// (Re-)initialize field instance.
Drupal.wysiwyg.instances[params.field] = {};
// Provide all input format parameters to editor instance.
jQuery.extend(Drupal.wysiwyg.instances[params.field], params);
// Provide editor callbacks for plugins, if available.
if (typeof Drupal.wysiwyg.editor.instance[params.editor] == 'object') {
jQuery.extend(Drupal.wysiwyg.instances[params.field], Drupal.wysiwyg.editor.instance[params.editor]);
}
// Store this field id, so (external) plugins can use it.
// #todo Wrong point in time. Probably can only supported by editors which
// support an onFocus() or similar event.
Drupal.wysiwyg.activeId = params.field;
// Attach or update toggle link, if enabled.
if (params.toggle) {
Drupal.wysiwygAttachToggleLink(context, params);
}
// Otherwise, ensure that toggle link is hidden.
else {
$('#wysiwyg-toggle-' + params.field).hide();
}
// Attach editor, if enabled by default or last state was enabled.
if (params.status) {
Drupal.wysiwyg.editor.attach[params.editor](context, params, (Drupal.settings.wysiwyg.configs[params.editor] ? jQuery.extend(true, {}, Drupal.settings.wysiwyg.configs[params.editor][params.format]) : {}));
}
// Otherwise, attach default behaviors.
else {
Drupal.wysiwyg.editor.attach.none(context, params);
Drupal.wysiwyg.instances[params.field].editor = 'none';
}
}
};
/**
* Detach all editors from a target element.
*
* #param context
* A DOM element, supplied by Drupal.attachBehaviors().
* #param params
* An object containing input format parameters.
* #param trigger
* A string describing what is causing the editor to be detached.
*
* #see Drupal.detachBehaviors
*/
Drupal.wysiwygDetach = function (context, params, trigger) {
// Do not attempt to detach an unknown editor instance (Ajax).
if (typeof Drupal.wysiwyg.instances[params.field] == 'undefined') {
return;
}
trigger = trigger || 'unload';
var editor = Drupal.wysiwyg.instances[params.field].editor;
if (jQuery.isFunction(Drupal.wysiwyg.editor.detach[editor])) {
Drupal.wysiwyg.editor.detach[editor](context, params, trigger);
}
};
/**
* Append or update an editor toggle link to a target element.
*
* #param context
* A DOM element, supplied by Drupal.attachBehaviors().
* #param params
* An object containing input format parameters.
*/
Drupal.wysiwygAttachToggleLink = function(context, params) {
if (!$('#wysiwyg-toggle-' + params.field).length) {
var text = document.createTextNode(params.status ? Drupal.settings.wysiwyg.disable : Drupal.settings.wysiwyg.enable);
var a = document.createElement('a');
$(a).attr({ id: 'wysiwyg-toggle-' + params.field, href: 'javascript:void(0);' }).append(text);
var div = document.createElement('div');
$(div).addClass('wysiwyg-toggle-wrapper').append(a);
$('#' + params.field).after(div);
}
$('#wysiwyg-toggle-' + params.field)
.html(params.status ? Drupal.settings.wysiwyg.disable : Drupal.settings.wysiwyg.enable).show()
.unbind('click.wysiwyg', Drupal.wysiwyg.toggleWysiwyg)
.bind('click.wysiwyg', { params: params, context: context }, Drupal.wysiwyg.toggleWysiwyg);
// Hide toggle link in case no editor is attached.
if (params.editor == 'none') {
$('#wysiwyg-toggle-' + params.field).hide();
}
};
/**
* Callback for the Enable/Disable rich editor link.
*/
Drupal.wysiwyg.toggleWysiwyg = function (event) {
var context = event.data.context;
var params = event.data.params;
if (params.status) {
// Detach current editor.
params.status = false;
Drupal.wysiwygDetach(context, params);
// After disabling the editor, re-attach default behaviors.
// #todo We HAVE TO invoke Drupal.wysiwygAttach() here.
Drupal.wysiwyg.editor.attach.none(context, params);
Drupal.wysiwyg.instances[params.field] = Drupal.wysiwyg.editor.instance.none;
Drupal.wysiwyg.instances[params.field].editor = 'none';
Drupal.wysiwyg.instances[params.field].field = params.field;
$(this).html(Drupal.settings.wysiwyg.enable).blur();
}
else {
// Before enabling the editor, detach default behaviors.
Drupal.wysiwyg.editor.detach.none(context, params);
// Attach new editor using parameters of the currently selected input format.
params = Drupal.settings.wysiwyg.triggers[params.trigger]['format' + $('#' + params.trigger).val()];
params.status = true;
Drupal.wysiwygAttach(context, params);
$(this).html(Drupal.settings.wysiwyg.disable).blur();
}
}
/**
* Parse the CSS classes of an input format DOM element into parameters.
*
* Syntax for CSS classes is "wysiwyg-name-value".
*
* #param element
* An input format DOM element containing CSS classes to parse.
* #param params
* (optional) An object containing input format parameters to update.
*/
Drupal.wysiwyg.getParams = function(element, params) {
var classes = element.className.split(' ');
var params = params || {};
for (var i = 0; i < classes.length; i++) {
if (classes[i].substr(0, 8) == 'wysiwyg-') {
var parts = classes[i].split('-');
var value = parts.slice(2).join('-');
params[parts[1]] = value;
}
}
// Convert format id into string.
params.format = 'format' + params.format;
// Convert numeric values.
params.status = parseInt(params.status, 10);
params.toggle = parseInt(params.toggle, 10);
params.resizable = parseInt(params.resizable, 10);
return params;
};
/**
* Allow certain editor libraries to initialize before the DOM is loaded.
*/
Drupal.wysiwygInit();
// Respond to CTools detach behaviors event.
$(document).bind('CToolsDetachBehaviors', function(event, context) {
Drupal.behaviors.attachWysiwyg.detach(context, {}, 'unload');
});
})(jQuery);

Sounds like you might be missing a jquery file defining the "once" function. Check with Firebug for Firefox (or a similiar development tool) where you can see the requested files for each page - clear the browser cache, then check Firebug's Net tab when reloading the page. If any files are not listed with a HTTP status code of "200 OK", you'll need to check that the files exist and have read permissions so the server can hand them out.
Anyway try to change line 8 as:
$('.wysiwyg:not(.processed)', context).addClass('processed').each(function() {

HTML5 appcache, Get a list of cached files in the client

In my project, I'm trying to use HTML5 appcache to cache static resources like CSS and JS, and "user specific" files such as images and videos. When I say user specific images/videos, I'm trying to have separate files for each user and I need to control order of the file download as well.
Given the scenario, my manifest file will be dynamically loaded for every user. Is there a way where I can get a list of resources that are already cached in client side?
If not, is is possible to read the ".appcache" file in client?

Yes. You can use AJAX request to get the manifest cache file and then read it.
However, this does not guarantee that the browser in the question has the files available.
Below is an sample code
Which checks if we have cached HTML5 app or not
If we are not in a cached state then count loaded resources in the manifest and display a progress bar according to the manifest cache entry count (total) and do a manual AJAX GET request for all URLs to warm up the cache. The browser will do this itself, but this way we can get some progress information out of the process.
When cache is in a known good state, move forward
Disclaimer: not tested to work since 2010
/**
* HTML5 offline manifest preloader.
*
* Load all manifest cached entries, so that they are immediately available during the web app execution.
* Display some nice JQuery progress while loading.
*
* #copyright 2010 mFabrik Research Oy
*
* #author Mikko Ohtamaa, http://opensourcehacker.com
*/
/**
* Preloader class constructor.
*
* Manifest is retrieved via HTTP GET and parsed.
* All cache entries are loaded using HTTP GET.
*
* Local storage attribute "preloaded" is used to check whether loading needs to be performed,
* as it is quite taxing operation.
*
* To debug this code and force retrieving of all manifest URLs, add reloaded=true HTTP GET query parameter:
*
*
*
* #param {Function} endCallback will be called when all offline entries are loaded
*
* #param {Object} progressMonitor ProgressMonitor object for which the status of the loading is reported.
*/
function Preloader(endCallback, progressMonitor, debug) {
if(!progressMonitor) {
throw "progressMonitor must be defined";
}
this.endCallback = endCallback;
this.progressMonitor = progressMonitor;
this.logging = debug; // Flag to control console.log() output
}
Preloader.prototype = {
/**
* Load HTML5 manifest and parse its data
*
* #param data: String, manifest file data
* #return Array of cache entries
*
* #throw: Exception if parsing fails
*/
parseManifest : function(data) {
/* Declare some helper string functions
*
* http://rickyrosario.com/blog/javascript-startswith-and-endswith-implementation-for-strings/
*
*/
function startswith(str, prefix) {
return str.indexOf(prefix) === 0;
}
var entries = [];
var sections = ["NETWORK", "CACHE", "FALLBACK"];
var currentSection = "CACHE";
var lines = data.split(/\r\n|\r|\n/);
var i;
if(lines.length <= 1) {
throw "Manifest does not contain text lines";
}
var firstLine = lines[0];
if(!(startswith(firstLine, "CACHE MANIFEST"))) {
throw "Invalid cache manifest header:" + firstLine;
}
for(i=1; i<lines.length; i++) {
var line = lines[i];
this.debug("Parsing line:" + line);
// If whitespace trimmed line is empty, skip it
line = jQuery.trim(line);
if(line == "") {
continue;
}
if(line[0] == "#") {
// skip comment;
continue;
}
// Test for a new section
var s = 0;
var sectionDetected = false;
for(s=0; s<sections.length; s++) {
var section = sections[s];
if(startswith(line, section + ":")) {
currentSection = section;
sectionDetected = true;
}
}
if(sectionDetected) {
continue;
}
// Otherwise assume we can check for cached url
if(currentSection == "CACHE") {
entries.push(line);
}
}
return entries;
},
/**
* Manifest is given as an <html> attribute.
*/
extractManifestURL : function() {
var url = $("html").attr("manifest");
if(url === null) {
alert("Preloader cannot find manifest URL from <html> tag");
return null;
}
return url;
},
isPreloaded : function() {
// May be null or false
return localStorage.getItem("preloaded") == true;
},
setPreloaded : function(status) {
localStorage.setItem("preloaded", status);
},
/**
* Check whether we need to purge offline cache.
*
*/
isForcedReload : function() {
// http://www.netlobo.com/url_query_string_javascript.html
function getQueryParam(name) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if (results == null) {
return "";
} else {
return results[1];
}
}
if(getQueryParam("reload") == "true") {
return true;
}
return false;
},
/**
* Do everything necessary to set-up offline application
*/
load : function() {
this.debug("Entering preloader");
if (window.applicationCache) {
this.debug("ApplicationCache status " + window.applicationCache.status);
this.debug("Please see http://www.w3.org/TR/html5/offline.html#applicationcache");
} else {
this.silentError("The browser does not support HTML5 applicationCache object");
return;
}
var cold;
if(this.isPreloaded()) {
// We have succesfully completed preloading before
// ...move forward
forceReload = this.isForcedReload();
if (forceReload == true) {
applicationCache.update();
} else {
this.endCallback();
return;
}
cold = false;
} else {
cold = true;
}
var url = this.extractManifestURL();
if(url === null) {
return;
}
this.progressMonitor.startProgress(cold);
$.get(url, {}, jQuery.proxy(manifestLoadedCallback, this));
function manifestLoadedCallback(data, textStatus, xhr) {
this.debug("Manifest retrieved");
var text = data;
manifestEntries = this.parseManifest(text);
this.debug("Parsed manifest entries:" + manifestEntries.length);
this.populateCache(manifestEntries);
}
},
/**
* Bootstrap async loading of cache entries.
*
* #param {Object} entrires
*/
populateCache : function(entries) {
this.manifestEntries = entries;
this.currentEntry = 0;
this.maxEntry = entries.length;
this.loadNextEntry();
},
/**
* Make AJAX request to next entry and update progress bar.
*
*/
loadNextEntry : function() {
if(this.currentEntry >= this.maxEntry) {
this.setPreloaded(true);
this.progressMonitor.endProgress();
this.endCallback();
}
var entryURL = this.manifestEntries[this.currentEntry];
this.debug("Loading entry: " + entryURL);
function done() {
this.currentEntry++;
this.progressMonitor.updateProgress(this.currentEntry, this.maxEntries);
this.loadNextEntry();
}
this.debug("Preloader fetching:" + entryURL + " (" + this.currentEntry + " / " + this.maxEntry + ")");
$.get(entryURL, {}, jQuery.proxy(done, this));
},
/**
* Write to debug console
*
* #param {String} msg
*/
debug : function(msg) {
if(this.logging) {
console.log(msg);
}
},
/**
* Non-end user visible error message
*
* #param {Object} msg
*/
silentError : function(msg) {
console.log(msg);
}
};
function ProgressMonitor() {
}
ProgressMonitor.prototype = {
/**
* Start progress bar... initialize as 0 / 0
*/
startProgress : function(coldVirgin) {
$("#web-app-loading-progress-monitor").show();
if(coldVirgin) {
$("#web-app-loading-progress-monitor .first-time").show();
}
},
endProgress : function() {
},
updateProgress : function(currentEntry, maxEntries) {
}
};

I have also been working on a solution for discovering which file is being cached, and have come up with the following.
.htaccess wrapper for the directory we are grabbing files to appcache.
#.htaccess
<FilesMatch "\.(mp4|mpg|MPG|m4a|wav|WAV|jpg|JPG|bmp|BMP|png|PNG|gif|GIF)$">
SetHandler autho
</FilesMatch>
Action autho /www/restricted_access/auth.php
then my auth.php file returns the file (in chunks) to the browser, but also logs at the same time to the server (I use a DB table) with an earlier declared APPID.
That way while the 'progress' event is detected, an AJAX call can be made to retrieve the last entry for APPID, which contains the file name and how much data has been sent.
The advantage of using this method is that its transparent to other methods accessing the files in the '.htaccess wrapped' folder, and in my case also includes authentication.
When not authorized to access a file for whatever reason I return 'Not Authorized' headers.