How to make an Ember.js app offline with server sync when available?

Making an Ember.js app work offline with server synchronization requires implementing client-side storage that can sync data when connectivity is restored. This enables users to continue working with your app even without internet access.

Using LocalStorage Adapter

The ember-localstorage adapter provides basic offline storage capabilities by storing data in the browser's localStorage:

App.store = DS.Store.create({
   revision: 11,
   adapter: DS.LSAdapter.create()
});

Advanced Offline Storage with IndexedDB

For more robust offline functionality, use IndexedDB which provides better performance and storage capacity:

App.Store = DS.SyncStore.extend({
   revision: 10,
   adapter: DS.IndexedDB.adapter({
      mappings: {
         person: App.Person,
         persons: App.Person,
         contact: App.Contact,
         contacts: App.Contact
      }
   })
});

Complete Offline-First Implementation

Here's a more comprehensive approach that handles both offline storage and server synchronization:

// Define your offline-capable store
App.ApplicationStore = DS.Store.extend({
   adapter: DS.RESTAdapter.extend({
      namespace: 'api/v1',
      
      // Handle network failures gracefully
      ajax: function(url, type, hash) {
         return this._super(url, type, hash).catch(function(error) {
            if (error.status === 0) {
               // Network error - app is offline
               console.log('App is offline, using cached data');
               return App.OfflineStorage.get(url, type, hash);
            }
            throw error;
         });
      }
   })
});

// Offline storage manager
App.OfflineStorage = {
   set: function(key, data) {
      localStorage.setItem(key, JSON.stringify(data));
   },
   
   get: function(key) {
      var data = localStorage.getItem(key);
      return data ? JSON.parse(data) : null;
   },
   
   sync: function() {
      // Sync offline changes when online
      var pendingChanges = this.get('pendingChanges') || [];
      
      pendingChanges.forEach(function(change) {
         // Send changes to server
         App.store.push(change.type, change.data);
      });
      
      localStorage.removeItem('pendingChanges');
   }
};

Handling Online/Offline Detection

Add network status detection to automatically sync when connectivity returns:

App.NetworkManager = Ember.Object.extend({
   isOnline: navigator.onLine,
   
   init: function() {
      var self = this;
      
      window.addEventListener('online', function() {
         self.set('isOnline', true);
         App.OfflineStorage.sync();
      });
      
      window.addEventListener('offline', function() {
         self.set('isOnline', false);
      });
   }
});

Key Implementation Steps

To implement offline functionality with server sync:

• Choose Storage: LocalStorage for simple data, IndexedDB for complex applications
• Handle Failures: Catch network errors and fallback to cached data
• Queue Changes: Store offline modifications for later synchronization
• Detect Connectivity: Monitor online/offline events for automatic syncing
• Resolve Conflicts: Handle data conflicts when syncing with server

Conclusion

Ember.js offline apps require combining client-side storage adapters with network detection and synchronization logic. Use LocalStorage for simple cases or IndexedDB for robust offline-first applications that sync seamlessly when connectivity returns.