Minor tweaks to readme and layouts / views

Matt Gaunt · Matt Gaunt · commit a10574e9f1c6 · 2015-11-03T10:41:09.000Z
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Service Worker Application Shell architecture
 
-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. 
+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.
 
 ## Goals
 
@@ -24,19 +24,26 @@ $ npm install -g gulp nodemon && npm install
 
 ## Usage
 
-### Build
+### Production Build
 
 ```sh
 $ gulp
 ```
 
-### Serve/watch
+### Development Build with Watch
 
 ```sh
-$ nodemon server/app.js && gulp dev
+$ gulp dev
 ```
 
-You will need to use AppEngine to serve the contents of the directory.
+### Serve/watch
+
+Once you've got a production build or development build of gulp done, start the
+server with:
+
+```sh
+$ nodemon server/app.js
+```
 
 ## Why?
 
@@ -48,16 +55,16 @@ We can offline cache our application shell without the network being present and
 
 During the first load experience, our goal is to get meaningful content to the user’s screen as quickly as possible. To achieve this:
 
-* **Server** will send down HTML content the client can render and will use far-future HTTP cache expiration headers to account for browsers without Service Worker support. It will serve filenames using hashes to enable ‘versioning’ and easy updates for later on in the application lifecycle. 
-* **Page(s)** will include inline CSS styles in the document <head> to provide a fast first paint of the application shell. Each page will asynchronously load in the JavaScript necessary for the current view. As CSS cannot be asynchronously loaded in natively, this can be emulated using JavaScript (or something like the Filament Group’s [loadCSS](https://github.com/filamentgroup/loadCSS) project). 
-* **Service Worker** will store a cached entry of the application shell so that on repeat visits, the shell can be loaded entirely from the SW cache unless an update is available on the network. 
+* **Server** will send down HTML content the client can render and will use far-future HTTP cache expiration headers to account for browsers without Service Worker support. It will serve filenames using hashes to enable ‘versioning’ and easy updates for later on in the application lifecycle.
+* **Page(s)** will include inline CSS styles in the document <head> to provide a fast first paint of the application shell. Each page will asynchronously load in the JavaScript necessary for the current view. As CSS cannot be asynchronously loaded in natively, this can be emulated using JavaScript (or something like the Filament Group’s [loadCSS](https://github.com/filamentgroup/loadCSS) project).
+* **Service Worker** will store a cached entry of the application shell so that on repeat visits, the shell can be loaded entirely from the SW cache unless an update is available on the network.
 
 In the background, we will register our Service Worker following this lifecycle:
 
-| Event    | Action                                                                                                                                                          |   
+| Event    | Action                                                                                                                                                          |
 |----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Install  | Cache application shell and other SPA resources                                                                                                                 |   
-| Activate | Clear out old caches                                                                                                                                            |   
+| Install  | Cache application shell and other SPA resources                                                                                                                 |
+| Activate | Clear out old caches                                                                                                                                            |
 | Fetch    | Serve up single page web app for urls.progressively cache future content - unless it’s no-cache header. Cache in a ‘content-cache’ to separate from the web app |  
 
 #### File revision
@@ -78,9 +85,9 @@ should handle the concerns around file revisions, the install/activate questions
 
 ## Tips for your application shell
 
-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. 
+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.
 
-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. 
+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.
 
 ## License
 
diff --git a/server/layouts/app-shell.handlebars b/server/layouts/app-shell.handlebars
@@ -43,7 +43,9 @@ limitations under the License.
   </header>
 
   <!-- Main Content goes here -->
-  <main class="main js-global-main" aria-role="main"></main>
+  <main class="main js-global-main" aria-role="main">
+
+  </main>
 
   <!-- Navigation Drawer -->
   <section class="side-nav js-side-nav">
diff --git a/server/layouts/default.handlebars b/server/layouts/default.handlebars
@@ -38,7 +38,7 @@ limitations under the License.
         Toggle nav menu
       </button>
 
-      <h1 class="header__title">Static Page</h1>
+      <h1 class="header__title">App Shell</h1>
   </header>
 
   <main class="main js-main" aria-role="main">
diff --git a/server/layouts/partial.handlebars b/server/layouts/partial.handlebars
@@ -1,8 +1,6 @@
 <style type="text/css">{{{inlineStyles}}}</style>
 
-<div class="card">
 {{{ body }}}
-<div>
 
 {{#each remoteScripts}}
 <script src="{{this}}" async></script>
diff --git a/server/views/index.handlebars b/server/views/index.handlebars
@@ -1 +1,3 @@
-<h1>Index</h1>
+<div class="card">
+  <h1>Index</h1>
+</div>
diff --git a/server/views/url-1.handlebars b/server/views/url-1.handlebars
@@ -1 +1,3 @@
-<h1>URL 1</h1>
+<div class="card">
+  <h1>URL 1</h1>
+</div>
diff --git a/server/views/url-2.handlebars b/server/views/url-2.handlebars
@@ -1 +1,3 @@
-<h1>URL 2</h1>
+<div class="card">
+  <h1>URL 2</h1>
+</div>
