PWA & Shell Architecture

Manna

Follow

Sep 7 · 3 min read

Managing multiple front-end clients is a troublesome concern for any product development team. The release planning, delivery timeline and team size everything get effected for this. And still same feature is available in web but not in mobile Or available for iOS but not for android.

And again it requires different skill set front-end teams to deliver same product for different OS.

Everybody knows this very well, so PWA got a huge acceptance and it is the front-end future to focus. If you still do not know about PWA (progressive web apps) development, please check google.

So many places in web likes to describe PWA as just a manifest file of your website that will give the browser capability to add it as icon at your desktop or mobile home screen and open as an application. But it is just a accessibility feature that made it popular to end users. But for developers who want to develop PWA, this is not just a manifest file.

Next generation of Single Page Web Application development

The binding technology of HTML5 gave birth of lots of trend setting front-end JS frameworks like KnockoutJs, AngularJS, React and many more. And hybrid app development got life to save time. But still the native term was hanging in between and customer is not satisfied until you provide them native iOS or android app and similar features in website too.

What is lacking to make a Single Page Web Application act as native app? =>Interaction with OS. (Simple answer).

How HTML5 can interact with OS?

=> Let the browser talk for me with the OS.

Yes, that is the break through. But the issue arises, how the browser will manage all its opened tabs requests to interact with OS.

Web server in Browser

Having a web server in browser means you have a web server in your local machine which can access local resources. But how can you talk with this browser web server from you HTML5 web page.

Service Worker

An interface of the browser web server that allows you to install your remote web servers JS script in it and utilize the capabilities of this local web server.

Fetch API

Gives your web page an ability to discuss with local web server first before going to remote web server. So each and every request from your web page to remote server can be intercepted in this middle local web server layer.

Cache API

Way to use the local OS storage. So you can stage the remote pages/resource from your remote web server to local web server and serve them from local machine, just like a desktop application.

Shell Architecture

The approach of caching your remote pages/resource in local OS is called Shell architecture. Skeleton/Shell of your application becomes available to user from the local machine and it will never require to route to remote server fully.

LocalStorage API & Index DB

Making your PWA work Offline can be done by these features. You can save user inputs in local machine and send it to your remote DB whenever apps get online again.

Push API

How to send notifications to the user when the app is closed? This Push API becomes the bridge between local web server and remote web server and notify the user though your application is not opened.

What else? this is just the beginning of PWA. Most of the browsers are supporting all the features and rest are preparing for that and will be ready with these APIs soon, please check google to know latest achievements.

Thanks, Manna, www.cloudoffice.io