The festival of WordPress
January 22, 2021

This is an archive of the January 2021 event

Why Progressive Web Apps for WordPress?

Progressive Web App is a hot topic on the web right now.

As per recent studies (Comscore ), users spend more time (87%) on the native app compared to the mobile web because native apps are more predictable, they work offline, show notifications and have access to mobile sensors.

However, 78% of the time is spent in the user’s top 3 apps, and the rest of the apps just sit there and eat up the memory.

Mobile web, on the other hand, has a better reach (100 visits/ month for an average user) but does not does have a native-like experience.

In this talk you will learn how we can combine the capabilities of native apps and the reach of the web, to get the best of both worlds, using Progressive Web Apps with WordPress.

Speaker: Imran Sayed

Time: 5:00am UTC
Region: Asia
Stage: Global Stage

Hello and welcome everyone. My name is Imran and I work for rtCamp, rtCamp provides WordPress solutions to enterprises. And today we’re going to talk about why progressive web apps for WordPress. Let me ask you this. What can evolve faster than technology? It can be our expectations. We want everything better, easier. And now.

However downloading apps may sometimes take forever. And many parts of the world. Data is expensive and many areas also have poor connectivity. So we really need a next generation of the mobile web that solve these problems. Let’s talk about uses trend on mobile web versus mobile app. So, what are the benefits of using native apps?

Well, they’re easy to access from the home screen. They work offline, you can send push notifications to bring the user back and you can also access the mobile features and census. Now mobile apps have got better capabilities. However, mobile web have got better reach approximately hundred visits per month for an average user.

Now can we get both? So if we can combine the capabilities of a mobile app and the reach of the mobile web, we can get something gold. PWA. Now what are PWA or PW is, are progressive web apps. Which are web applications that look and behave as native apps. They progressively enhance the web applications, look and feel like native apps.

Let’s take a look at this one. So as you can see that if you go to  Academy, and if you open that in the mobile web browser, it gives you an option to add to home screen. When you click on the add to home screen, it will go ahead and add that application to your home screen, and then you’ll be able to access that like any other mobile applications, as you can see, if you click on this.

It opens up. There’s no address bar. It feels like a native application, which is brilliant. So what’s the need of PWA. Well, it’s been observed that users hate delays and unreliability on mobile. The level of stress caused by mobile delays as compatible to watching a horror movie, you can get the stress level of something like this when your mobile application is slow.

Its also been observed that 50% of the smartphone users are more likely to use the company’s mobile site when browsing or shopping, because they don’t want to download an app and apps take too much phone memory. And that’s the number one issue that leads to uninstalling those mobile application. You can see that again, says, um, full, sorry.

I can’t have more.

Now where an Android application installed would at least require three steps. For example, redirection to play store downloading, relaunching the Android app at the top of the funnel, PWA installation is done seamlessly in one click, and it does not take the user away from the current conversion funnel, which is good for business.

So PWAs is make it easier to come back to the site. Now Google follows a simple rule and that is focused on users and all else will follow. Google says, think user first, what are my customers’ needs? How does PWA provide them? And based on the observations, it is found that users prefer experiences that are fire.

Not this fire, certainly not this one, but fire would actually lead to fast, installable, reliable. And engaging. Let’s take a difference between the native apps versus PWA. So for native apps, you need to develop and maintain three separate codebase. However for PWA is just a single code base, which is brilliant.

Native apps have high friction of distribution, however PWA are accessible on Android iOS and a web, and the on variety of browses. Native apps are less discoverable. However, in PWA content is discoverable and indexed by search engines. In native apps, only the app downloaded link, can be shared however in PWA direct link of any page or screen can be shared.

Native apps are not bookmarkable. However PWS are. Native apps update the app through play store while PWAs are always fresh. Native apps have high data usage, however, PWA have large data savings. So based on what we discussed, these are some of the features of PWA.

They are progressive, they are responsive. So work across multiple devices. They work offline, both on the web, as well as on mobile, they’re always fresh. The data is always fresh and they are saved. So one of the key requirements of PWA. Is that it needs to be on S3PS they are discoverable indexed by Google.

