Extreme Ends of Mobile Experiences

Today we have two extreme ends for mobile application experiences. The one end is, the native mobile application itself with all native hardware, features, and functionality. Another end is the mobile friendly website displayed in the browser or a mobile web app functioning the same way as the websites do.

Hybrid Solutions

Some intelligent developers have invented “A hybrid” solution. They have used the modern HTML, CSS, and scripting technologies to create an app and then wrapped the entire bundles of code with native properties into mobile OS systems.

Unfortunately, both approaches, i.e., native and hybrid mobile app development end up with the downloadable products on the thin mobile clients. The accumulation of such apps on home screen is confusing users to select frequently that, which should be kept and which should leave for the sake of mitigating mobile constraints like storage, CPU, and screen estate.

Moreover, cross-platform hybrid apps are not competent with ever-changing mobile OS versions and technologies to offer exact native-like experiences.

Mobile App Development At Tech Point of View

At tech point of view, the updates of mobile apps are hardly possible in real-time and automatic. Moreover, changes are not consented with the needs of users in bespoken ways or for the sake of personalized experiences.

Perhaps this the biggest failure of the current technologies to address the actual user experience need in the development and the iteration processes taking place along with the progressive usage.

It is not easy to comprehend without a relevant example so let’s think of location-based personal experiences. For instance, you want to deliver location oriented push notifications considering all personalized choice made before by the user.

Keeping the cache, history of surfing, activities were done, and all blend with location data is hardly possible with encapsulated web app or natively residing mobile app. In fact, these all demand enough time, interactions, and choices to make.

Take as examples, some applications:

  • Adobe AIR Applications
  • Chrome Packaged Applications
  • Firefox OS Packaged Applications

some apps:

  • Windows Store Apps
  • Cordova/PhoneGap and Crosswalk Apps
  • BlackBerry WebWorks Apps
  • WebOS Apps
  • W3C Widgets
  • And many others in the line

These all intended to serve excellence at tech point of views, but bringing all on a mobile device at the same time is nearly impossible. Moreover, the giving up “Likability” of the web for the sake of “The Appiness” while using these apps offline may distract users to lean on them.

The Birth of Progressive Web Apps & Progressive App Development Technologies

Therefore, Google engineer Alex Russell in June 2015 has espoused an idea first and coined a term, “The Progressive Web Apps” for comprehension.

It Starts with Websites

According to the concept, the process of the progressive web app formation begins as tabs in the Chrome. A website with a valid URL turns into a mobile app progressively.

Prospective Candidate Sites

The websites, which you chose or allow, sending you the important and useful notifications, can be good candidates for your progressive web apps over the time.

Similarly, websites or shopping carts/e-commerce stores, which are residing on the home screen of your mobile devices as your favorites and frequently used sites, have rights to be your progressive web apps with the pace of time.

The Formation of Progressive Web App

Since these websites have all right vitamins, they ask you for your permissions to reside on the home screen, in your taskbar/task switcher, or in your notification tray. These potential websites, which are going to be progressive web apps, ask your permissions on each addition of the new capability and your personal choices/likes/dislikes etc.

Thus, your progressively converted websites into web apps are highly personalized, not customized by any developer. It will cost you nothing and saves your frequent visits of the mobile app marketplaces at all.

The most beautiful thing with the progressive web app is that it is the combination of

(1) The URL and links, which are the core part of the web and for the search engines/bots.
(2) The native-like user experiences for the human users.
It has markup & styling for maximum accessibility, rich UIs, and system capabilities through the functional core
Amazingly, all is available without spending a single penny in mobile marketplaces, and implementation is possible without any permission like license.

Technicality behind the Progressive Web App

If we look at the recently developed progressive web apps or websites for the purpose, have some distinguish attributes those make them fit for the intended purposes. Those attributes are:

  • Responsive web design fit for all screens, large to tiny
  • Offline capability achieved through “Service Workers” in a progressive manner
  • Native app like experiences and interactions possible through adoption of a Shell as well as Content application model, particularly for apps like navigations and interactions
  • Always Updated because of Service Worker processes for continuous updates
  • Safe and secure because TLS like service requirements due to Service Worker and preventing application from snooping
  • Index-able or searchable on the web thanks to W3C manifests and registration scopes for Service Worker
  • With re-engaging properties like Push Notifications and other UIs accessibility
  • With installation properties to select users the browser options to keep or let go options when asked for
  • Power of URL makes progressive web apps linkable, and social share is the desired characteristic

