Javascript Notes Progressive Web App (Free Download)

“Javascript Notes App”, just do a quick search and they are all over the Internet. But no, this is not another one of those “keep notes in local storage for beginners”. I figured the world needs better examples of modern web apps, so here it is, a “Notes PWA” that runs even when offline – You read that right, an installable and offline web app. Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

 

 

QUICK NOTES & REQUIREMENTS

• This is not a “newbie-friendly” open-source project plus example. It involves the use of service workers, indexed database, cache storage.
• Too much of a hassle to create an “online example”, just download the source code or grab it from Github.
• “Grade A” browser required, alongside an https:// server. http://localhost is fine for testing too.

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

SCREENSHOT

 

LICENSE & DOWNLOAD

This project is released under the MIT License. You are free to use it for your own personal and commercial projects, modify it as you see fit. On the condition that there the software is provided “as-is”. There are no warranties provided and “no strings attached”. Code Boxx and the authors are not liable for any claims, damages, or liabilities.

Download | GitHub

 

 

 

PART 1) SINGLE PAGE APP

<!-- (A) NOTES LIST --> <div id="pgA"> <div id="nAdd" class="mi" onclick="notes.show()"> add_circle_outline </div> <div id="nList"></div> </div> <!-- (B) NOTE FORM --> <div id="pgB"><form onsubmit="return notes.save()"> <label>Title</label> <input id="nTitle" type="text" autocomplete="off" required> <label>Text</label> <textarea id="nText" autocomplete="off" required></textarea> <label>Text Color</label> <input id="ntColor" type="color" value="#ffffff"> <label>Background Color</label> <input id="nbColor" type="color" value="#000000"> <div id="nAction"> <input type="button" class="mi" value="reply" onclick="notes.toggle('B')"> <input type="button" id="nDel" class="mi" value="delete" onclick="notes.del()"> <input type="submit" class="mi" value="save"> </div> </form></div>

That’s right, there’s only one HTML file in the entire project.

• <div id="pgA"> The “main screen” where we show all the notes.
• <div id="pgB"> An add/edit note form.

 

 

PART 2) JAVASCRIPT – INDEXED DATABASE

// (A) INDEXED DB const IDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; var notesDB = { // (B) INITIALIZE DATABASE db : null, init : () => new Promise((resolve, reject) => { // (B1) OPEN NOTES DATABASE notesDB.db = IDB.open("JSNotes", 1); // (B2) CREATE NOTES DATABASE notesDB.db.onupgradeneeded = e => { // (B2-1) NOTES DATABASE notesDB.db = e.target.result; // (B2-2) IDB UPGRADE ERROR notesDB.db.onerror = e => { alert("Indexed DB upgrade error - " + evt.message); console.error(e); reject(e.target.error); }; // (B2-3) EVENTS STORE if (e.oldVersion < 1) { let store = notesDB.db.createObjectStore("notes", { keyPath: "id", autoIncrement: true }); } }; // (B3) IDB OPEN OK notesDB.db.onsuccess = e => { notesDB.db = e.target.result; resolve(true); }; // (B4) IDB OPEN ERROR notesDB.db.onerror = e => { alert("Indexed DB init error - " + e.message); console.error(e) reject(e.target.error); }; }), // (C) TRANSACTION "MULTI-TOOL" tx : (action, store, data, idx) => new Promise((resolve, reject) => { // (C1) GET OBJECT STORE let req, tx = notesDB.db.transaction(store, "readwrite").objectStore(store); // (C2) PROCESS ACTION switch (action) { // (C2-1) NADA default: reject("Invalid database action"); break; // (C2-2) ADD case "add": req = tx.add(data); req.onsuccess = e => resolve(true); break; // (C2-3) PUT case "put": req = tx.put(data); req.onsuccess = e => resolve(true); break; // (C2-4) DELETE case "del": req = tx.delete(data); req.onsuccess = e => resolve(true); break; // (C2-5) GET case "get": req = tx.get(data); req.onsuccess = e => resolve(e.target.result); break; // (C2-6) GET ALL case "getAll": req = tx.getAll(data); req.onsuccess = e => resolve(e.target.result); break; // (C2-7) CURSOR case "cursor": if (idx) { resolve(tx.index(idx).openCursor(data)); } else { resolve(tx.openCursor(data)); } break; } req.onerror = e => reject(e.target.error); }) };

An indexed database is a huge component of this project, and this library handles it.

• notesDB.init() Runs on page load to setup and “install” the database. Basically just creates a JSNotes table with a single notes store (table).
• notesDB.tx() Runs a database transaction – Add, edit, delete, get, etc…

 

 

PART 3) NOTES JAVASCRIPT

3A) INITIALIZE

var notes = { // (A) INIT APP init : async () => { // (A1) REQUIREMENTS CHECK - INDEXED DB if (!IDB) { alert("Your browser does not support indexed database."); return; } // (A2) REQUIREMENTS CHECK - STORAGE CACHE if (!"caches" in window) { alert("Your browser does not support cache storage."); return; } // (A3) REGISTER SERVICE WORKER if ("serviceWorker" in navigator) { navigator.serviceWorker.register("CB-worker.js"); } // (A4) DATABASE + INTERFACE if (await notesDB.init()) { notes.toggle("A"); notes.list(); } }, // (B) TOGGLE PAGE toggle : p => document.getElementById("pg"+p).classList.toggle("show"), // ... } window.addEventListener("DOMContentLoaded", notes.init); 

On window load, notes.init() will run. This should be pretty self-explanatory even if you “eyeball glance” through it.

• Check browser requirements.
• Install a service worker. This is required to make this into an “installable web app”.
• Initialize and set up the indexed database.

 

3B) LIST NOTES

