Rack-Offline for Mobile HTML5 cached App with Rails Asset-Pipeline

 

When you delve into setting up your rails application.manifest for caching your iPhone mobile HTML5 app in offline modus you will stumble upon rack-offline from wycats. A great tool. Here are some tipps for getting this up and running with rails 3.1 and the asset pipeline - quickly.

In your routes.rb file you put in a block and syntax like this:

Yourapp::Application.routes.draw do  
offline = Rack::Offline.configure do  
   cache "index.html"  
   cache "assets/mobile.css"  
   cache "assets/background.png"  
   cache "assets/mobile.js"  
   network "/"  
end   
match "/application.manifest" => offline  

I like to explicitly list all the files that I am loading for the offline cache . This forces me to ensure brevity (as in the number of files to load) and to use the rails asset pipeline to concatinate all relevant files: Try to serve only one CSS and one .JS file for your mobile UI.

In your application.html.erb (or whatever file you serve as a mobile starting page) you extend the HTML tag:

<html manifest ="/application.manifest">

The rack-offline gem was released before all this rails 3.1 asset pipeline beauty. It was featured in Episode 248 of Railscasts: Offline Apps.

If you are on Rails 3.1 you are probably going wild with sass & scss and coffeescript and love the flexible syntax. So an extra step to compile your app for offline caching for a mobile html5 app can be quite a pain. You will want a setup where you can set this up once and more or less forget about it. In production the offline app caching should always be working but in development you will want to see the changes to your code without switching on and off the application.manifest all the time. I found that the rack-offline gem docs were not so clear how to set it up, and tore my hair outs for half an hour.

Mind you - in my first mobile app I had an extremely funky workflow to deal with the offline cache and revisions.

Hope this saves you some time. Also watch Ryan Bates Screencast - It will give you insights into some of the gotchas you might encounter when working with offline caching.

Author: , igumbi.com. You can find me on twitter: @smtm, and as roland.oth On Facebook.
igumbi online Hotelsoftware - jetzt unverbindlich probieren
Hotelsoftware Demo: System Übersicht der Funktionen

igumbi ist eine online Hotelsoftware mit einem einfachen und schnellen Buchungstool für Ihre Website. Mit dynamischen Preisen auf Ihrer Website und in den Portalen erhöhen Sie Ihren Umsatz und Gewinn.

Wir steigern Ihre provisionsfreien Direktbuchungen. Sie sparen Zeit und haben mit der iPhone App unterwegs Zugriff auf Ihre Daten.

Testen Sie die igumbi Hotelsoftware für 30 Tage. Eine Kreditkarte ist nicht erforderlich.
Diese Artikel könnten Sie auch interessieren:
  • Apple iPad Airprint Die Nutzung der igumbi Hotelsoftware auf Apple iPad und iPhone nimmt zu - da darf auch das Drucken via Airprint nicht fehlen: How-To zum Drucker Einrichten
  • Mobile Hotel Website - richtig gemacht Die mobile Hotel Website, wird immer wichtiger. Zugriffe steigen rasant. Mit richtigen Javascript und CSS Techniken bleiben die Ladezeiten schnell
  • Klickbare Telefonnummer auf Ihrer mobilen Website Steht Ihre Telefonnummer auf jeder Seite Ihrer Website? Machen Sie daraus einen klickbaren Link! Verlinken Sie auch Ihren Skype-Namen!
  • Hotel Homepage ohne Flash Werfen Sie Flash raus aus Ihrer Hotelwebsite: Verwenden Sie Javascript für Animationen und Bildgallerien und ein CMS für Ihre Seiten.
  • YAML i18n language files for JSON Rails internationalization (i18n) tip for getting your language/locale translations to javascript: parse the i18n YAML files to produce a JSON. For DOM translations
  • Vorteile Cloud Hotelsoftware Hotelsoftware in der Cloud (SaaS) hat viele Vorteile: mobiler Zugriff, iOS App, Verkauf bis zum letzten Zimmer über online Buchungstool und Buchungsportale

Comments

DevRabbit http://www.devrabbit.com/technology/mobile-strategy/
vor almost 8 years

It's nice information about Rack-Offline for Mobile HTML5 cached App .The Article Help me a lot while Developing Mobile App.Thanks for sharing the Article

Add a comment
Required

required, will not be published