What are PWAs? Build one in 15 minutes!
Progressive Web App (PWA) is a term used to denote a new software development methodology. Unlike traditional applications, progressive web apps are a hybrid of regular web pages (or websites) and a mobile application.
PWAs utilize the power of web tools like service workers and IndexedDB to provide users with a better web experience or sometimes, an offline first experience.
Offline first experience? how? what does that even mean? Imagine opening a web app online where you see random quotes, and then even when you are offline, you still get quotes on the page. Cool right? Imagine the app has pictures and you get this pictures even when offline. PWAs help in alot of ways, page load speed, use of less internet data, better user experience, basically bring the mobile native feel to a web app.
Read more about PWAs here or watch the video below
THE SERVICE WORKER
PWAs wouldn’t currently be possible without the help of the Service Worker. A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. Today, they already include features like push notifications and background sync.
A service worker can be registered in your app like this
Click here to learn more about the service worker or watch the video below
INDEXED DB
Another cool tool you can use for PWAs is the IndexedDB. IndexedDB is a large-scale, NoSQL storage system. It lets you store just about anything in the user’s browser. you can use IndexedDB to store data for offline usage for users. Click here to learn more about IndexedDb. A video about it is below
NEWS BITS
Lets build a simple PWA. Its a simple app for news feeds (NOTE: the news feeds are not going to be actually real news. The main idea is to simulate the data so that we can test out the cool features of a PWA).
Also using Chrome browser is recommended for this tutorial as we are going to be needing Chrome features and dev tools.
We are going to be using Node JS. Make sure you have Node installed. If you don’t check here on how to do that.
Create a folder called news-bits . This will be our project folder. Open the folder up on your text editor.
Create a file called package.json in the project folder and add this to the file
Open the folder on your terminal and run this command npm install . Create an index.html file and add this code to it
Create two folders css and js in the project folder. In the css folder create a file called main.css and add this code to it
Download material lite css from here and include the material.min.css file in the css folder and the material.min.js file in the js folder
Serve the app
Now we need to serve our html file. Create a file index.js in the project folder and add this code to it
Open the project on your terminal and run npm start
You should get this kind of output
> news-bit@1.0.0 start /Users/mac/Desktop/john/news-bits
> node index.jslistening on *:3000
Open your browser and go to http://localhost:3000 and you should see this
Create manifest.json
To support add to homescreen feature, create manifest.json .Create a folder called icons and get an image in two sizes, 32 x 32 pixels and 512 x 512 pixels in .png format. Rename them to icon-32.png and icon-512.png and put them in the icons folder. This icons will be used by our manifest file. Create the manifest file, manifest.json in the project folder and add this code to it
Register Service Worker and connect to IndexedDB
In our html file we also included jakearchibald IDB library for IndexedDB manipulation. Normal IndexedDB uses events but this library uses promises. We also included sockets.io.js for web sockets. Now we are going to be creating a file called controller.js in the js folder. It will contain a class which will register a service worker, connect to IndexedDB, store data on IndexedDB and make requests when instantiated.
When ever an object of this class is created, it registers a service worker and opens IndexedDB. It then requests for cached data and then request for data from the server.
Create a file called app.js in the js folder and create a new controller object and connect to the websocket:
When the app object of the Controller class is created, it calls all the functions that are set in the class constructor, which is to register the service worker, open indexedDB and make requests.
Cache Static Resources
Create a file called sw.js in the project folder and cache static resources
By now your folder structure should look like this
css
- main.css
- material.min.css
icons
- icon-32.png
- icon-512.png
js
- app.js
- controller.js
- material.min.js
index.html
index.js
manifest.json
package.json
sw.jsNow make sure the app is still serving, if not fire it up again and close the previous tab where http://localhost:3000 was opened then open a new one. You should now have this
Now to see the awesomeness of PWAs. Kill the server (this simulates an offline experience) and then reload the page. You should get this
Our app still works, it serves stored data and it shows us a toast saying it couldn’t connect to the internet. Cool right. To see whats making this possible, right click on the page and click on inspect to open Chrome dev tools. Open the applications tab. Click on the Service Worker menu. You should see the registered service worker
Click on the IndexedDB menu and you should see our database
On the caches menu you should see our cached files
Lighthouse
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more
Get Lighthouse extension and run lighthouse tool on the web app:
You have successfully built a PWA. Go here to get the full code of this tutorial.
