Updated steps accordingly

Author: gokulkrishh

src/App.css

@@ -198,18 +198,19 @@
   text-align: center;
 }
 
-.hightlight {
+.highlight {
   display: inline-block;
   padding-left: 5px;
   padding-right: 5px;
   background: #f5f5f5;
+  font-size: inherit;
 }
 
-.hightlight.bold {
+.highlight.bold {
   font-weight: 500;
 }
 
-.hightlight.no--bg {
+.highlight.no--bg {
   background: transparent;
   padding: 0;
 }
@@ -231,7 +232,8 @@
   max-width: 100%;
 }
 
-.offline i {
+.offline i,
+.appshell i {
   margin-bottom: 20px;
   display: block;
 }

src/Menu.js

@@ -77,32 +77,32 @@ class Menu extends Component {
               </NavLink>
             </li>
             <li>
-              <NavLink to="/serviceworker">
+              <NavLink to="/appshell">
                 <span className="menu__steps">3</span>
-                Service Worker
+                App Shell
               </NavLink>
             </li>
             <li>
-              <NavLink to="/offline">
+              <NavLink to="/serviceworker">
                 <span className="menu__steps">4</span>
-                App Shell
+                Service Worker
               </NavLink>
             </li>
             <li>
-              <NavLink to="/push">
-                <span className="menu__steps">5</span>
-                Push Notification
+              <NavLink to="/offline">
+                <span className="menu__steps">6</span>
+                Offline
               </NavLink>
             </li>
             <li>
-              <NavLink to="/bgsync">
-                <span className="menu__steps">6</span>
-                Background Sync
+              <NavLink to="/appLike">
+                <span className="menu__steps">7</span>
+                App Like
               </NavLink>
             </li>
             <li>
               <NavLink to="/finish">
-                <span className="menu__steps">7</span>
+                <span className="menu__steps">8</span>
                 Finish
               </NavLink>
             </li>

src/index.js

@@ -4,10 +4,10 @@ import { Router, Route, hashHistory, IndexRoute, IndexRedirect } from 'react-rou
 import App from './App';
 import Introduction from './step-1/Introduction';
 import Setup from './step-2/Setup';
-import ServiceWorker from './step-3/ServiceWorker';
-import AppShell from './step-4/AppShell';
-import Push from './step-5/Push';
-import BGSync from './step-6/BGSync';
+import AppShell from './step-3/AppShell';
+import ServiceWorker from './step-4/ServiceWorker';
+import Offline from './step-5/Offline';
+import AppLike from './step-6/AppLike';
 import Finish from './step-7/Finish';
 import PageNotFound from './PageNotFound';
 import './index.css';
@@ -21,10 +21,10 @@ ReactDOM.render(
       <IndexRedirect to="/introduction" />
       <Route path="/introduction" component={Introduction} />
       <Route path="/setup" component={Setup} />
+      <Route path="/appshell" component={AppShell} />
       <Route path="/serviceworker" component={ServiceWorker} />
-      <Route path="/offline" component={AppShell} />
-      <Route path="/push" component={Push} />
-      <Route path="/bgsync" component={BGSync} />
+      <Route path="/offline" component={Offline} />
+      <Route path="/applike" component={AppLike} />
       <Route path="/finish" component={Finish} />
       <Route path="*" component={PageNotFound} />
     </Route>

src/step-3/AppShell.js

@@ -0,0 +1,26 @@
+import React, {Component} from 'react';
+import Note from '../Note';
+import appShellImg from './app-shell.png';
+
+class AppShell extends Component {
+  render() {
+    return(
+      <div className="appshell">
+      	<h1>What is App Shell Architecture?</h1>
+      	<p>An app shell architecture is minimal level <span className="highlight bold no--bg">HTML, CSS, Javascript</span> required to show the application user interface.</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={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>
+      </div>
+    );
+  }
+}
+
+export default AppShell;

src/step-4/app-shell.png renamed to src/step-3/app-shell.png

@@ -74,15 +74,15 @@ self.addEventListener('fetch', function (event) {
     return(
       <div className="serviceworker">
         <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>
+        <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="highlight bold no--bg">DOM</span> access.</p>
         <Note type="notes">
-          <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>
+          <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="highlight 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>
 
         <h2>How to register a service worker?</h2>
-        <p>A service worker is registered by passing the service-worker file (should be in root directory) in the <span className="hightlight bold">register</span> method which returns a promise like below.</p>
+        <p>A service worker is registered by passing the service-worker file (should be in root directory) in the <span className="highlight bold">register</span> method which returns a promise like below.</p>
         <Highlight lang='javascript' value={registerEvent} />
 
         <h2>Service Worker Lifecycle</h2>
@@ -93,33 +93,33 @@ self.addEventListener('fetch', function (event) {
         </ul>
 
         <h2>Install Event</h2>
-        <p>After registering the service worker, <span className="hightlight bold">install event</span> is fired. Fetch event wont happen unless the install event is successful. But don’t expect them to take control of the page on the first visit, you need to refresh the page to see the effects of service worker.</p>
+        <p>After registering the service worker, <span className="highlight bold">install event</span> is fired. Fetch event wont happen unless the install event is successful. But don’t expect them to take control of the page on the first visit, you need to refresh the page to see the effects of service worker.</p>
 
         <Highlight lang='javascript' value={installEvent} />
 
         <h2>Activate Event</h2>
-        <p>After successful install event, <span className="hightlight bold">activate</span> event is fired on various cases. Below are some of them.</p>
+        <p>After successful install event, <span className="highlight bold">activate</span> event is fired on various cases. Below are some of them.</p>
 
         <h2>When an activate is triggered?</h2>
         <ul>
           <li>If there is no current active service worker.</li>
           <li>On navigating to a page which is in service worker scope.</li>
-          <li>During the <span className="hightlight bold">push</span>, <span className="hightlight bold">sync</span> event.</li>
+          <li>During the <span className="highlight bold">push</span>, <span className="highlight bold">sync</span> event.</li>
         </ul>
 
         <Highlight lang='javascript' value={activateEvent} />
 
         <Note type="tips">
-          <p><span>Tips: </span> By using <span className="hightlight bold no--bg">self.clients.claim()</span> method in activate event, we can tell service worker to set itself as the active on current client and all other active clients.</p>
+          <p><span>Tips: </span> By using <span className="highlight bold no--bg">self.clients.claim()</span> method in activate event, we can tell service worker to set itself as the active on current client and all other active clients.</p>
         </Note>
 
         <h2>Fetch Event</h2>
-        <p>After activate event, <span className="hightlight bold">fetch</span> events are triggered. Whenever the browser requests a resourse within the service worker scope, fetch event can listen to network requests as shown below.</p>
+        <p>After activate event, <span className="highlight bold">fetch</span> events are triggered. Whenever the browser requests a resourse within the service worker scope, fetch event can listen to network requests as shown below.</p>
 
         <Highlight lang='javascript' value={fetchEvent} />
 
         <h2>Browser Support</h2>
-        <p>Service worker is supported in <span className="hightlight bold no--bg">Google Chrome</span>, <span className="hightlight bold no--bg">Mozilla Firefox</span>, <span className="hightlight bold no--bg">Opera</span> and support for <span className="hightlight bold no--bg">Microsoft Edge</span> is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/serviceworker/?q=service%20worker" target="_blank">in development</a>. For <span className="hightlight bold no--bg">Safari</span>, it is still <a href="https://webkit.org/status/?#specification-service-workers" target="_blank">under consideration</a> (🤖).</p>
+        <p>Service worker is supported in <span className="highlight bold no--bg">Google Chrome</span>, <span className="highlight bold no--bg">Mozilla Firefox</span>, <span className="highlight bold no--bg">Opera</span> and support for <span className="highlight bold no--bg">Microsoft Edge</span> is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/serviceworker/?q=service%20worker" target="_blank">in development</a>. For <span className="highlight bold no--bg">Safari</span>, it is still <a href="https://webkit.org/status/?#specification-service-workers" target="_blank">under consideration</a> (🤖).</p>
         <img src={swSupport} alt="Browser support"/>
         <p>More details about service worker <a href="https://jakearchibald.github.io/isserviceworkerready/" target="_blank">browser support</a>.</p>
 

src/step-4/AppShell.js

@@ -0,0 +1,55 @@
+import React, {Component} from 'react';
+import Highlight from 'react-syntax-highlight';
+import appOffline from './offline-app.png';
+import cachedResources from './cached-resources.png';
+
+class Offline extends Component {
+  render() {
+  	const offlineEvent = `/* app.js */
+
+//After DOM is loaded, do offline stuff
+document.addEventListener('DOMContentLoaded', function(event) { 
+  //On page load, if user is offline
+  if (!navigator.onLine) {
+    //Do some stuff here
+  }
+
+  //Offline Event
+  window.addEventListener("offline", function () {
+    //Do some stuff here
+  });
+
+  //Online Event
+  window.addEventListener("online", function () {
+    //Do some stuff here
+  });
+});
+`;
+    return(
+      <div className="offline">
+        <h1>Offline Experience</h1>
+
+        <p>Service worker allow us to use cache API to cache the resources and thus by providing offline experience. By caching the app shell, application loads faster repeated visits.</p>
+
+        <div className="offline__container">
+          <img className="" src={appOffline} alt="app offline" />
+        </div>
+        
+        <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>     
+				<p>By using <span className="highlight bold no--bg">offline/online events</span>, we can let the user know when he is offline or call an API when he has connectivity again.</p>        
+				
+				<Highlight lang='javascript' value={offlineEvent} />
+      </div>
+    );
+  }
+}
+
+export default Offline;

src/step-3/ServiceWorker.js renamed to src/step-4/ServiceWorker.js

@@ -1,13 +1,13 @@
 import React, {Component} from 'react';
 
-class Push extends Component {
+class AppLike extends Component {
   render() {
     return(
       <div>
-        <h1>Push</h1>
+        <h1>AppLike</h1>
       </div>
     );
   }
 }
 
-export default Push;
+export default AppLike;

src/step-5/Offline.js

@@ -11,5 +11,10 @@
 
 .hljs::selection,
 .hljs span::selection {
-	background: #4CAF50;	
+	background: #d4d4d4;	
+}
+
+.hljs::-moz-selection, 
+.hljs span::-moz-selection {
+	background: #d4d4d4;	
 }