├── .gitignore
├── css
└── style.css
├── index.html
├── js
└── script.js
├── package.json
├── sw.js
└── gulpfile.js
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | color: blue;
3 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Service Workers
5 |
6 |
7 |
8 |
9 | Hi, there fellas
10 |
11 |
12 |
--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | if (navigator.serviceWorker) {
2 | console.log("ServiceWorkers are supported");
3 |
4 |
5 | navigator.serviceWorker.register('../sw.js')
6 | .then(function(reg) {
7 | console.log("ServiceWorker registered ◕‿◕");
8 | console.dir(reg);
9 | })
10 | .catch(function(error) {
11 | console.log("Failed to register ServiceWorker ಠ_ಠ");
12 | console.dir(error);
13 | });
14 | }
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ServiceWorkers",
3 | "version": "0.0.1",
4 | "description": "Same service worker app for the tech exchange",
5 | "main": "app.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "author": "Dinesh Balaji",
10 | "license": "MIT",
11 | "dependencies": {
12 | "gulp": "^3.9.0",
13 | "gulp-concat": "^2.6.0",
14 | "gulp-jshint": "^1.11.2",
15 | "gulp-minify-css": "^1.2.1",
16 | "gulp-rename": "^1.2.2",
17 | "gulp-uglify": "^1.4.1",
18 | "jshint-stylish": "^2.0.1"
19 | },
20 | "devDependencies": {
21 | "browser-sync": "^2.9.3",
22 | "gulp": "^3.9.0",
23 | "gulp-livereload": "^3.8.0",
24 | "gulp-plumber": "^1.0.1",
25 | "gulp-sass": "^2.0.4",
26 | "gulp-watch": "^4.3.5"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/sw.js:
--------------------------------------------------------------------------------
1 | // The SW will be shutdown when not in use to save memory,
2 | // be aware that any global state is likely to disappear
3 | console.log("SW startup");
4 |
5 | var CACHE_NAME = "my_cache";
6 | var urlsToCache = [
7 | '/css/style.css',
8 | '/js/script.js'
9 | ];
10 |
11 | self.addEventListener('install', function(event) {
12 | // Perform install steps
13 | event.waitUntil(
14 | caches.open(CACHE_NAME)
15 | .then(function(cache) {
16 | console.log('Opened cache');
17 | return cache.addAll(urlsToCache);
18 | })
19 | );
20 | });
21 |
22 | self.addEventListener('fetch', function(event) {
23 | event.respondWith(
24 | caches.match(event.request)
25 | .then(function(response) {
26 | // Cache hit - return response
27 | console.log(event.request.url);
28 | if (response) {
29 | console.log("cache hit");
30 | return response;
31 | }
32 | console.log("cache miss");
33 | return fetch(event.request.clone());
34 | }
35 | )
36 | );
37 | });
38 |
39 | // self.addEventListener('activate', function(event) {
40 | // console.log("SW activated");
41 | // });
42 |
43 | // self.addEventListener('fetch', function(event) {
44 | // console.log("Fetch for : " + event.request.url);
45 |
46 | // event.respondWith(
47 | // caches.match(event.request)
48 | // .then(function(response) {
49 |
50 | // // we have a copy of the response in our cache, so return it
51 | // if (response) {
52 | // console.log("cache hit for:" + event.request.url);
53 | // return response; //no network request necessary
54 | // }
55 |
56 | // return fetch(event.request);
57 |
58 | // })
59 | // .catch(function(error) {
60 | // console.log("cache catch");
61 | // })
62 | // );
63 | // });
64 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp'),
2 | uglify = require('gulp-uglify'); //minifies js files
3 | jshint = require('gulp-jshint'); //validates js
4 | concat = require('gulp-concat'); //joins multiple files into one
5 | rename = require('gulp-rename'); //renames files
6 |
7 | sass = require('gulp-sass');
8 | minifyCss = require('gulp-minify-css');
9 | concat = require('gulp-concat');
10 | rename = require('gulp-rename');
11 |
12 | plumber = require('gulp-plumber');
13 |
14 | browserSync = require('browser-sync').create();
15 | reload = browserSync.reload;
16 |
17 | var JS_SRC = ['./js/**/*.js', './sw.js'];
18 | var SCSS_SRC = ['./css/**/*.css'];
19 | var HTML_SRC = ['index.html'];
20 |
21 | gulp.task('js', function() {
22 | gulp.src(JS_SRC)
23 | .pipe(plumber())
24 | .pipe(jshint())
25 | .pipe(jshint.reporter('jshint-stylish'))
26 | .pipe(uglify())
27 | .pipe(concat('main.js'))
28 | .pipe(rename({
29 | basename: 'main',
30 | extname: '.min.js'
31 | }))
32 | .pipe(gulp.dest('build/js'));
33 | });
34 |
35 | gulp.task('scss', function() {
36 | gulp.src(SCSS_SRC)
37 | .pipe(plumber())
38 | .pipe(sass().on('error', sass.logError))
39 | .pipe(minifyCss())
40 | .pipe(concat('style.css'))
41 | .pipe(rename({
42 | basename: 'style',
43 | extname: '.min.css'
44 | }))
45 | .pipe(gulp.dest('build/css'));
46 | });
47 |
48 |
49 | gulp.task('serve', ['js', 'scss'], function() {
50 | browserSync.init({
51 | server : {
52 | baseDir : './'
53 | }
54 | });
55 |
56 | var scssWatch = gulp.watch(SCSS_SRC, ['scss']);
57 | scssWatch.on('change', reload);
58 |
59 | var jsWatch = gulp.watch(JS_SRC, ['js']);
60 | jsWatch.on('change', reload);
61 |
62 | gulp.watch(HTML_SRC, reload);
63 | });
--------------------------------------------------------------------------------