Okay, well good afternoon everyone.
My name is Tom, and I work in the Technical SEO team here at RocketMill.
Towards the end of last year, I spent two days at Google learning how build progressive
web apps, and today I'm going to tell you how you can use this technology to build fast,
reliable and immersive mobile experiences.
What is a Progressive Web App?
So, what is a Progressive Web App?
Progressive Web Apps are traditional web applications enhanced with modern technologies.
When they're enhanced in this way, they're able to provide an app-like experience within
mobile browsers.
What are the main features?
So, what are the main features of a Progressive Web App?
Well, the first thing to note is that they're fast.
The first thing you do when you build a Progressive Web App is you pre-cache all of your site’s
largest static resources.
By doing that, you reduce the overall network load, which allows content to load faster.
They're also responsive, because, again, from the initial build it has to be the case that
PWA's are capable of fitting any form factor – be it desktop, mobile, tablet or future
developments.
Finally they're network independent.
PWA's work offline, and because of this they can deliver rich content on low quality networks.
Who is using Progressive Web Apps?
Who is using progressive web apps?
One of the biggest companies that has invested in the technology is The Washington Post.
The Washington Post produced its PWA in 2016, whether you access The Washington Post on
desktop, on phone, or on tablet, you'll be making use of PWA technology.
In addition to this, it's also built using AMP HTML – accelerated mobile pages – which
again promotes faster content loading.
How The Washington Post has benefitted So, what are the benefits?
How was The Washington Post able to turn this to the advantage?
Well, they're capable of publishing over 1000 articles a day, which goes to prove how robust
the PWA framework is.
As well as this, they record an 88% reduction in load time compared with the traditional
mobile version of their site.
And, finally they record a 27% increase in organic users who return within seven days,
proving that when within a PWA environment companies are able the boost their customer
retention.
Why is Google investing in PWAs?
But why are Google invested in PWA technology?
To understand this we need to look at the broader context.
PWA is a part of a broader initiative on Google’s part, to make the 21st century web fit for
purpose.
The way we use the internet today, and crucially our expectations about how the internet should
work, do not fit with its original tech-centric, insecure, desktop based, English language,
1990's version of the internet.
So, Google has introduced several initiatives which go some way to remedying that.
We have HTTP/2 for faster data packet transfer.
We have HTTPS, to make basic and fast encryption mandatory, not an optional extra for sites.
And we have AMP, for richer and speedier mobile browsing experiences.
Finally, there's Google Lighthouse, which is a diagnostic tool, which developers can
use to check the speed and integrity and overall security of the sites they manage.
How do Progressive Web Apps work?
How do progressive web apps work?
We're going to drill down a little bit now and look at some of the core technologies
which are behind it.
We're going to start with this concept of progressive enhancement.
Progressive enhancement is the core tenet of PWA's and it contrasts with the notion
of graceful degradation, whereby as time goes on, older devices becomes less and less capable
of supporting the latest features, requiring an upgrade.
The idea behind Progressive Web Apps is that those on poor connections, limited hardware,
or in countries where there is an undeveloped cellular network, these sorts of people should
not be penalised or prevented from accessing fast and rich content.
In fact, these are the very sorts of people that PWA's are designed to serve.
But, progressive enhancement also has another element to it, and this comes down to how
you actually build the app, from the developer’s point of view.
So PWA's are progressive, in terms of their technical implementation, and the key point
here is that there is more than one way to implement a Progressive Web App.
It's not a one size fits all, it's highly modular and can be adapted to the needs, the
specific needs of your business or market.
For instance, it's possible to build a Progressive Web App just using HTML, or HTML and CSS.
However, once you introduce JavaScript the capabilities increase by many factors because
it's JavaScript that enables the service worker, which is the technology which is responsible
for the pre-caching I spoke about at the beginning.
But the service worker doesn't have to apply to the whole site, you can restrict it to
a sub domain or a sub folder to test the benefits of PWA, and if it meets your needs and it's
working you can extend its scope.
You can also introduce further API's, save to home screen functionality and also push
notifications.
So, we see how the Progressive Web App technology scales up.
PWAs are inherently responsive Another concept that's at the core of Progressive
Web Apps is that they are inherently responsive.
What does this mean?
Well when you build a Progressive Web App you start with the application shell, this
is basically an empty template that contains the app’s most basic graphic assets.
These are the very things that are pre-cached in that initialisation process.
During the pre-caching process, however, you must optimise your assets for responsiveness
and speed, and one of the ways that you do that is by using these technologies along
the bottom of the screen here, which I'm sure are familiar to our people in the Creative
Department.
So, these are developments in HTML and CSS, which enable you to ensure that your content
scales up to different devices, it's not all being handled solely by media queries.
Once that's in place, the same app can function across devices.
The Service Worker The last technical aspect we're going to look
at is the service worker, and we're going to look at how it functions.
So, we've cached our resources, now let's look at how it works in practise.
So we have a user on a PWA, and they click a link.
Now, normally this would send a request to the server, along with the usual client server
internet architecture.
But what happens with a PWA is, the service worker intercepts the request and it checks
the request against its internal cache, which is, of course, offline.
If it finds the content in that cache it will return it straight to the user, without troubling
the server at all.
If, however it comes up empty and the resource is not contained in its cache, it goes through
the normal process of going to the server, and then it would return the content.
This is an idealisation, in reality it's unlikely that one whole resource would be served from
the offline cache, it's much more likely that the static resources, the fonts, the CSS files,
etc., would be stored in the cache, and then the raw textual content would come from the
server.
But still, with that in place, it still means that there are reduced network requests, which
makes it load faster.
So, there's a, as I say, a simplified and idealised version of the process.
Who else is using PWAs?
I'd like to return to that question that I asked earlier though, and ask who else is
using Progressive Web Apps?
You might remember that I talked about the initial internet being English language based
and very centred on America and an American architecture.
This is an example of another type of company that has used a PWA, and it's called Konga.
Konga are like the equivalent of Amazon or eBay in Nigeria.
And the interesting thing about Nigeria is that in addition to being economically poor
it's also informationally poor.
So, the majority of people in Nigeria access internet via phones, but on 2G networks.
Given the scarcity of the network infrastructure it's very expensive to access the 2G network.
So, Nigerians are very loathed to actually use their phones for extended browsing.
This is another ample opportunity where PWA technology can be used, because it's reducing
the network load, as I've said, so it's going to be less expensive for Nigerians to access
content at this site.
And again, we see that the effects have been very positive.
So, there's been a 92% reduction in the amount of data required for the initial load, compared
with when they previously just had a bog-standard, normal phone app.
And, as well as this, there's 82% less data required in order to complete the first transaction,
be that a goal or a conversion.
So, I just wanted to give you another window on how this technology is really revolutionising
mobile browsing across the world.
The main features of Progressive Web Apps To recap, the main features of Progressive
Web Apps.
They're fast, because they implement JavaScript service workers, which can pre-cache resources
so that they're accessible offline, reducing the number of requests to the server.
They're responsive, because at the very outset it's necessary that they meet the latest standards
in responsive design.
And they're network independent, they can work offline and deliver rich content on low
quality networks.
Thank you very much.