Implemented PWA in Portfolio app
Repository
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
Thanks for the contribution!
I look forward to seeing more of your contributions, you have some really cool projects!
For future contributions I would recommend combining more "work" into one contribution so you can get a higher score, and in turn a higher reward.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Thanks for your approval, @amosbastian. And thanks for the advice as well, I will keep that in mind.
Hey @the-dragon
Thanks for contributing on Utopian.
We're already looking forward to your next contribution!
Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!