They are ringing doubles. You can send push notifications to users and bring them back. They are durable and they are linkable. So you can share those links. Now, what does this mean for business. PWAs make good business sense. Now progressive web apps are on a lot of companies, roadmap to modernize their website, adapt to the new users, new expectations.

The often asked questions to themselves. Does it answer the actual customer needs? Does it grow our business? Is it feasible and robust, et cetera. So progressive web apps leverage modern web capabilities. So, what are the business impact of a fast website? What you can to do is that when working on your speed optimizations, start measuring your site speed frequently with appropriate tools and metrics to monitor your progress.

For example, measure your metrics with Lighthouse, fix clear targets, like having good core web vitals scores and incorporate performance budget into your build process. You can isolate the impact of the incremental speed changes and calculate how much extra revenue your work has generated.

It will be interesting for you to know that E-bay made speed a company objective for 2019. They used techniques like performance budget, critical bard optimization, and predictive prefetching what’s exciting is that they concluded that for every hundred milliseconds improvement in search page,loading time add to cart count increased by 0.5%, which is great thing for a business.

Also Paul Armstrong, the tech lead at PWA at Twitter. They did very thorough documentation in his case study, which is called Twitter light and high-performance react progressive web apps at scale. So I will share the link with you. However, this basically describes the importance of collecting data while tuning your PWA to maximize the performance optimizations.

What will be interesting for you to know that Google recently announced that in May, 2021 any non AMP content page that meets Google news content policies like core web vitals, paid experience signals, et cetera, will be eligible to appear in the mobile top stories feature in the search. And what it should also know that Google will prioritize pages with great page experience as it ranks the results, which means the website having the better core web vitals and page experience is likely to appear higher in the result.

So we talked about what are PWAs and what are the benefits it offers. Right. And why is it important now? What if we had to build BWL? How do we do that? So we can build PWA in a few simple steps. First we can create the web app manifests. So what is web app manifest? Well, it’s just a design file that contains metadata.

It basically tells the browser about your web application, how it should behave been installed on the user’s mobile device or desktop. So a valid manifest for Chrome would be manifest dot json. Same for Opera, Mozilla. It’s manifest dot webmainfest, Microsoft its manifest dot webmanifest. Et cetera. And this is how it looks like.

So since this is a json file, it will appear in a key value pair. So you have short name, let’s say “Codeytek”. This will be used for homescreen and launching, et cetera for your app. Then you have the name. I just call it the Academy, which is going to be, be, uh, used at the app install prompt. Uh, you can put the information about the icons, which will be used for home screen app launcher, task switcher and splash screen.

Also, uh, you can pass the start to URL for your site, team color, background color for your app, uh, display information, scope, like which directory, uh, is used for PWA, et cetera. And. Then all you have to do is just tell your browser about your manifest file to just use LinkedIn tag and then link it. Now let’s talk about browser support.

Do you think all browsers will support PWA features? No. Right now, which browser do you think will be the last to support the PWA features? Yes, you’re right. It’s internet Explorer. Always the last isn’t it. So as you can see that internet explorer, it’s not supported. Um, ed has a support. Chrome has full support.

iOS Safari has partial support and so on and so forth. Now let’s talk about service workers. So what are service workers? Well, service worker is a script that you browser runs in the background separate from your webpage. So what does it do? Well, let’s say it is a web browser and you have a remote server service workers, basically a middleware that intercepts the http request.

And then at that point you can cache the response and then serve the response from the cache itself. So you can do different things. You can have caching strategy, et cetera. We’ll talk about that. We’ll talk about that more in a moment. All right. So let’s see the life cycle of service workers.

So there are different events in the life cycles. First was register. So the time of register event, we registered the service worker, and then at the time of install, we add the files to the cache. And when it’s activated, we also delete the previous cache. So that, that the data is never stale. All right. And then we register the service worker.

So this is native JavaScript. We have service worker. We check if service worker is available in navigator, then we go ahead and register it by passing the URL of the service worker file. And then we registered it and then. In the next step, we go ahead and add the files to the cache. We go ahead and create a cache version and paths for the file to be cached.

So we create a constant with the cache key, and we also create another constant, which will contain the list of the URLs that needs to be cached. Then at the install event, we listened to the install event, and then we go ahead and. Cache the files and then ensure that any new version of the service worker will take over the page and become active.

