[ { "path": "README.md", "content": "# Notes\n\"Notes\n\"Notes\n\nA simple, offline-based notepad, based on usage of [Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) and [PWA techniques.](https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/)\n\nView the demo [here](https://sii.im/playground/notes) on a [supported device.](http://caniuse.com/#feat=serviceworkers)\n\n## Features\n\n - Write notes and save them to [localStorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage)\n - Use [Service Worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) to enable offline viewing\n - \"Add To Home Screen\" feature on both Android and iOS supported devices\n" }, { "path": "css/style.css", "content": "* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml,\nbody {\n font-family: Helvetica Neue, sans-serif;\n}\n\nbody {\n height: 100vh;\n background: linear-gradient(to left, #B24592 , #F15F79);\n}\n\n@media screen and (max-width: 500px) {\n body {\n height: auto;\n min-height: 100vh;\n background: none;\n }\n}\n\n@keyframes fadein {\n from { \n opacity: 0;\n transform: translate3d(0, 10px, 0);\n }\n \n to { \n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n}\n\n.wrapper {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n width: 400px;\n height: 620px;\n background-color: #fff;\n overflow: hidden;\n border-radius: 5px;\n box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6);\n animation: fadein 1s;\n}\n\n@media screen and (max-width: 500px) {\n .wrapper {\n width: 100%;\n height: 100vh;\n margin: 0;\n overflow: scroll;\n box-shadow: none;\n animation: none;\n }\n}\n\n .wrapper__inner {\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n@media screen and (max-width: 500px) {\n .notepad {\n padding: 15px;\n }\n}\n\n .notepad__heading {\n width: 100%;\n padding: 60px 40px 15px;\n border-bottom: 1px solid #f5f4f4;\n color: #5f5f5f;\n font-weight: 400;\n }\n\n .notepad__form-label {\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px;\n overflow: hidden;\n position: absolute;\n width: 1px;\n }\n\n .notepad__form-input {\n border: 0;\n width: 100%;\n line-height: 1.3;\n margin: 0;\n font-size: 19px;\n color: #5f5f5f;\n padding: 30px 40px;\n background-color: transparent;\n transition: background-color 300ms ease;\n\n @media screen and (max-width: 500px) { \n .notepad__form-input {\n height: auto;\n }\n }\n }\n\n .notepad__form-input:focus {\n outline: 0;\n background-color: #f5f5f5;\n }\n\n .notepad__list {\n height: 365px;\n overflow: scroll;\n }\n\n @media screen and (max-width: 500px) {\n .notepad__list {\n height: auto;\n }\n }\n\n .notepad__list-item {\n width: 100%;\n padding: 30px 40px;\n border: 0;\n border-bottom: 1px solid #f5f4f4;\n line-height: 1.3;\n font-size: 19px;\n list-style-type: none;\n color: #5f5f5f;\n background-color: transparent;\n }\n\n .notepad__list-item:first-of-type {\n border-top: 1px solid #f5f4f4;\n }\n\n .notepad__clear {\n position: absolute;\n bottom: 0;\n display: none;\n width: 100%;\n padding: 20px;\n border: 0;\n font-size: 12px;\n text-transform: uppercase;\n background-color: #fff;\n color: #333;\n cursor: pointer;\n font-family: Helvetica Neue, sans-serif;\n letter-spacing: 2px;\n transition:\n color 300ms ease,\n background-color 300ms ease;\n }\n\n .notepad__clear:focus {\n outline: 0;\n }\n\n .notepad__clear:hover {\n color: #fff;\n background-color: #ea3860;\n }\n\n .notepad__clear--display {\n display: block;\n }\n\n @media screen and (max-width: 500px) {\n .notepad__clear {\n position: static;\n }\n }\n\n .info,\n .twitter {\n position: fixed;\n top: 0;\n right: 0;\n padding: 15px 15px 12px 15px;\n transition:\n background-color 300ms ease;\n }\n\n .info span,\n .twitter span {\n display: none;\n }\n\n @media screen and (max-width: 500px) {\n .info,\n .twitter {\n position: absolute;\n z-index: 2;\n }\n }\n\n @media screen and (max-width: 500px) {\n .info {\n right: 40px;\n } \n }\n\n .twitter {\n top: 45px;\n }\n\n @media screen and (max-width: 500px) {\n .twitter {\n top: 0;\n } \n }\n\n .info svg,\n .twitter svg {\n width: 30px;\n height: 30px;\n fill: #fff;\n transition:\n fill 300ms ease;\n }\n\n @media screen and (max-width: 500px) {\n .info svg,\n .twitter svg {\n width: 20px;\n fill: #333;\n } \n }\n\n .info:hover svg,\n .twitter:hover svg {\n fill: #333;\n }\n" }, { "path": "index.html", "content": "\n\n \n Notes\n \n \n \n \n \n \n \n \n \n \n \n \n GitHub\n \n \n \n Twitter\n \n
\n
\n
\n

Notes

\n
\n \n \n
\n
    \n \n
    \n
    \n
    \n \n \n \n \n" }, { "path": "js/app.js", "content": "// Registering ServiceWorker\nif ( 'serviceWorker' in navigator ) {\n navigator.serviceWorker.register( 'sw.js' ).then(function(registration) {\n\n // Registration was successful\n console.log( 'ServiceWorker registration successful. Scope: ' + registration.scope )\n }).catch(function(err) {\n\n // Registration failed with error\n console.log( 'ServiceWorker registration failed. Error: ' + err);\n });\n}" }, { "path": "js/cache-polyfill.js", "content": "/**\n * Copyright 2015 Google Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\n(function() {\n var nativeAddAll = Cache.prototype.addAll;\n var userAgent = navigator.userAgent.match(/(Firefox|Chrome)\\/(\\d+\\.)/);\n\n // Has nice behavior of `var` which everyone hates\n if (userAgent) {\n var agent = userAgent[1];\n var version = parseInt(userAgent[2]);\n }\n\n if (\n nativeAddAll && (!userAgent ||\n (agent === 'Firefox' && version >= 46) ||\n (agent === 'Chrome' && version >= 50)\n )\n ) {\n return;\n }\n\n Cache.prototype.addAll = function addAll(requests) {\n var cache = this;\n\n // Since DOMExceptions are not constructable:\n function NetworkError(message) {\n this.name = 'NetworkError';\n this.code = 19;\n this.message = message;\n }\n\n NetworkError.prototype = Object.create(Error.prototype);\n\n return Promise.resolve().then(function() {\n if (arguments.length < 1) throw new TypeError();\n\n // Simulate sequence<(Request or USVString)> binding:\n var sequence = [];\n\n requests = requests.map(function(request) {\n if (request instanceof Request) {\n return request;\n }\n else {\n return String(request); // may throw TypeError\n }\n });\n\n return Promise.all(\n requests.map(function(request) {\n if (typeof request === 'string') {\n request = new Request(request);\n }\n\n var scheme = new URL(request.url).protocol;\n\n if (scheme !== 'http:' && scheme !== 'https:') {\n throw new NetworkError(\"Invalid scheme\");\n }\n\n return fetch(request.clone());\n })\n );\n }).then(function(responses) {\n // If some of the responses has not OK-eish status,\n // then whole operation should reject\n if (responses.some(function(response) {\n return !response.ok;\n })) {\n throw new NetworkError('Incorrect response status');\n }\n\n // TODO: check that requests don't overwrite one another\n // (don't think this is possible to polyfill due to opaque responses)\n return Promise.all(\n responses.map(function(response, i) {\n return cache.put(requests[i], response);\n })\n );\n }).then(function() {\n return undefined;\n });\n };\n\n Cache.prototype.add = function add(request) {\n return this.addAll([request]);\n };\n}());" }, { "path": "js/note-list.js", "content": "$(document).ready(function () {\n\n var noteList = function() {\n\n var $notepad = $(' .notepad' ),\n $noteList = $(' .notepad__list' ),\n $noteListItem = $( '.notepad__list-item' ),\n $noteForm = $( '.notepad__form' ),\n $noteFormInput = $( '.notepad__form-input' ),\n $clearList = $( '.notepad__clear' ),\n clearListDisplay = 'notepad__clear--display',\n noteCount = 0;\n\n function displayNotes() {\n for (noteCount = 0; noteCount < localStorage.length; noteCount++) {\n var noteID = 'task-' + noteCount;\n\n // Build note list\n $noteList.append(\"
  • \" + localStorage.getItem(noteID) + \"
    • \");\n\n // Show reset button\n $clearList.addClass( clearListDisplay );\n }\n }\n\n function storeNote() {\n if ( $noteFormInput.val() !== '' ) {\n var noteID = 'task-' + noteCount,\n task = $( '#' + noteID ),\n taskMessage = $noteFormInput.val();\n\n localStorage.setItem( noteID, taskMessage );\n\n // Add to note list\n $noteList.append( \"
  • \" + taskMessage + \"
    • \" );\n\n // Display reset button\n if ( !$clearList.hasClass( clearListDisplay ) ) {\n $clearList.addClass( clearListDisplay );\n }\n\n // Reset\n $noteFormInput.val('');\n noteCount++;\n }\n }\n\n function clearNotes() {\n\n // Update DOM\n $noteList.empty();\n $clearList.removeClass( clearListDisplay );\n\n // Clear storage\n localStorage.clear();\n noteCount = 0;\n }\n\n function bindEvents() {\n\n // Show any existing notes from localStorage\n displayNotes();\n\n // Create new note\n $noteForm.on( 'submit', function () {\n storeNote();\n return false;\n });\n\n // Reset notes\n $clearList.on( 'click', function () {\n clearNotes();\n });\n }\n\n bindEvents();\n };\n\n noteList();\n});\n" }, { "path": "manifest.json", "content": "{\n \"short_name\": \"notes\",\n \"name\": \"notes\",\n \"description\" : \"An offline-capable notes app, using localStorage and ServiceWorker\",\n \"display\": \"standalone\",\n \"orientation\": \"portrait\",\n \"start_url\": \"index.html\",\n \"theme_color\": \"#ffffff\",\n \"background_color\": \"#ffffff\",\n \"icons\": [\n {\n \"src\": \"img/icon-60.png\",\n \"sizes\": \"48x48\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"img/icon-114.png\",\n \"sizes\": \"114x114\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"img/icon-152.png\",\n \"sizes\": \"152x152\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"img/icon-558.png\",\n \"sizes\": \"558x558\",\n \"type\": \"image/png\"\n }\n ]\n}\n" }, { "path": "sw.js", "content": "// Polyfill for Chrome caching\nimportScripts('js/cache-polyfill.js');\n\n// Install the ServiceWorker\nself.addEventListener('install', function(event) {\n event.waitUntil(\n\n // Open a cache\n caches.open('v1').then(function(cache) {\n\n // Define what we want to cache\n return cache.addAll([\n '/',\n 'index.html',\n 'js/app.js',\n 'js/jquery.min.js',\n 'js/note-list.js',\n 'css/style.css',\n 'favicon.ico',\n 'manifest.json',\n 'img/icon-60.png',\n 'img/icon-114.png',\n 'img/icon-152.png',\n 'img/icon-558.png'\n ]);\n })\n );\n});\n\n// Use ServiceWorker (or not) to fetch data\nself.addEventListener('fetch', function(event) {\n\n event.respondWith(\n\n // Look for something in the cache that matches the request\n caches.match(event.request).then(function(response) {\n\n // If we find something, return it\n // Otherwise, use the network instead\n return response || fetch(event.request);\n })\n );\n});" } ]