Updated step-4

Author: gokulkrishh

src/App.css

@@ -229,4 +229,9 @@
 
 .offline__container img {
   max-width: 100%;
+}
+
+.offline i {
+  margin-bottom: 20px;
+  display: block;
 }

src/Menu.js

@@ -85,7 +85,7 @@ class Menu extends Component {
             <li>
               <NavLink to="/offline">
                 <span className="menu__steps">4</span>
-                Offline
+                App Shell
               </NavLink>
             </li>
             <li>

src/index.js

@@ -5,7 +5,7 @@ import App from './App';
 import Introduction from './step-1/Introduction';
 import Setup from './step-2/Setup';
 import ServiceWorker from './step-3/ServiceWorker';
-import Offline from './step-4/Offline';
+import AppShell from './step-4/AppShell';
 import Push from './step-5/Push';
 import BGSync from './step-6/BGSync';
 import Finish from './step-7/Finish';
@@ -22,7 +22,7 @@ ReactDOM.render(
       <Route path="/introduction" component={Introduction} />
       <Route path="/setup" component={Setup} />
       <Route path="/serviceworker" component={ServiceWorker} />
-      <Route path="/offline" component={Offline} />
+      <Route path="/offline" component={AppShell} />
       <Route path="/push" component={Push} />
       <Route path="/bgsync" component={BGSync} />
       <Route path="/finish" component={Finish} />

src/step-3/ServiceWorker.js

@@ -76,7 +76,7 @@ self.addEventListener('fetch', function (event) {
         <h1>3. Service Worker</h1>
         <p>A service worker is a event driven worker which runs in the background and sits in between your application and the browser. It can intercept and handle the network requests for the registered domain. It doesn't have <span className="hightlight bold no--bg">DOM</span> access.</p>
         <Note type="notes">
-          <p><span>Note: </span> Service worker will work only when the page is served via https. For testing and development purposes it works in <span className="hightlight bold no--bg">http://localhost</span>.</p>
+          <p><span>Tips: </span> Service worker will work only when the page is served via https. For testing and development purposes it works in <span className="hightlight bold no--bg">http://localhost</span>.</p>
         </Note>
 
         <p>Know more about <a href="https://github.com/w3c/ServiceWorker/blob/master/explainer.md" target="_blank">service worker</a>.</p>

src/step-4/Offline.js src/step-4/AppShell.jssrc/step-4/Offline.js renamed to src/step-4/AppShell.js

@@ -1,36 +1,46 @@
 import React, {Component} from 'react';
 import Note from '../Note';
-import appShell from './app-shell.png';
+import appShellImg from './app-shell.png';
 import appOffline from './offline-app.png';
+import cachedResources from './cached-resources.png';
 
-class Offline extends Component {
+class AppShell extends Component {
   render() {
     return(
       <div className="offline">
-      	<h1>Offline</h1>
-      	<p>Making an application to work in offline is powerful feature. By following app shell architecture, we can achieve fast and more reliable user interface.</p>
-
-      	<h2>What is App Shell Architecture?</h2>
-      	<p>An app shell architecture is minimal level <span className="hightlight bold no--bg">HTML, CSS, Javascript</span> required to show the application user interface. By caching the app shell, application loads fast and repeated visits loads even faster.</p>
-
+      	<h1>What is App Shell Architecture?</h1>
+      	<p>An app shell architecture is minimal level <span className="hightlight bold no--bg">HTML, CSS, Javascript</span> required to show the application user interface. By caching the app shell, application loads faster on the initial load and even faster on repeated visits.</p>
+        
         <i>Note: To save some coding time, App shell is already added to the codelabs sample repository.</i>
 
       	<div className="offline__container">
-      		<img src={appShell} alt="app shell" />
+      		<img src={appShellImg} alt="app shell" />
       	</div>
 
       	<Note type="facts">
           <p><span>Facts: </span> Housing.com used app shell architecture in their <a href="housing.com" target="_blank">progressive web app</a> to load the page 30% faster than before. Read thier full <a href="https://developers.google.com/web/showcase/2016/pdfs/housing.pdf" target="_blank">case study</a>.</p>
         </Note>
+
+        <h2>Offline</h2>
+        <p>Service worker allow us to use cache API to cache the resources and thus by providing offline experience.</p>
 
-        <p>Let the user know when he goes offline is an important feature.</p>
-        
+        <i>Note: Resources cached via cache API can be view in application tab in chrome DevTools. Refer the below image.</i>
+
+        <div className="offline__container">
+          <img className="" src={cachedResources} alt="cached resources" />
+        </div>
+
+        <p>More details about <a href="https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage">Cache API</a>.</p>
+
+        <h2>Taking advantage of built-in events</h2>
+
         <div className="offline__container">
           <img className="" src={appOffline} alt="app offline" />
         </div>
+
       </div>
     );
   }
 }
 
-export default Offline;
+export default AppShell;