Then the next step at the time of activate we go ahead and delete the previous cache. So we listened to the event called activate, and then we go ahead and check if there’s any new cache version, we go ahead and delete the previous cache in that case. All right. So this is how it looks like. So if you go to console and if you load your web application, you can see service worker’s installed caching file, registered, activated, checking.

If there’s a new cache version and no new cache version found. All right. If you go to application from inspect element, this is where you’ll find information. If the service workers registered, you’ve got the source status. And then you can go to manifest, and this is our manifest.json file information.

We’ve got short name, the theme, color, background, color icons information, and all of that. Okay. And this is where it docks. This is where it tells you about the cache. All right. So once the service worker is active, it has a full control over the pages. It can now handle events like Fetch, push, and sync, et cetera.

So how it works, let’s say, let’s take this example. Let’s say this is your web browser. And when a network request comes, so the browser makesHTTP request, service worker is going to intercept that request. It’s going to say, Hey, wait a minute. Before that request goes to the server, I need to do something.

I need to check. If that requests URL is in cache. If it is in cache, then I’m going to serve the response from the cache itself. But if it isn’t, then I’m going to make a request to the network, to the server, and I’m going to return the response from the network request. However, at this time I’m also going to cache the response so that the next time the request comes in, I can serve it from the cache itself.

All right. So in the next step we Fest the data from the cache. So we listened to the fetch event and then we respond with, uh, by checking. If the requested URL isn’t the cache or not, if it is it’s going to return the response from the cache at the vice, going to me a fresh request to the Server. Awesome.

All right. So this is the fetch event. This is how the Fetch event looks like. So you can see that it’s fetching the response from these URLs. And if you go to the network tab and inspect element, this is how the service workers look like. The last thing, if you would like to have a custom add to home screen, you can add that I will share the link for the GitHub so you can check out the code.

I won’t be going into the detail of this. That’s pretty simple. All right. So now we go to the codeytek.com. This is our progressive web app, the add to home screen. As we got the popup, you can see it’s adding to the home screen, and then let’s go to our home screen. There’s our application, click on it.

Perfect. This is the PWA. What we’re going to do now is we’ll go to offline mode and see if it works offline. There you go. Congratulations. This is working offline. We just build a PWA perfect. And you can expect a lighthouse score of something like this. Isn’t that amazing? Let’s clap for ourselves. We just built a PWA.

This is every developer’s dream. Isn’t it? Yeah, really? Okay. So so far, so, so far we have learned about what are PWA, what features do they offer, et cetera. Now, what if I’m not a technical expert? Like I’m not a developer and I’m sure this question would come into your mind that I’m not a developer, right.

So I can build a PWA. How do I convert my existing WordPress website into PWA? Can I do that? How do I do it? Okay. So let’s talk about that. So we have certain plugins available in WordPress free plugins that you can use, which will convert your existing website. WordPress website into a PWA these are PWA from Google.

You have Super PWA, WordPress Mobile Pack, PWA for WP and amp, progressive WordPress, et cetera. So let’s say so in this example, We’re going to, so let’s say we install an activate Super PWA plugin. This is how your setting screens would look like. Remember we discussed about the manifest Dot Json, where you had the application name, the icon information, background color.

So basically this is the information used for that file. Most of this information will be pre-filled, but if you want to customize it, for example, you like your application named to be different. Um, and you would like to choose a different background color for your PWA. You can do that from here. Okay.

All right. So let’s say you have activated the super PWA plugin, but what if I want to send push notifications to my users for my WordPress website? How do I do that? Well, before we jump onto that, there’s something interesting. I like to share with you. Based on the research, it is observed that smartphone users are more likely to purchase from mobile sites that offer relevant recommendations on products and 85% of the smartphone users say that mobile notifications are useful so they can get the right recommendations of what they were looking for.

So let’s see how we can go ahead, send push notifications for our WordPress website. Well, the good news is that there is a free plugin available, and that is called one signal. All you have to do is just install and activate this plugin. Just follow the basic step. Like you’ve seen to create the account at one signal and then just fill up the basic information like app ID, Rest API key, and then you can customize the settings as well.