// (C) LIST NOTES list : async () => { // (C1) GET & "RESET" HTML LIST let nList = document.getElementById("nList"); nList.innerHTML = ""; // (C2) GET & DRAW ENTRIES for (let n of await notesDB.tx("getAll", "notes")) { let d = document.createElement("div"); d.className = "note"; d.style.color = n.tc; d.style.backgroundColor = n.bc; d.innerHTML = `<h1 class="title">${n.title}</h1> <div class="txt">${n.txt}</div>`; d.onclick = () => notes.show(n.id); nList.appendChild(d); } },

notes.list() Get all the notes from the database, and draw the HTML list.

 

 

3C) SHOW NOTE

// (D) SHOW ADD/EDIT NOTE FORM nid : null, // current note id show : async (id) => { // (D1) EDIT NOTE if (id) { notes.nid = +id; let note = await notesDB.tx("get", "notes", notes.nid); document.querySelector("#nTitle").value = note.title; document.querySelector("#nText").value = note.txt; document.querySelector("#ntColor").value = note.tc; document.querySelector("#nbColor").value = note.bc; document.querySelector("#nDel").style.display = "block"; } // (D2) ADD NOTE else { notes.nid = null; document.querySelector("#pgB form").reset(); document.querySelector("#nDel").style.display = "none"; } // (D3) OPEN NOTE FORM notes.toggle("B"); },

notes.show() Remember that there is a “notes form” in the HTML above? When the user clicks on “add note” or “edit note”, this function will set up and show the form accordingly.

 

3D) SAVE & DELETE NOTES

// (E) SAVE NOTE save : () => { // (E1) DATA TO SAVE let data = { title : document.getElementById("nTitle").value, txt : document.getElementById("nText").value, tc : document.getElementById("ntColor").value, bc : document.getElementById("nbColor").value }; // (E2) SAVE ENTRY if (notes.nid) { data.id = notes.nid; notesDB.tx("put", "notes", data); } else { notesDB.tx("add", "notes", data); } // (E3) DONE! notes.nid = null; notes.toggle("B"); notes.list(); return false; }, // (F) DELETE NOTE // id : delete this note id del : async () => { if (confirm("Delete note?")) { await notesDB.tx("del", "notes", notes.nid); notes.nid = null; notes.toggle("B"); notes.list(); }}

• notes.save() Get notes data from the HTML form, and save it into the database.
• notes.del() Remove a note from the database.

 

 

PART 4) INSTALLABLE WEB APP

4A) HTML META DATA

<!-- WEB APP MANIFEST --> <!-- https://web.dev/add-manifest/ --> <link rel="manifest" href="CB-manifest.json"> <!-- ANDROID + CHROME + APPLE + WINDOWS APP --> <meta name="mobile-web-app-capable" content="yes"> <meta name="theme-color" content="white"> <link rel="apple-touch-icon" href="assets/icon-512.png"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Offline JS Notes"> <meta name="msapplication-TileImage" content="assets/icon-512.png"> <meta name="msapplication-TileColor" content="#ffffff">

With the HTML and Javascript, this is already a perfectly working web app. But to turn this into an “installable web app”, we need to address 3 things:

• Add the above HTML “web app metadata”.
• Register a web manifest.
• Register a service worker.

 

4B) WEB MANIFEST

{ "short_name": "Notes", "name": "JS Notes", "icons": [{ "src": "assets/favicon.png", "sizes": "64x64", "type": "image/png" }, { "src": "assets/icon-512.png", "sizes": "512x512", "type": "image/png" }], "start_url": "js-notes.html", "scope": "/", "background_color": "white", "theme_color": "white", "display": "standalone" }

The manifest file is what it is – The app name, icon, theme, settings, etc…

 

4C) SERVICE WORKER

// (A) CREATE/INSTALL CACHE self.addEventListener("install", evt => { self.skipWaiting(); evt.waitUntil( caches.open("NotesPWA") .then(cache => cache.addAll([ "assets/favicon.png", "assets/head-notes-pwa.webp", "assets/icon-512.png", "assets/js-notes-db.js", "assets/js-notes.js", "assets/js-notes.css", "assets/maticon.woff2", "CB-manifest.json", "js-notes.html" ])) .catch(err => console.error(err)) ); }); // (B) CLAIM CONTROL INSTANTLY self.addEventListener("activate", evt => self.clients.claim()); // (C) LOAD FROM CACHE FIRST, FALLBACK TO NETWORK IF NOT FOUND self.addEventListener("fetch", evt => evt.respondWith( caches.match(evt.request).then(res => res || fetch(evt.request)) ));

If you have not heard of service workers, it is pretty much “Javascript that runs in the background”.

• (A) Save all the project files into the browser cache.
• (C) Hijack the fetch requests, serve the cached files if found, and fallback to the network if not.

Simply put, “installing” the app into the browser and enabling “offline mode”.

 

 

COMPATIBILITY CHECKS

• Arrow Functions – CanIUse
• Service Workers – CanIUse
• Cache Storage – CanIUse
• Indexed DB – CanIUse

Most of the required features are already well-supported on modern “Grade A” browsers.