Offline Apps Patterns and Tools

-

Apps capable of running offline provide a great user experience even when there's slow/unreliable or no network/internet available. They also minimize data usage and save battery power when run on mobile devices.

Design Considerations:

  • Upfront, both front and back end must be designed to work offline. 
  • Think about features that cannot work in offline mode.
  • Single users using the app on multiple devices.
  • Automatically sync data (uni/bi-directional) stored locally on the device with the central database once the app is able to connect to the internet. 
  • If the app is allowed to be used from multiple devices, conflicting data changes made by users and any data sync conflicts need to be handled.

To make UI work offline, in the case of Mobile applications, there's nothing to do, but web applications will have to use something called service workers. By implementing a service worker, you can turn a regular web application into a Progressive Web App, making it downloadable and installable, just like a native mobile application.

Progressive Web Apps:

A web app (HTML, CSS, JavaScript) needs a web browser to run and cannot be installed like a native desktop or mobile app. A PWA is a regular web app enhanced with certain web-platform techniques like service worker manifests that can make it run as an installable mobile or desktop app apart from running normally in a web browser. 

Popular SPA frameworks like Angular, React JS, etc., make it easy to build PWAs. 

Advantages of PWA:

  • Cross-platform and no need to maintain a separate code base for each type of OS/device. A single code base can run across iOS, Android, Windows, and on any device.
  • The app can be installed from the browser instead of the device app store on mobile devices.
  • Improve user experience and performance by implementing local caching and offline mode strategies.
Service Worker:
Service workers are JavaScript files that leverage certain browser features to deliver caching and offline capabilities. For instance, they can be used to interact with the local browser cache. It works independently of caching headers specified in server responses.

A service worker loads first on a separate browser thread and intercepts network requests going out from the application. Unlike other JavaScript files that make up an application, the service worker doesn't have access to the web page DOM and is preserved even after the browser tab is closed. 

Offline Storage Options:

localStorage: not recommended for PWAs with performance needs as it's synchronous and blocks the main thread. Apart from storing only strings, with a limit of 5MB, it is inaccessible to service workers. 

IndexedDb: is a javascript-based object-oriented key-value database. Using JavaScript, it can be accessed asynchronously from PWAs.

SQLite: SQLite is popular for storage in mobile apps.

Couchbase Mobile:

Tools and Frameworks:

MongoDB Realm: integrated backend application services for mobile that handle all the complex data conflict resolution and sync. The platform integrates sync between Realm, a mobile database running on the client, and MongoDB Atlas, a DbaaS, on the back end.

Ionic: Complete framework to build a cross-platform single code base that can run as mobile, desktop, and web applications. One single application development team can write and maintain code that will run on iOS, Android, and Windows as a native, web, or desktop app. Ionic framework can be used with MongoDB Realm to build web and mobile apps.

Angular/React JS

Blazor Hybrid: A client-side Blazor app can run on the desktop as a PWA or in an Electron shell but not on mobile. Client-side Blazor apps, when combined with MAUI, can run on mobile with access to the native capabilities of the device. Multi-platform App UI (MAUI) is a .NET cross-platform framework for creating native mobile and desktop apps with C# and XAML. Like Ionic, MAUI provides a write-once run-anywhere developer experience.





Comments

Post a Comment

Popular posts from this blog

Private Cloud Platforms

-
The below services let you   take public cloud infrastructure, private data centers or mix both to build a private cloud on-prem. AWS Outposts and Azure Stack are quite similar in that they essentially take public cloud computing services and extend them into on-premises data centers.  Using these frameworks, services available in public clouds like AWS EC2 , or Azure Virtual Machines can be run on on-premises data centers. You can also use the same monitoring and management tools that you would in the public cloud. Azure Stack Hub Azure Stack Hub brings core cloud services to customers' data centers, like virtual machines, storage, networking, VPN gateway and load balancing, as well as services like functions, containers and database. Certified hardware can be purchased from  a variety of partner vendors, such as HPE, Dell EMC, Cisco, Huawei and Lenovo.   Users need to manage their infrastructure, but professional support from Microsoft is available as part of the p...
Read more

Application Delivery in the cloud

-
Traditional load balancers have lately evolved to become intelligent application delivery controllers (ADC) which implement various techniques to improve performance along with balancing load across a group of backend servers. Some of the techniques include caching content, compression of assets (js files, images etc.), taking over SSL related process from web servers, providing security from DDoS, SQL injection, XSS etc.. ADCs are like one-stop-shop for providing performance and security.  Load balancers for non-HTTP(s) workloads: Azure Traffic Manager: Is a global non-HTTP(s)/DNS load balancer. DNS load balancers provide IP address of an healthy endpoint based on the configured rules. The endpoint can be an application gateway or a load balancer depending on whether SSL offloading or application layer processing is required or not. Azure Load Balancer: is a non-HTTP(s) global (cross-region)  load balancer (aka network load balancer) operates at layer 4 (transport laye...
Read more