Javascript – Dynamically Trigger HTML5 Cache Manifest file

cachinghtmljavascriptoffline

I am using the new cache manifest functionality from HTML5 to cache my web app so it will work offline. The content is cached automatically when the page is loaded with the following html element:

<html lang="en" manifest="offline.manifest">

This works fine. However, I want to give my users the option of whether they want the content cached offline. So, here is my question:

Is there any way to trigger that an application be cached at runtime, using JavaScript, and not have it automatically done when the page is loaded.

For example, something like this (using jquery):

—————-index.html————–

<head>
 <meta charset="utf-8" />

 <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
 <script type="text/javascript" src="Main.js"></script> 

</head>
<body>

 <button id="cacheButton">Cache Page</button>

</body>
</html>

———Main.js———

$(document).ready(
 function()
 {
  $('#cacheButton').click(onCacheButtonClick);
 }
)

function onCacheButtonClick(event)
{
 console.log("Setting Offline Manifest");
 $('#htmlRoot').attr("manifest","offline.manifest");
}

————-offline.manifest————-

CACHE MANIFEST

#version .85

#root
index.html
scripts/main.js

#jquery assets
http://code.jquery.com/jquery-1.4.4.min.js

Basically, when the button is clicked, I dynamically set the manifest attribute of the html element. This works (in the sense the element is set), but it does not cause the browser to then cache the page.

Any suggestions?

Best Answer

You dynamically trigger caching by adding an iframe that points to an empty page containing the actual cache manifest.

offline.html:

<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
    <title></title>
</head>
<body>
</body>
</html>

Make sure to add index.html to the cache manifest. Then just add something like:

<iframe src="offline.html" width="0" height="0">

to document.body dynamically to trigger caching.

Related Solutions

Javascript – How to merge properties of two JavaScript objects dynamically

ECMAScript 2018 Standard Method

You would use object spread:

let merged = {...obj1, ...obj2};

merged is now the union of obj1 and obj2. Properties in obj2 will overwrite those in obj1.

/** There's no limit to the number of objects you can merge.
 *  Later properties overwrite earlier properties with the same name. */
const allRules = {...obj1, ...obj2, ...obj3};

Here is also the MDN documentation for this syntax. If you're using babel you'll need the babel-plugin-transform-object-rest-spread plugin for it to work.

ECMAScript 2015 (ES6) Standard Method

/* For the case in question, you would do: */
Object.assign(obj1, obj2);

/** There's no limit to the number of objects you can merge.
 *  All objects get merged into the first object. 
 *  Only the object in the first argument is mutated and returned.
 *  Later properties overwrite earlier properties with the same name. */
const allRules = Object.assign({}, obj1, obj2, obj3, etc);

(see MDN JavaScript Reference)

Method for ES5 and Earlier

for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }

Note that this will simply add all attributes of obj2 to obj1 which might not be what you want if you still want to use the unmodified obj1.

If you're using a framework that craps all over your prototypes then you have to get fancier with checks like hasOwnProperty, but that code will work for 99% of cases.

Example function:

/**
 * Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
 * @param obj1
 * @param obj2
 * @returns obj3 a new object based on obj1 and obj2
 */
function merge_options(obj1,obj2){
    var obj3 = {};
    for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
    for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
    return obj3;
}

Javascript – Event binding on dynamically created elements

As of jQuery 1.7 you should use jQuery.fn.on with the selector parameter filled:

$(staticAncestors).on(eventName, dynamicChild, function() {});

Explanation:

This is called event delegation and works as followed. The event is attached to a static parent (staticAncestors) of the element that should be handled. This jQuery handler is triggered every time the event triggers on this element or one of the descendant elements. The handler then checks if the element that triggered the event matches your selector (dynamicChild). When there is a match then your custom handler function is executed.

Prior to this, the recommended approach was to use live():

$(selector).live( eventName, function(){} );

However, live() was deprecated in 1.7 in favour of on(), and completely removed in 1.9. The live() signature:

$(selector).live( eventName, function(){} );

... can be replaced with the following on() signature:

$(document).on( eventName, selector, function(){} );

For example, if your page was dynamically creating elements with the class name dosomething you would bind the event to a parent which already exists (this is the nub of the problem here, you need something that exists to bind to, don't bind to the dynamic content), this can be (and the easiest option) is document. Though bear in mind document may not be the most efficient option.

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

Any parent that exists at the time the event is bound is fine. For example

$('.buttons').on('click', 'button', function(){
    // do something here
});

would apply to

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>

Best Answer

Related Solutions

Javascript – How to merge properties of two JavaScript objects dynamically

Javascript – Event binding on dynamically created elements

Related Topic