PWAs: Why you want one, how to get them & optimize for them – #CrawlingMondays 4th Episode

In the 4th episode of Crawling Mondays Aleyda shares why Progressive Web Apps are the future of the Web, how they bridge the native mobile apps and mobile websites features, how to implement and optimize them.

To follow more updates on Crawling Mondays, subscribe to the YouTube channel and follow to @CrawlingMondays in Twitter.

Video Transcription

Welcome to the most magical edition of Crawling Mondays. I know because I have grown somehow this huge Mickey Mouse-like hand here, however it’s going to be super magical not because of that but because of the topic today, progressive web apps. I have started to speak about it, this topic, much more lately.

Last month you can see here I published this blog post, sharing a little bit about what they are, what are the functionalities, why we want them and how we can actually easily start implementing them on our own sites, even. The same with the presentation that I gave a couple of days ago.

I would like to cover today some of the most important aspects, highlighting those much more critical aspect that I believe we all should take into consideration and also taking you to see some of those resources that I consider to be very, very, very useful to really facilitate the implementation of progressive web apps in any website, considering also a little bit of course, SEO implications of them. We are going to see that actually it shouldn’t be necessarily bad progressive web apps. They don’t necessarily challenge additionally of what we should be already doing in today’s 2019 state of technical SEO, anyway. Let’s take a look.

The main issue, the main challenge that we have nowadays is that we live in a world that we don’t even realize that mobile apps are broken. They have evolved like this lately. They eat your mobile battery a lot, they take a lot of phone space, require constant updates. App content is not findable, which I have to say, this is one of the most important and critical things that I will say. They pay me more as an SEO, right, that the content lives on our, not necessarily open environment that are the app stores and try to find specific information that any of these web apps have internally. That’s not necessarily that easy right now. They are fragmented and vertical. There’s so many different apps that brands can enable to cover limited functionality to, so at the end, this will make app development very, very, very expensive.

Why do we still keep using them, right? Why do we use these apps still anyway? Realistically, the mobile web especially, it’s not necessarily that better from a usability and functionality perspective. Opportunity, still today, mobile websites suck a lot, many of them. The Aer Lingus, they don’t even have a proper mobile site, a mobile version, or when I was looking to research a few information about a few attractions on this night when I was going on the last days.

Take a look. This is an actual screenshot of the site on my mobile that I was trying to access. There was no way, and you can see how what I can actually see is the ad and that’s it. Speed and usability are still huge challenges. And of course, we cannot access that information when we are offline. This is a big, big challenge for a better engagement from a user perspective, of course. And off course, is your app access for frequent use too, because we can add the app on a home screen of our own phone, and many apps need to use additional functionalities and features of our phone hardware that is not possible to do for normal web apps.

So all of this isn’t devices from a functionality perspective to end up using mobile apps and of course to brands to build those mobile apps despite all of the challenges that I mentioned before. This type of experience is what progressive web apps will help to fix, and it closes the gap between mobile web a lot of user added very high reach, good reach, but difficult to use sometimes to access the content of line and that is why it has engagement challenges. And then on the other hand apps easy to use from that perspective much more engagable, easier engagement but in this closed environment where the content is not open.

This is how progressive web apps will close the functionalities between native apps versus responsive website, mobile website. Their functions, online we can use push notifications there in Sullivan installable on home screen of smartphones, and they can provide these full screen experience.

Products of web apps are an additional add-on and provide this additional functionality on our current web experience right now. However they don’t provide any SEO advantage. I mean they are not a ranking factor, not because we are using progress well we are going to rank better on Google. On the other hand it should be also said that they don’t necessarily challenge more SEO of what we already have necessarily.

Why, because I see that a lot of people think that for example progressive web apps are harder because they are web apps by default right and many of web apps are single page applications. Well, realistically many are single page applications, but a few are not. Right? This is not a requirement, I mean as far as a single page application can become a promise web app, but in order to be a progressive web app that complies with all of the requirements we are going to see of the existing checklist to validate it, they need to provide single URL, specific URL per page. So if they are a single page application it won’t work well necessarily, but this is a restriction and a challenge and a problem that single page applications have. Not progressive web apps because we can evolve, and we can add progressive web apps capabilities to any type of web app not only single page applications but also to multiple page applications. And we can even enable progressive web apps functionalities, and I’m going to show you how to your existing website the guidelines for building index of well progressed web apps.

When they highlighted that one common approach to creating progressive web app is to use client-side rendering, rely on JavaScript to generate a lot of the content of them. Because many of them are the evolution of web apps, right? Like this progressive web apps functional isn’t characteristic for really existing web apps that rely a lot that they have been developed with JS frameworks that rely on client-side JavaScript rendering in order to show the content.

But again, this is not an unnecessary challenge for this web app, these are a challenge of current JavaScript development status in 2019 that making it a little bit harder to cool to identify the content crawl and index the counter to render the content.

For a website, let’s say that you already have a website you don’t intend to necessarily create a web app from scratch, you also can enjoy of producing web app type of advantages here. You need to build a responsive website that can also be and basic you want an alternative of technology of course. You can create a web manifesto JSON file that will inform about the progressing web apps to be installable and then also set up a service worker that is a Java Script, that will run in the background defining what data is available and what is there to update or not in their notifications, and make it workable also while offline.

What there is out there too is to make sure that any of this different type of progressing web apps to be considered real progressive web apps, they should comply with these features, right? They need to be servers of HTPS, they should load while offline, they should have a time to interact in less than 10 seconds in 3G. Each pitch should have its own URL. Sorry, space right? So the requirement here. And we can see how we can provide this characteristics to any type of website. Let’s take a look how.

