Implemented PWA in Portfolio app

Repository

aviaryan/work

---

New Features

Given below are features that were added to make the portfolio app a Progressive Web App (PWA).

1. Add a Service Worker for offline caching

A Service Worker file was added with offline caching implemented to serve the app resources in an offline first manner. The resource in the cache is updated if a network connection is found. The skeleton of the app is cached on the Service Worker installation so that it can be served promptly even when network condition goes off on the second user visit.

Implementation Details

A sw.js was added to implement this feature. It is registered on page load from the loadSW.js file. A huge thanks to this Google Labs resource for giving me some hints.
sw.js
loadSW.js

2. Add an app manifest

A manifest.json file was added to specify certain attributes of the PWA such as the application name, the theme color, the app icons, the app's starting orientation, etc. It helps to make the app installable on mobile phones and other devices that can run Chrome and other modern browsers.

Implementation Details

Adding of manifest.json and registering it in the start_url HTML file (index.html) was needed to implement this feature.
manifest.json
index.html

---

Screenshots/Diagrams

Thanks to the Service Worker implementation, the resource serving flow of the application now looks as follows -

---

Proof of Work Done

My GitHub account is https://github.com/aviaryan

The contributions related to the work done can be found in this GitHub comparison.
https://github.com/aviaryan/work/compare/7c5223f0f746a13f829d946a18c20ff3f54f843b...master