Application work offline

The requirement of the application is to work offline because PLT app work in the area where there is no internet or very low internet. So should make the whole application work offline so that the users can access the application even when they are not connected to the internet. Use the app data, make the changes and sync the data when they find the internet connection. So for implementing this feature, I tried the following things:

• rack-offline gem in rails for offline feature
• HTML 5 offline feature (Offline API)

rack-offline gem

rack-offline gem is a Rack and Rails plugin for building offline web applications. I use rack-offline gem with HTML offline feature. I use the App Cache technology that is used to store the application data for the offline working of the application. It generate the file called manifest file which is a simple text file that lists the resources the browser should cache for offline access. So after searched about it I start working on it.

Implementing the rack-offline

Issues and their relative solution

I use rack-offline in our application with app-cache but the documentation I follow is not up-to-dated so I face some problems. One of them is to include the application manifest in the route.rb file, we use

get "/application.manifest" => Rails::Offline
instead of 
match "/application.manifest" => Rails::Offline

Yayy! after solving this bug finally my main welcome page is working offline. But now my next problem is how to include the next pages to work offline. I have no idea how to do so because I already add the manifest attribute in the application.html.erb file that is common for all the views.

Now what next? So I start finding the way to include the other webpages. While searching I found that include the assets in the public folder of the app to include them in the manifest file to cache the assets. So I include the assets in the public folder then run the application then I found that our articles page that shows all the articles is also working offline.

Then my next move is to find the manifest file, I searched a lot but did not find the manifest file in the application. It is not shown in the browser, but our need is to include the files in the manifest file. So I tried alot but did not get any solution. I also concern this with my mentor they also have not any idea of this. I will not move forward until I find the way to include the all other web pages. After searching about this finally, I found a logic that will include your assets automatically and generate your manifest file. The code is listed below:

task :generate_appcache_file => ['deploy:precompile_assets', 'html5_manifest']
desc "Create html5 manifest.appcache"
task :html5_manifest => :environment do
puts 'Creating appcache manifest file...'
File.open("public/manifest.appcache", "w") do |f|
f.write("CACHE MANIFEST\n")
f.write("# Version #{Time.now.to_i}\n\n")
f.write("CACHE:\n")
assets = Dir.glob(File.join(Rails.root, 'public/assets/**/*'))
assets.each do |asset|
  if File.extname(asset) != '.gz' && File.extname(asset) != '' && File.extname(asset) != '.json'
    filename_path = /#{Rails.root.to_s}\/public\/(assets\/.*)/.match(File.absolute_path(asset))[1].to_s
    # f.write("assets/#{File.basename(asset)}\n")
    f.write(filename_path.concat("\n"))
  end
end
f.write("\nNETWORK:\n")
f.write("*\n")
f.write("http://*\n")
f.write("https://*\n")
end
puts 'Done.'
end

namespace :deploy do
task :precompile_assets do
require 'fileutils'
if File.directory?("#{Rails.root.to_s}/public/assets")
  FileUtils.rm_r "#{Rails.root.to_s}/public/assets"
end

puts 'Precompiling assets...'
puts `RAILS_ENV=production bundle exec rake assets:precompile`
puts 'Done.'
end
end

Add this code in generate_appcahe_manifest.rake file and put it in /lib/tasks folder. And Run the following command.

$ rake generate_appcache_file

It will generate a manifest file in the public folder. Now we can add the files we want to store in cache for offline working. Now all the web pages are showing while we are not connected to the internet like category index page, language index page etc but they shows the pages offline when we back the pages to previous state. The browser behaves strange with the app while it work offline.

Problem with offline the multiple pages

Now the simple pages work offline but browser behave differently and also did not get the way to add the multiple-pages app while App-Cache is mainly used for making the single page application to work offline. So I did not find the way to add the other pages like to add new article, edit it etc to work offline. So the App-Cache technology is for the making the single page application to work offline.

It did not solve our problem completely but we tried and learn many things. Our main pages are working offline but our requirement is to make the whole application to work offline. So will find the other method that helps to implement it successfully. Thanks :).