My first Progressive Web Extension (App) — Part 1

How my first Progressive Chrome extension improved my skills as a Front End Developer and get to know about the importance of Progressive Web Apps plus how to build one.

Photo by rawpixel on Unsplash

How significant knowledge about Progressive Web Apps (PWA) will be an advantage in your profession?

After publishing this extension, I thought these set of experience should be shared which would be beneficial to take your skill one step further.

Though the extension looks quite normal when compared to its competitors, it is not in its functionalities. No more explanations. Here it goes.

Quotes — A minimalistic progressive web extension.

I understand Quotes but what is that progressive web extension? Care to explain?

Yes, I will.

1. Go to the Quotes (live) app and disconnect your internet. Now refresh your webpage. Wonder how it loads without an internet connection, that too in https?
2. Open my portfolio Balsu.me in your favourite browser in your mobile, and add a shortcut to its home screen. (in the iPhone-Safari browser, click the share icon and select “Add to home screen”). Now you have installed my application in seconds. Yes, it is app now.
3. Quotes app will load instantly and ever show its quote even in uncertain network conditions.
4. Quotes respond quickly to user interactions with silky smooth animations.
5. Quotes will make you feel like a natural app on your device with an immersive user experience.

We are making it progressive. Simple.

53% of users will abandon a site if it takes longer than 3 seconds to load!

Yes. Who would love to wait till the site loads habitually longer?

This is what every Front End Developer need to know right now. It is must to learn about Progressive Web Apps and it’s implementation deals.

Not everyone wants to install every single application on their device and here comes the saviour called PWA (Progressive Web Apps).

Getting Started.

I have attached the external links below which was very helpful in building my first chrome extension as a PWA for your reference.

Developing a chrome extension is effortless than you think. Knowledge of HTML and JavaScript is enough to build one with a tiny understanding of CSS to dress it up.

How to Create and Publish a Chrome Extension in 20 minutes_Ever wondered what it would be like to create a Chrome extension? Well, I’m here to tell you just how easy it is…_medium.freecodecamp.org

An aforementioned article by Jake Prins is more than enough. But don’t forget to check another article mentioned below for PWA guidelines before you start.

https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp

Develop your extension first and make it progressive.

Do install Web Server for Chrome extension to check how your Progressive web extension runs in your server before you host.

If you would have reached this point, I am sure you are pretty much interested in taking it further. Stay tuned for the next article (Part 2) on How to build Progressive Web Extension (App) at ease with aforementioned links.

Interested in the story behind the development of this extension? Read,

Motivation doesn’t last. That’s why you need it daily!_When was the last time you have worked towards your goal? If you have stopped working on it, why?_medium.com

Thank you.