What I’m going to do is I’m going to show you how I did my most recent project, which is a PWA that uses WordPress in the back ends. 28 % of domains actually use WordPress and that’s a pretty impressive number, but also WordPress is written in PHP, which you’ve never done on supercharged before, and I know PHP has a pretty bad reputation, but I would like to ask you to not like complain about it In the comments, because I think at around 80 % of backends use PHP, so it’s probably good to have some experience with PHP.
If you are a web developer with WordPress, you usually have two ways to get into the system. You can either write a plugin or you can write a theme if you want to introduce PWA features on a simple way. It is much easier to write a theme and that’s what I did. I just want a theme that uses serviceworker and you know progressive image. Loading all these little things, and I would like to show you how I did that before we start.
I just want to give one warning that I basically have no experience with WordPress, which is kind of good, because on the one hand, that means that I didn’t go into the WordPress internals and did any kind of monkey patching, but also it might mean that I Have violated some wordpress best practices along the way, and I hope you can forgive me for that. But if you find anything that I could have done better feel free to leave a comment or open a PR on the repository.
The link to which I will put in description, so you can check out the code and maybe even run it yourself, but without further ado. Let’s take a look at what I built and where we’re going to arrive, hopefully at the end of the series. So here I have my Moto G 4, which is my development device. The Moto G 4 is what we consider a low end device. It’s not really powerful, but I use it because I want to make sure that all the animations and the loading I did worked smoothly on emoji 4.
So if I open what I add to homescreen here, that is the block it loads really quickly and it’s right there and then we can scroll along and see that every blog post has a button to make it available for offline reading, which I think is a Really nice feature for a blog, and if I open one of the blog post, you will see this really nice transition happening, which makes it feel really slick, and you can just read through the blog post, the images will load in once they scroll into view in Order ahead of time – which again, I think is a really data saving feature and more blocks should have it at the bottom.
You have a comment section where you can also leave a comment yourself and you can even leave comments while offline, which is also a pretty interesting feature, if you think about being in a tube and leaving a comment. But as you can see, even if I go back, there’s transitions it’s happening and they look really nice, and so I pay enough attention to smooth animations, really good loading performance and just a nice user experience.
So I hope you’re excited about this. I certainly am in the next episode I’m going to set up the development environment and I use docker for that which was a really interesting and, in the end, a really good experience. So if you’re interested in that stay tuned, subscribe to the blog and I’ll see you next time, you