The fastest PWA blog experience I’ve always dreamed of

#pwa #wordpress #api

Progressive Web Apps (PWA) is the 'distin' now. I had fun consuming my WordPress blog via API with a new UI, built as a PWA using Angular

There's a bonus feature on Khophi.Blog. Scroll down to try it.

Earlier this year, I wanted a playground to have fun. My blog powered by WordPress has a boring UI (kinda), although it gets the job done.

Aside the UI, the load time also was an issue for me. I stopped showing ads on the blog, with hopes it'll improve the load speeds.

Well, that move did help, except not much.

I could throw more firepower to my servers, and or do even more caching and other optimizations to get things going faster.

Or, I could consume the WordPress via it's API. I went with this option, and Khophi.Blog was born.

PWAs - I might be obsessed. Help me!

All I can think of for close to a year now is how best I can leverage the ever improving web technologies to build better, mobile-ready, and richer applications.

So a PWA is basically, as defined by Ionic,

"are a new way to offer incredible mobile app experiences that are highly optimized, reliable, and accessible completely on the web."

It's a website, a web application, but mobile users can at the same time experience the application as a mobile app on their phones.

Angular is my go-to for building my PWAs.

So Khophi.Blog

I built Khophi.Blog to be as minimalistic as possible, with the utmost focus on speed. Thus, everything about the site is fast, lean, streamlined, and depending on who you ask, boring! And no ads.

To achieve the above, Angular Framework was the choice of front-end framework for the UI plumbing. The grooming and fashion part is handled by UI Kit.

The backend is blog.khophi.co (a WordPress CMS), which exposes API endpoints of which the frontend consumes.

As you peruse the code, you should come across features making use of functionalities like

It's PWA, installable on mobile and desktop
Angular Animations
The use of @Input and @Ouput for component interactions
Handling offline mode
Code reusability (via Components)
HTTP Service
Infinite scrolling
Web Share API
Caching content for offline viewing

Development

I'm constantly looking for ways to even make the application faster, and thinking of what I might need to remove to achieve that.

"It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove" - Antoine de Saint Exupéry

The project is available on Bitbucket, and PR and or Issues are welcome.

Bonus

You can now try your WordPress blog via Khophi.Blog.

Steps are

Visit khophi.blog
Tap/Click on the Hamburger menu
Select "Try"
Enter your WordPress site URL in there. Don't begin with https:// and don't end with anything after the domain. E.g theafricandream.net
The blog will change to loading content from your WordPress blog. Depending on how complex you've rigged your WordPress site, some things might break. Happy to hear all the errors, if any.

Simply raise an issue and I'll take a look. If PR too, the better.

See the GIF below to learn how.