are beginning their life as a regular tab in the browser of the user devices. These sites don’t have any super power except some additional features and functionality added such as:
(1) Manifest
(2) Service Workers
(3) TLS
(4) Responsive Design

Manifest Concept in Progressive App Development

It is JSON file to depict useful Meta Data regarding the app like name and icon, launch and configuration, etc. so it can give more native app-like experiences. Therefore, its coding is crucial. For the detailed properties, you can visit W3C Web App Manifest Draft and realize how it can be powerful when implemented righteously.

Service Workers Concept in Progressive App Development

Why we need service workers

Unlike native mobile apps, the HTML documents of a mobile friendly website start loading over the subsequent HTTP requests. Thus, web content is not loading at a time or with a single request and may interrupt when the Internet connectivity is.
In order to redress this issue, the Service Worker is designed with Web Worker context, which is starting by a runtime when navigations are about to occur.

Mechanism of Service Workers

In its mechanism, the events, which are corresponding to the Internet or network requests redirected to the worker and responses generated by the workers that might over-ride default network stack behavior.
Thus, Service Workers stay in between the Internet/network and the document renderer/device and supplement the content needed for the documents even the device is offline.
However, the same attributes present in the HTML5 Application Cache, but its unrecoverable errors are leading it to the failure. Therefore, services workers are designed such a way that the errors are always recoverable.

Useful Properties of Service Workers

Apart from these, Service Workers have many other distinguish properties such as:

  • Service Workers always triggered and kept alive by their relationship to events, not by the documents
  • Service Workers are generic
  • They are event-driven and with the time-limited script contexts, which are running at an origin
  • They have natural endpoints for a range of runtime services that may outlive the context of a particular document

Thus, Service Worker is capable of

  • Handling the Push Notifications
  • Background data synchronization
  • Responding to resource requests from other origins
  • Receiving centralized updates to expensive-to-calculate data like geolocation or gyroscope

These all is possible, as a Service Worker has an associated:

  • State
  • Script URL
  • Containing service worker registration
  • An ID or a UUID
  • Lifecycle events
  • Script resource map
  • Skip waiting for flag
  • Imported scripts updated flag

Life Time of a Service Worker

The lifetime of a Service Worker is relying on the execution lifetime of events. It is certainly not with the references held by Service Worker clients to the “ServiceWorker” object.

Application Shell Architecture Concept in Progressive App Development

Besides the Service Workers, the Application Shell Architecture brings speed and awesome functionality in the Progressive Web Apps so what is the Application Shell Architecture after all.

The Service Workers have always stored a sort of basic user interface for the respective web application that it can serve instantly at the front end. This basic interface is the “Shell” of the application and offers content a place to load in appropriate ways and manner.
In simple words, it is a static frame for dynamic content loading. The Shell and content both are cached by the Service Workers. In sequence, Shell Architecture is loading first and content later on in dynamic ways.

The Shell is a bundle of code that is keeping locally, once it loaded at first instance, and it is pulling content in it dynamically.
Thus, the Shell Architecture keep the users engage on the screen while loading the rest of content as well as in an asynchronous way whenever needed.

Apparently, the Shell Architecture is deciding how the Progressive Web Apps should look. Whereas the web manifest is adding something, more simply by reducing the friction between the OS of the device and the web or web services. It is offering a hook into the underlying operating system and becoming more like native apps.

Thus, the Progressive Web Apps are permanently throwing the Web vs. Native tussle aside and bringing the advancements, which are not possible with any existing Mobile App Development technology or concept.

Finally,

If you are scrappy enough to bring such advancements without much indulging and spending on native mobile apps or cross-platform application, yet wish to do all through your responsive website or the web application, Addon Solutions has perfect solutions for you.

Our Progressive Web App developers know how to deal with intricate technicality with a budgeted time, resources, and money in favor of our patrons locate anywhere else across the globe.

Of course, we welcome your thoughts on the Progressive App Development and some good comments to acknowledge our readers further through the comment box below.

Share This: