Merge develop branch

README.md

@@ -2,6 +2,8 @@
 ---
 #### _Three Stage Course Material Project - Restaurant Reviews_
 
+The porpouse of this repo it's to accomplish the 3 stages of Mobile Web Specialist Udacity Nanodegree.
+
 ## Project Overview: Stage 1
 
 For the **Restaurant Reviews** projects, you will incrementally convert a static webpage to a **mobile-ready web application**. In **Stage One**, you will take a static design that lacks accessibility and convert the design to be responsive on different sized displays and accessible for screen reader use. You will also add a service worker to begin the process of creating a seamless offline experience for your users.
@@ -55,10 +57,22 @@ After that, you need to have a simple HTTP server to serve up the site files on
 Or you can run other server of your preference. I usually work with npm packages, for that I use **http-server** node package. Easy to install with: `npm install http-server -g`. To run, inside the project directory, if you don't need more options: `http-server -p 8000`
 See the different options at: [http-server](https://www.npmjs.com/package/http-server).
 
-With your server running, visit the site: `http://localhost:8000`.
+If you prefer, you can run:
+````
+gulp serve
+````
+to run a **dev version** of the application with optimised images, or
 
+````
+gulp serve:dist
+````
+to run a **distribution version** of the application with minified files and optimised images.
 
+(At gulpfile there are other tasks listed you can use)
+
+With your server running, visit the site: `http://localhost:8000`.
 
+----
 
 ## *Thanks for visiting this repo! I hope you enjoy* :D
 

gulpfile.js

@@ -2,7 +2,6 @@
 
 // serve (serve dev and watch files)
 // serve:dist (serve build files)
-// deploy (deploy app at github pages)
 // minify-js (js minify and sourcemaps)
 // minify-css (css minify and sourcemaps)
 // minify-html
@@ -19,7 +18,6 @@ const uglify = require('gulp-uglify-es').default;
 const minifycss = require('gulp-clean-css');
 const htmlmin = require('gulp-htmlmin');
 const util = require('gulp-util');
-const ghPages = require('gulp-gh-pages');
 
 
 // File where the favicon markups are stored
@@ -70,14 +68,6 @@ gulp.task('serve:dist', () => {
   gulp.watch([src.dev.html, src.dev.css, src.dev.js]).on('change', reload);
 });
 
-gulp.task('deploy', () => {
-  gulp.src('./dist/**/*')
-    .pipe(ghPages({
-      force: true,
-      remoteUrl: '[email protected]:Tsuna-mi/mws-restaurant.git',
-      branch: 'master'
-    }));
-});
 
 // minify-js
 gulp.task('minify-js', () => {

js/main.js

@@ -4,6 +4,39 @@ let cuisines;
 let map;
 var markers = [];
 
+
+/**
+ * Register sw.
+ */
+
+if (navigator.serviceWorker) {
+  navigator.serviceWorker.register('/sw.js', { scope: './' })
+    .then((registration) => {
+      console.log('SW registered!');
+      let sw;
+      if (registration.installing) {
+        sw = registration.installing;
+        console.log('SW installing!');
+      } else if (registration.waiting) {
+        sw = registration.waiting;
+        console.log('SW installed and waiting!');
+      } else if (registration.active) {
+        sw = registration.active;
+        console.log('SW active!');
+      }
+
+      if (sw) {
+        console.log(sw.state);
+        sw.addEventListener('statechange', (e) => {
+          console.log(e.target.state);
+        });
+      }
+    }).catch(() => {
+      console.log('SW Registration failed!');
+    });
+}
+
+
 /**
  * Fetch neighborhoods and cuisines as soon as the page is loaded.
  */

package.json

@@ -33,7 +33,6 @@
     "eslint-plugin-import": "^2.9.0",
     "gulp": "^3.9.1",
     "gulp-clean-css": "^3.9.3",
-    "gulp-gh-pages": "^0.5.4",
     "gulp-htmlmin": "^4.0.0",
     "gulp-responsive": "^2.9.0",
     "gulp-sourcemaps": "^2.6.4",

sw.js

@@ -0,0 +1,74 @@
+const version = '1.0.13';
+const staticCacheName = 'msw-restrev-';
+const staticCache = staticCacheName + version;
+const contentImgsCache = `${staticCacheName}imgs`;
+const allCaches = [
+  staticCache,
+  contentImgsCache
+];
+
+function servePhoto(request) {
+  // Regex to store the assets images without type
+  const storageUrl = request.url.replace(/-(s|m|l|xl|m@2x|s@2x)\.(jpg|webp|png|svg)$/, '');
+
+  return caches.open(contentImgsCache)
+    .then(cache => cache.match(storageUrl)
+      .then((response) => {
+        if (response) return response;
+
+        return fetch(request).then((networkResponse) => {
+          cache.put(storageUrl, networkResponse.clone());
+          return networkResponse;
+        }).catch(() => console.log('Fetch fail', request.url));
+      }));
+}
+
+self.addEventListener('install', (event) => {
+  // Open a cache and add the static resources
+  event.waitUntil(caches.open(staticCache).then((cache) => {
+    cache.addAll([
+      '/',
+      '/js/dbhelper.js',
+      '/js/main.js',
+      '/js/restaurant_info.js',
+      '/restaurant.html',
+      '/assets/data/restaurants.json',
+      '/manifest.json',
+      '/assets/css/styles.css',
+      'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css',
+      'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700',
+      'https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2',
+      'https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2'
+    ]);
+    cache.keys().then(keys => console.log(keys));
+  }));
+});
+
+self.addEventListener('activate', (event) => {
+  // Remove old cache versions
+  event.waitUntil(caches.keys().then((cacheNames) => {
+    Promise.all(cacheNames.filter(cacheName =>
+      cacheName.startsWith(staticCacheName) && !allCaches.includes(cacheName))
+      .map(cacheName => caches.delete(cacheName)));
+  }));
+});
+
+self.addEventListener('fetch', (event) => {
+  const requestUrl = new URL(event.request.url);
+  if (requestUrl.origin === location.origin) {
+    if (requestUrl.pathname.startsWith('/assets/img/')) {
+      event.respondWith(servePhoto(event.request));
+      return;
+    }
+  }
+
+  // Check if we have the request cached or not
+  event.respondWith(caches.match(event.request)
+    .then(response => response || fetch(event.request)));
+});
+
+self.addEventListener('message', (event) => {
+  if (event.data.action === 'skipWaiting') {
+    self.skipWaiting();
+  }
+});