Screencast: Offline Applikationen Teil 2

In dieser Woche zeigt Ryan in seinem zweiten Teil zu Offline-Applikationen wie z.B. HTML5 Storage, zum speichern von Offline-Daten genutzt werden kann.

 

Download:

Download(27.2 MB, 14:51)
Alternativer Download für iPod & Apple TV(25.1 MB, 14:51)

 

Resourcen:

 

Quellcode:

[bash]
curl https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js > public/javascripts/jquery.tmpl.js
curl https://github.com/wycats/jquery-offline/raw/master/lib/jquery.offline.js > public/javascripts/jquery.offline.js
curl https://github.com/wycats/jquery-offline/raw/master/lib/json.js > public/javascripts/json.js
[/bash]

[ruby]
# items_controller.rb
respond_to :html, :json

def index
@items = Item.all
respond_with(@items)
end
[/ruby]

[html]
<!– layouts/application.html.erb –>
<%= javascript_include_tag :defaults, "jquery.tmpl", "json", "jquery.offline" %>

<!– items/index.html.erb –>
<script type="text/html" id="item_template">
<li>${item.name}</li>
</script>
<ol id="items">
<li><em>Loading items…</em></li>
</ol>
[/html]

[javascript]
// application.js
$(function() {
if ($.support.localStorage) {
$(window.applicationCache).bind("error", function() {
console.log("There was an error when loading the cache manifest.");
});
if (!localStorage["pendingItems"]) {
localStorage["pendingItems"] = JSON.stringify([]);
}
$.retrieveJSON("/items.json", function(data) {
var pendingItems = $.parseJSON(localStorage["pendingItems"]);
$("#items").html($("#item_template").tmpl(data.concat(pendingItems)));
});
$("#new_item").submit(function(e) {
var pendingItems = $.parseJSON(localStorage["pendingItems"]);
var item = {"data":$(this).serialize(), "item":{"name":$("#item_name").val()}};
$("#item_template").tmpl(item).appendTo("#items");
pendingItems.push(item);
localStorage["pendingItems"] = JSON.stringify(pendingItems)
$("#item_name").val("");
sendPending();
e.preventDefault();
});
function sendPending() {
if (window.navigator.onLine) {
var pendingItems = $.parseJSON(localStorage["pendingItems"]);
if (pendingItems.length > 0) {
var item = pendingItems[0];
$.post("/items", item.data, function(data) {
var pendingItems = $.parseJSON(localStorage["pendingItems"]);
pendingItems.shift();
localStorage["pendingItems"] = JSON.stringify(pendingItems)
setTimeout(sendPending, 100);
});
}
}
}
sendPending();
$(window).bind("online", sendPending);
} else {
alert("Try a different browser.");
}
});
[/javascript]

Screencast: Offline Applikationen Teil 1

Eine Webapplikation auch offline verfügbar zu haben bringt einige Vorteile. Ryan zeigt diese Woche wie dies mit rack-offline bewerkstelligt werden kann. Er zeigt auch auf welche Dinge man achten muss, um Fehler zu vermeiden.

 

Download:

Download(18.8 MB, 10:44)
Alternativer Download für iPod & Apple TV(17.5 MB, 10:44)

 

Resourcen:

 

Quellcode:

[ruby]
# Gemfile
gem "rack-offline"

# config/routes.rb
match "/application.manifest" => Rails::Offline

# config/application.rb
ENV["RAILS_ASSET_ID"] = "" # disable timestamps at end of asset files for offline browsing

# config/environments/development.rb
config.cache_classes = true # to temporarily simulate production
[/ruby]

[html]
<!– layouts/application.html.erb –>
<html manifest="/application.manifest">
[/html]

[javascript]
// application.js
$(function() {
$(window.applicationCache).bind("error", function() {
alert("There was an error when loading the cache manifest.");
});
});
[/javascript]