Today, We are going to build a progressive app which can very well be used in offline mode, be responsive on all available devices and which saves the content locally on device. So, the core functionality of this Notepad here is to make it work offline. To fulfill this requirement, we’ll use which I’m going to cover next. Notepad ServiceWorkers Foreward What is a ServiceWorker? A service worker is a script that runs in the background, separate from your web page. It responds to events, including network requests made from pages it serves. A service worker has an intentionally short lifetime. It wakes up when it gets an event and runs only as long as it needs to process it. The first and foremost feature ServiceWorkers provides is to give the ability to webapp to work offline. Apart from this ServiceWorkers also includes features like and . In the future service workers will support other things like periodic sync or geofencing. The core feature discussed in this tutorial is the ability to intercept and handle requests, including programmatically managing a cache of responses. push notifications background sync network Now, let’s talk about what is a Progressive Web App? A Progressive Web App uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web’s low friction at every moment. This means a progressive web app should be responsive, connection-independent, app-like, fresh, installable and so forth. So, to make our Notepad a progressive web app, we need to include all above features. Let’s get started. Building the Notepad Let’s start by creating a folder called Notepad in your favorite local web server(in my case I have used ) and add following files into it: XAMPP index.html - This where we’ll write our ServiceWorker logic sw.js - The manifest enables your web app to have a more native-like presence on the user’s homescreen. It allows the app to be launched in full-screen mode (without a URL bar being present), provides control over the screen orientation and in recent versions of Chrome on Android supports defining a and for the address bar. It is also used to define a set of icons by size and density used for the aforementioned Splash screen and homescreen icon. manifest.json Splash Screen theme color Now, first thing we will do is register a when our app hits the browser for the first time. For this, create a folder called in root and add file into it and add the following code in that file. ServiceWorker js app.js Above code will try to check if the current browser supports and if yes, it will register one. Notice, we have passed a file called in the register function which we haven’t created yet. ServiceWorker sw.js Create a file called in the root and add the following content into it. sw.js Notice, If you want to import any external script in the Service Worker, you can do it using importScripts() . In this example we’ll be using the since the support for cache is limited. cache-polyfill Now, We need to cache all files that we want to be cached the first time registered. In order to do this, we’ll add the following content after line: ServiceWorker var CACHE_VERSION = 'app-v10'; var CACHE_FILES = [ '/', 'index.html', 'js/app.js', 'css/style.css', 'favicon.ico', 'manifest.json']; All this files will get cached for the offline use. Here you can see we call with our desired cache name(which in our case is ), after which we call cache.addAll() and pass in our array of files i.e . caches.open() CACHE_VERSION CACHE_FILES Next, we’ll add following content into the file . manifest.json You can see here, we have provided our application name in , default orientation for application is and we have also provided different sized icons of our application which you can get from . short_name standalone here Let’s now move to the and add following content: index.html So, as you can see here we have taken a textarea and have given it = which we will use to keep track of event of textarea. For this, purpose we’ll use . Let’s also note here that, to make the app responsive on all device, we have used . You can I have included all of the necessary files in . You can get all the necessary file from and and add them to the relevant folders. I have also included file which will make some necessary changes on the page to make it responsive. id note onKeyUp jQuery Bootstrap index.html here here style.css Now, again move to the file and add the following content: js/app.js As you can see, we have the textarea’s event so that it will get the text while user types and it to the `localStorage bind propertychange if(localStorage.getItem("note") && localStorage.getItem("note")!=''){ var noteItem = localStorage.getItem("note") $('#note').val(noteItem); } Above code will check if there’s anything into the and if found will fill the with the available content when the next time user visits the website. localStorage textarea Lastly, move to file once again and add all the remaining files into . sw.js CACHE_FILES var CACHE_FILES = [ '/', 'index.html', 'js/app.js', 'js/jquery.min.js', 'js/bootstrap.min.js', 'css/bootstrap.min.css', 'css/style.css', 'manifest.json', 'img/icon-48.png', 'img/icon-96.png', 'img/icon-144.png', 'img/icon-196.png']; Putting all above bits and pieces at correct place, our Notepad app is now ready to be used offline. Head over to the or relevant local web server URL and check the final app. http://localhost You can check the whole or checkout the . codebase demo OR you can see it in action . here Found any typo or want to contribute? Help us improve our documentation by forking and sending your fixes and suggestions. Improve this Page! Thanks for reading! is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories
