Progressive Web App and Planet KDE

Hi!

Today I’m here to share an experience and show you an Application that I did last weekend.

On the last Saphoto_2017-04-12_19-17-07turday, I went to an event called Progressive Web Apps Roadshow made by Google. It’s an event that is going around the world, where Googlers talk about Progressive Web Apps and why they are the future of the web that is already here.

Was so great! I was able to watch 5 talks about the subject, and what I need to learn to develop an application.

Since I started to programming more serious, was with Qt and with the goal to made Desktop applications. And I was running with all my strength from Web Development. My little experience with the web made me be pissed. It’s hard to debug and find solutions for a web problem, because exist too many solutions for the same problem in a lot of languages, see for example the Js frameworks that each day a new one appears.

However since I started my internship, I couldn’t run from web development anymore. Because most of the applications at my company are on the web or are in a way to be moved to there. Only the critical and legacy applications are on the desktop.

But well, the PWARio inspired me. The way that the PWA is made me remember the way that the apps for FirefoxOS were made. At the time that I meet FirefoxOS I loved the idea, but sadly Mozilla killed this project last year. 😥

So the goal of a PWA is simple, you write a web application, and if the app meets some default configurations it can be a local app on your mobile with one touch. Without the need to download from Play Store or AppleStore.

So when I was returning to home I had an idea to make an app for Planet KDE. So I spent my Sunday working on it. I used the Material Design and cards to show the posts in a row. I’m using the RSS feed directly from Planet.

When I was testing and studying the mobile site for Planet, I discovered why my app is useful. When you are on Planet, it loads all the post from the writers, and if the content of the post doesn’t interest you, you need to row until the next post to discover what is the content… In the end sounds verbose and can make you lost interest in the site and drop it.

giphy

So my cards kill that. Here some experience of the app on the browser:

giphy (1)

When you opens my site at the first time, it already shows an option to add on homescreen like the image at the beginning of this blog. But in the above gif doesn’t show because I already added on my screen. You can click on the menu at the right and ask to add it on your mobile.

I loved the result and you can access this application on Github Pages and on my Github. I have some work to do, but the app is useful. I have two features on the line to do:

1 –  Bookmarks posts to read after

2 – Share the post

They are on my to-do list but I need a little more study to do it.

A thing about a PWA is that it works using a cache. It caches the static and dynamic data on your phone using Service Workers. But we have limits that the own navigators have about caching. So the first load can take a few seconds, but in the second, it will get the cards from the cache, while updating from the server. So that makes the experience a lot better. But since most of the data is only texts, it doesn’t use a lot of space. It’s a website but in the form of an app, and can be used everywhere without sweating.

I would love your feedback about it. And you are free to contribute, I will be very happy to receive your PR. =D

If you want to know more about this kind of applications you can get on the following links:

If you take a look on the project, you can see that is not hard to do or understand. I’m very glad of the result on this first version, and I’m looking forward to work more on it. I just need to find some time. Hey, do you have a Tardis to borrow to me for a sec?

Doctor Who is returning this weekend… Damn! I miss the Matt Smith era… And Capaldi’s is on the end… 😥

giphy.gif

That’s all for today! I’m waiting for your feedback!

Advertisements

One thought on “Progressive Web App and Planet KDE

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s