And we have here very good step-by-step guides and I am going to show you a couple of websites that I have built following these guides. This code labs guide from Google with step-by-step to build progressive web app, migrating from a current existing website. We have this other that is to build a developer progress web app from scratch or built a progressive web site too.

So this website that you see on screen right now, that is the website that I created that is called How PWAMP works. It’s actually created on PWAMP by following this step-by-step guide here from the code labs where they actually give you all the information and all the codes to create your first PWAMP website.

So for example if I go and take a look here at the HTML you will see how this is an AMP-base web page here. There is a service worker here that is being called and if I run here the progressing web app validation from Lighthouse it will validate the main, the most important characteristics and features that I explained before that are required.

Let’s see, so here we can see how using the validation here. We have been able to check that this page here this HTML amp HTML-based page, passes all of these validations to be considered a progressive web app. Loads fast, serving HCPs in this case, where is the service worker response with that 200 went offline. Users can be prompted to install the web app if we want. So this is great. We can validate that this is indeed a progressive web app

Here is another example of a shockingly for a superb app feature site, “Why my web traffic dropped?” And it’s a website that I created using WordPress. But we can see here how for examples this particular page here, the service worker that it has here, that is enabled with super progressive web app, which is that here the plugin that I use for it and it’s completely free to use with WordPress. And here the web app manifest alright again with the name here’s the little JSON file that I generated with it, the colors, the icons to be shown on and downloadable to the home screen here.

So we can also validate this easily with Chrome dev tools here using the applications panel here. And then again we can do the validation that as we did before with Lighthouse by checking if this is a progressive web app or not. So you can see here that in this particular case everything was passed but that it took too much to load, oh my, I blame WordPress for that. No, no, no, never mind.

But all of the additional validations are correctly pass here as you can see. The few additional validations not need to need to be made manually like for example that each page has a URL, side works, cross browser, of course you need to manually check that in other types of browsers too. Pages transitions, don’t fill that they block, and then of course our web apps like this one of Starbucks that they have this parallel web app that lives in an app. So domain that have progressing web apps functionalities.

So for example I have come here to validate these functionalities, I will run the validation with Lighthouse. We are going to see how yeah, they pass functionalities. This is a progressive web app indeed, however we are going to see how in this other particular case, unlike the case of the amp-based website, or the WordPress website that of course is already optimizable or optimized, because it was a former website that where we had been doing SEO anyway before and optimizing it. This case is a little bit different, right?

So again, it passes the validation smooths of them. This one of the speed is not past, surprise, surprise. But then the other functionalities are validated, are correctly validated. However what we can see here on the other hand is that a lot of this content here, if I come here, and I see this content I look for this content all done, I’m going to see that it exists there. Join Starbucks rewards to get more of what you love. However if I go and look for this content, and the source HTML, I won’t find it.

Because they rely on again, Oh join Star Wars for article look is here what is here in this chunk of scripts, right? It’s not in the HTML, you can go to the mobile validation from Google for example to see the visual representation of how Google renders the information of this app here. So that is for this particular page, but we should be able to do that for every meaningful page, and we know that this will work well maybe for smaller website but if this is a dynamic website and it’s obtained in the content all the time that has millions of URLs, well it can be a little bit more resource intensive for Google. And we really want to facilitate this, we don’t want to rely necessarily on client-side rendering, and we need to be careful and verify that the content that is indexable, that is crawlable, that is, in this case, render on the page also. This is the one that any user can access, and the ones that we really want to make sure that will cease from our content. But again this is because not necessarily this is our first web app, but this is because it’s a mobile app that relies on and JavaScript rendering.

Last but not least, Google I have to say that really facilitates our lives on this because they have these examples here of indexable progressive web apps pages. One of them is hybrid render, another one is client-side render. Though the server-side render they provide the code here on GitHub and they have also the examples here that we can take a look, so we can share this with our developers if we’re in the process to develop a new website that we want to have a progressive web app functionalities and at some point we want to check their implementations quite easily. We can come here, and we can check how it is progressing web apps for example a server-render website, a client-render one. Of course we come here and if we disable the JavaScript we will see that there’s not much to see, surprise, surprise. So if we load again it would be like this, yes.

And of course it is something that we want to avoid but again, not necessarily only a specific issue of progressive web apps, but the nature of the web nowadays, right? And this is why it’s important to always double check, double validate that we always crawl with and without JavaScript and we compare the those crawls as I show here on the slides, and we are aware that something there important is missed.

I hope that you have enjoyed today’s edition of Crawling Mondays and if you hadn’t yet, you know, see all the opportunities that progressive web apps have for us in the future, how easy it can be to implement and how they don’t necessarily add up much more complexity if you are already optimizing your website, what you already should be doing anyway. If you want to take a look at much more, check out the ‘how PWAMP works’ website. All of the resources that I have here, guides, even to track progressive web apps events too.

There are some themes here and in WordPress that already for progressive web apps too or tools to validate progressive web apps and producing web apps examples too. There is something very, very important before I leave this website that is called the PWA directory, here you can take a look at many websites and web apps that are already progressing web apps too. So for example I can click on any of them, and it will allow us to see their Lighthouse validation status here, they’re progressive web app and performance one, and it is something that we can share with our team if they want examples. If they want to reference we can check out the manifest here and this is super exciting because every time that I check out this website there are even more progressing web apps out there too.

So thank you very much, I hope that you have enjoyed today, progressive web app edition of Crawling Mondays and hopefully you have liked all the information about all the functionalities and opportunities out there. If you want me to cover any topic too that I haven’t yet covered, just let me know, send me a message or send me a tweet at crawling Mondays. And I am very looking forward to see you next Monday too. Have a great week. Bye-bye.