The progressive web application is web apps that consume modern web capability to provide an app-like user experience to the audience. These apps load like a regular web page but provide the feature to work offline, push notification, and device hardware access. In all, they combine the flexibility of the web with the user experience of native applications. 

The keyword “website” has further shed its umbrella over “web applications”. Web development has incorporated more than the static data HTML pages. It has extended to dynamic pages. The continues to progress in the evolution of the web technologies have allowed the web application to bring in more interactivity, native-like experience, and responsive web design.  

While web applications have been designed to be responsive to mobile screens, they usually lag behind when looked on the parameters like speed and features from the native application. First time ever Google Chrome engineer Alex Russell, coined the term “Progressive Web App” to take advantage of the new features offered by the modern browsers and transform the web app to function like a native app in 2015.

Some of the identified features of progressive web apps are 

Progressive: Irrespective of the browser choice, the focus is to provide the application to work for all the users.

Responsive: The web app should fit all the screen sizes: a desktop, mobile, tablet or the forms yet to emerge in the near future. 

Independent of the net connectivity: Native mobile applications are installed on expense if the storage of the device in hand and thus they are faster and deliver a rich experience. Native web app suffers from the factor of dependence on the unreliable and potentially slow internet, and lack of native compiled executable. The idea is to empower service workers to provide the best of these two worlds. Service workers allowed to work offline and also on the slow quality network.

App-like interface: Feel and look like a native mobile application with app-style interaction with other device applications and navigation. 

Fresh: Always up-to-date

Safe: The site URL uses the https protocol for site navigation. 

Discoverable: These web apps should be identified as “applications” as per W3C consortium manifesto and service workers registration scope allows search engines to find them.

Push notifications: Native applications possess the tendency to constantly send push notification. Currently, the web apps only show the pop-up notifications which appear when the users visit and serve the website on a mobile or any other device. The progressive web app should encourage re-engagement of the user and provide push-notifications.

Installable: Allow user to keep the app present on the home screen of their device without the need of installing from the app store.  

Linkable: Easily shared by URL and do not require havoc installations.

An application shell is one way of creating progressive web apps. Such apps are expected to work reliably and load instantly on the user’s screen. The app “shell” is the minimum level of serverless web technology required like HTML, CSS, and Javascript to load the content of the web application and power the user interface. When a web page is cached offline, means the corresponding to a web page is stored in the cache memory of the browser, it is expected to load instantly and ensure reliable good performance on every visit of the user.

For a javascript heavy application, an application shell is a go-to approach. The dynamic content for every page in a web application needs javascript to populate the data. Rest, static content could be brought using the app-shell model. App shell model is useful for bringing in some initial HTML to the device screen to work fast even without internet. 

When and Why to use App Shell Model 

In case, anyone is building a single page app is in a way creating a PWA compliant web page. It is a note to make the PWA is not a technology that any framework would offer. It is a concept of creating an application. 

PWA makes the most of its sense for the application that is not changing its navigation from page to page instead the URL remains the same but the content keeps on changing with varying use cases. 

The benefits of applying PWA architecture with service workers include:

Native App like interaction: By implementing PWA shell model, you can create a web application with mobile application like interface and interaction with device hardware. That too, complemented with offline support.  

Reliable performance and Faster speed: Repeated visits are comparatively quick as the static data and the media files are cached on the first visit and loads from the browser’s cache memory in the corresponding visits. Content may be cached on the first visit but it loads only when required. 

Economical use of data: In a world where connectivity is an expense and data is costly this model is designed to put emphasis on less data usage and encourage data saving. Emphasis is put on judiciously cache large data file, for example, the images and other media files which are non-essential for a particular page. This helps to refrain the browser from downloading more data than what is necessary.