Skip to content
This repository was archived by the owner on Sep 10, 2022. It is now read-only.

Commit f1b9ae3

Browse files
committed
Minor additions to the readme
1 parent ed58db0 commit f1b9ae3

File tree

1 file changed

+14
-2
lines changed

1 file changed

+14
-2
lines changed

README.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# Application shell
1+
# Service Worker Application shell architecture
22

3-
A sample web app shell demonstrating a shell + content architecture using [Service Worker](http://www.html5rocks.com/en/tutorials/service-worker/introduction/). This allows you to offline your 'shell', gaining performance advantages.
3+
A sample web app shell demonstrating a shell + content architecture using [Service Worker](http://www.html5rocks.com/en/tutorials/service-worker/introduction/). This allows you to offline your 'shell', gaining performance advantages. More info coming soon.
44

55
## Goals
66

@@ -38,6 +38,18 @@ $ gulp dev
3838

3939
You will need to use AppEngine to serve the contents of the directory.
4040

41+
## Philosophy
42+
43+
[Service Workers](http://www.html5rocks.com/en/tutorials/service-worker/introduction/) are fantastic for offline caching but they also offer significant performance wins in the form of instant loading for repeat visits. This is possible with just a few changes to our overall application’s UI architecture.
44+
45+
We can offline cache our application shell without the network being present and populate the content for it using JavaScript. This allows us to get meaningful pixels from our UI on the screen without the network, even if our content eventually comes from there. Think of it as displaying regions of the screen where toolbars and cards will eventually be populated very quickly and then loading in the rest of the content progressively.
46+
47+
### Tips for your application shell
48+
49+
In a [Progressive webapp](https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/), everything necessary to load the the simplest "shell" of your UI consists of HTML, CSS and JavaScript. Keep this shell as lean as possible. Some of the will come from your application’s index file (inline DOM, styles) and the rest may be loaded from external scripts and stylesheets. Together, they are all you need to display a simple, static app. It’s important to keep the shell of your webapp learn to ensure that some inline static structural content can be displayed as soon as the webapp is opened, regardless of the network being available or not.
50+
51+
A static webapp that always displays the same content may not be what your users expect - it may well be quite dynamic. This means the app may need to fetch data specific to the user’s current needs so this data can come from the network / a server-side API but we logically separate this work for our app from the application shell. When it comes to offline support, structuring your app so that there’s a clear distinction between the page shell and the dynamic or state-specific resources will come in very handy.
52+
4153
## License
4254

4355
Copyright 2015 Google, Inc.

0 commit comments

Comments
 (0)