Once you’ve done that. And once you’ve got your super PWA installed and then one signal activated. The good part is that the super PWA compatible with one signal, once that is set up, then your WordPress website is going to get it converted into a PWA. So for example, I activated that. So if I now go to my WordPress website, you can see that I get an option for add to home screen.

And this time also get option for sending push notification. And when I accept these, add to home screen and accept to receive push notifications says thank you for subscribing. And it is adding this application onto my home screen.

Oh, let’s go to a home screen. There’s our applications. Let’s open it. You can see there’s no address bar. So it looks and feels like a native app. That’s our blog page.

Now let’s go offline. So I’m going to hit the offline mode. Airplane mode.

Let’s close. Everything.

Let’s reopen it.

And there you go. It still works even when you’re offline. Awesome. Now let’s try to see how the push notification works. So ideally I would expect them when I publish a new post, then a push notification to be sent to the user. Right. Let’s do that. So I’m going to publish this post. This is my WordPress post.

I hit publish. Notice what happens? You get a message on top. There you go. It says successful sent to 10 recipients on the right hand side. Notice on mobile, you got a notification. You click on that notification and you’re straight into this blog. Isn’t that amazing? It’s absolutely brilliant. I mean, I can actually engage my users by sending them push notification and is automatically triggering that to all my subscribers when I go ahead and publish the post.

Amazing. Perfect. Okay. So now let’s talk a little more about browser compatibility. So it’s compatible with Google Chrome for Android Mozilla Firefox for Android Edge for Android, Brave for Android, Samsung internet. What about iOS? So iOS started supporting PWA from version 11.3 only. Some features have supported an iOS, not all.

For example, background sync, and a web push notifications. So currently not supported. Uh, and, and you need to manually press the share icon and then add to home screen for iOS. Right some of the examples I’d like to share for PWA. So you have qualitech.com, which is a PWA. You have to delight Instagram, uh, Uber, M Uber Forbes.

FlipKart Lite, Smashing magazine, and Pinterest in there and there a more aswell. At rtCamp, we build something called wp-decoupled, and this works offline as well. So this is a PWA. So the front end is in React using next-es. And the backend is in WordPress. And this is a WooCommerce application. As you can see that it’s working offline as well.

I have also build an open source Gatsby WooCommerce theme, which has the front end in React with Gatsby and backend in WordPress. And as you can see that these are all the categories of the products, you have, these products that are available, you have pagination and you can also go offline if I’d done off the wifi.

And if I refresh the page, you can see that it still works. I can also search the products. It still works. I can also search the products so I can do pennant and you can see that it’s searching offline as well. Yeah. And then you’ve got, add to cart option. So these are, you’re add to cart. You have checkout options, you have the payment gateway available, you have the cart available, and then you also got the.

Uh, Gutenberg support, you can write blocks. And then this is going to show over here. And these, you can see that these are all working offline so you can. Add the products to your wishlist. And when the internet comes back online, you can just order them, which is brilliant. Okay. And you don’t need to build an extra code base for mobile application because this is a PWA and you can actually add to home screen on your mobile and use this as a mobile application, which even works offline.

So let’s see how that works.

[ MUSIC]

all right. So I hope you enjoyed the demo. And this will give you a website, a better performance and better user experience. So for references, uh, you want, you can go to, so for PWA, you can go to developers.google.com/web/fundamentals. You can check the code for the PWA that we built on imranhsayed/pwa-concepts on GitHub for WP decoupled, you can go to rtCamp slash WP decoupled on GitHub.

And for the Gatsby WooCommerce team on imranhsayed on GitHub as well. If you would like to we’ll learn WordPress, you can go to learn dot rtCamp.com and it’s a pretty extensive source for learning WordPress. You can check it out. If you’d like to learn programming for different tech stacks, you can go to Codeytek.com.

And then courses and you can learn about babble Chrome, CSS, Gatsby, uh, progressive web apps, WordPress, and there are many more free courses available. All right. So that’s all, congratulations, everyone. We learned about what are progressive web apps, how to use them, how to develop a PWA and how to convert your existing WordPress website into a PWA WordPress plugin.

So I hope you enjoyed it. Thank you so much. You can follow me on. Twitter. My Twitter handle is @imranhsayed. Thank you very much.

Share this session

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email