What is an App Shell


Many sites and apps,
especially those built on PHP, Ruby on Rails, JSP and so
on, assemble the page and all of its content as one before
sending it down to the browser. Progressive web apps change this
model by separating the parts that change often essentially the content
from the parts that don’t change often, typically called the application shell. The app shell can download and
display the content and may even store the content in a local
database so that it can operate on open slow networks or even if there is
no network connection available. The app shell is the minimum HTML,
CSS and JavaScript that is required to power the
user interface of a progressive web app and is one of the component that
ensures reliably good performance. Its first load should be extremely
quick and then immediately be cached. On repeat visits this allows you
to get meaningful pixels on screen without the network, even if your
content eventually comes from there. App Shell architecture separates
the core application infrastructure and the UI from the data. All of the UI and infrastructure is
cached locally using a service worker. So that on subsequent loads
the progressive web app only needs to retrieve the necessary data,
instead of having to load everything. Put another way, the app shell
is similar to the bundle of code that you’d publish to an app
store when building a native app. It is the core components necessary
to get your app off the ground but does not likely contain any data. Using the app shell architecture and caching it’s resources using a service
worker allows you to focus on speed, giving your progressive web app similar
properties to that of native apps. Instant loading, regular updates, and
all without the need of an app store. Service workers are powerful for
offline caching but they also offer significant performance
went in the form of instant loading for repeat visits for your sites or app. You can cache your application shell so
that it works offline and populate it’s content using JavaScript.

2 thoughts on “What is an App Shell

Leave a Reply

Your email address will not be published. Required fields are marked *