But what really makes a PWA? If you have one? And if you create one, how will you ensure that it ranks? Well, read on to find out ...
What is a PWA?
Since Google came up with the term, I thought we'd kick their definition:
"A Web App Progressive uses modern web capabilities to provide an app-like user experience."
- Progressive Web Apps
The thing really exciting about PWA: they could develop less necessary applications. Your mobile website becomes your application. Speaking to some of my colleagues Builtvisible, this seemed to be a point of discussion interesting: do brands need an application and a Web site or a PWA?
Realizing that some, this means that we expect things like push notifications, synchronization bottom-site / off-line job application, having a certain look / design to feel like a native application, which can be on the home screen of the device.
Work for each user, regardless of browser choice, as they are built with the gradual improvement as a basic principle.
Mount any form factor: desktop, mobile, tablet, or whatever is next.
Improving service workers to work offline or low-quality networks.
Feel like an application user interactions with application of style and navigation, as they are built on the app shell model.
Always updated through the process of updating service workers.
Served over HTTPS to prevent eavesdropping and ensure that the content has not been altered.
Are identifiable as "applications" through W3C manifest and worker reach registration services to search engines to find them.
Make recommitment easy with features such as push notifications.
Allow users to "keep" apps they find most useful on their home screen without the hassle of an app store.
Share easily via the URL and does not require complex installation.
Source: Your first application Web Progressive (Google)
It's worth taking a moment to unzip the "app-like" that. Basically, there are two parties to a PWA: service workers (we'll come back in a minute), and the architecture of the application shell. Google defines as:
display content dynamically
An application shell is the secret to good performance reliably. Think of the shell of your application package as the code that you want to publish on App Store if you build a native application. It is the load required to take off, but maybe not the whole story. It keeps your local user interface and pulls in content dynamically via an API.
- Instant Web Apps with Shell Loading application architecture
This content loading method allows incredibly fast perceived speed. We are able to get something that looks like our site in front of a user almost instantly, just without any content. The page will then fetch the content and all is well. Obviously, if we actually did it that way in the real world, we ran for SEO issues fairly quickly, but we'll cover later too.
If so, at their base, a Web progressive application is just a website used intelligently with additional features for charging things, why would we want one?
Let me be clear before entering this: for most people, a PWA is something you do not need. It's quite important that it bares repeating, so I'll repeat it:
You probably do not need a PWA.
The reason is that most web sites should not be able to behave like an application. This does not mean that there is no advantage to have the things PWA functionality can bring, but for many sites, the benefits do not outweigh the time it takes to implement the feature currently.
When should you look at a PWA then? Well, let's look at a list of things that may indicate that you need a ...
Signs PWA may be appropriate
Content that updates regularly, such as stocks tickers, rapidly changing prices or inventory levels, or other real-time data
A discussion or comms platform, requiring updates and real-time push notifications for new items coming
Public likely to pull data and navigate offline, as an application of new or blog that publishes many articles per day
A site with regularly updated content that users can check in several times a day
Users who are mostly using a supported browser
In short, you have something beyond a normal website, with interactive components or time sensitive, or the content published or updated quickly. A good example is the Google Weather PWA:
If you use a normal website with a blog that updates can be every day or two, or even less frequently, then it might be nice to have a website that acts as a PWA, there are probably more useful you can be doing with your time for your business.
How They Work
So you have something that could benefit from this type of functionality, but need to know how these things work. Welcome to the wonder that is the service agent.
service workers can be considered as a proxy that sits between your website and browser. It calls for the interception of the things you ask the browser to do so, and the diversion of responses back. This means that we can do things like, for example, keep a copy of the requested data, so when he asked again, we can serve the right back (called caching). This means that we can recover data once and then replay a thousand times without having to pick up again. Think of it as an album recording a musician - this means that they should not play a concert in each time you want to listen to their music. Same thing, but with network data.
If you want a more thorough explanation of the service workers, see this moderately technical talk given by Jake Archibald Google.
What service workers can
service workers basically exist to provide additional features that were not available to browsers so far. These include things like:
Push notifications to tell the user that something has happened, such as receiving a new message, or that the page they're viewing has been updated
synchronization context, updating data while a user is not using the page / website
the cached offline, to allow for an experience where a user may still be able to access certain features of a site offline
geolocation manipulation or other data interrogation hardware device (such as gyrpscope data unit)
prefetch data a user will soon need, such as additional down a page pictures
It is expected that in the future they will be able to do even more than they currently can. For now, these are the kinds of features that you'll be able to make use of. It is evident that they are responsible primarily data via AJAX, once the application is already loaded.
What SEO implications?
There are some issues that you may encounter if you have a site that uses the architecture of the application shell. First, it is almost necessary that you will be using some form of framework or view JS library, as angular or React. If this is the case, you will want to take a look at some AngularJS or React SEO advice. If you use something else, the short version is that you will need to be pre-rendered pages on the server, then pick up your application when it is loaded. This allows you to have all the good things these tools give you, while also serving something Google et al can understand. Despite their recent advice they are getting a good to make this application, we still see many examples in the wild waving of them terribly when they crawl JS heavy stuff.
Assuming you are in the world of intelligent front-end technologies JS, to make sure you do things as PWA, you'll also need to deliver CSS and JS needed to run the page with HTML. Not only including script tags with <code> src attribute, but the entire file, online.
Obviously, this means that you will increase the size of the page you send on the wire, but it has the head which means the page loads instantly. More than that, though, with all the JS (required for pick-up) and CSS (necessary to make sense of design) delivered immediately, the browser will be able to make your content and offer something that looks okay and works right away.
Again, as we will use services of workers to cache the content once it happened, this should not impact too. We can also cache all the CSS and JS required external separately and loaded into the cache store rather than extracting them every time. This does make slightly more likely that the PWA will fail on the first time a user tries to ask your site, but you can still handle this case with an error message content or default, and re-try the next page view.
There are other potential problems people can run for, as well. The Washington Post, for example, built a PWA version of their site, but it only works on a mobile device. Obviously, this means that the site can be explored well by mobile robots of Google, but not for office. It is important to comply with Part P of Acronym - the site must enable the functions that the user can make use of, but still work in a normal way for those using browsers that do not support them. It is about improving the functionality gradually, do not require people to improve their browser.
The only thing a bit difficult with all this is that it requires, for a better experience, you design your application for off-first experiences. How this is done is referenced in the speech Jake above. The only problem to go this way: you're only serve content once someone came to your site and waited long enough to load all. Obviously, in the case of Google, it will not work well. So here's what I suggest you ...
Rather than just send your application shell, then using AJAX to request the contents of the load, then collect, use this workflow instead:
The user comes to the site
Site returns the application shell (the minimum HTML, JS, CSS and operate right away) and ...
... The AJAX response content, pre-loaded as the application state
Fillers application immediately, then takes the leading end.
Adding to the required data means that on the load, we must not make an AJAX call to obtain initial data required. Instead, we can group too, so we get something that can make content instantly as well.
As an example of this, let's think of a weather application. Now the basic model would we send the user to view all the content a basic version of our application, but not the data to say what the weather is. In this modified version, we also send along what the current weather is, but for any subsequent data request, then we're going to the server with an AJAX call.
This means that we always deliver the content that Google can index and al without possible problems of our AJAX calls to default. Google and the view of the user, we're delivering an initial load of high performance and save service workers to provide more rapid experiments for each subsequent page and possibly additional functionality. In the case of a weather application, this could mean prefetch weather tomorrow every day at midnight, or warn the user if it will rain, for example.
If you are interested in learning more about PWA, I highly recommend reading this guide to PWA by Addy Osmani (a Google Chrome engineer) then put together an example of a very basic work, such as train a Jake mentions in his YouTube speech referenced earlier. If you are interested, I recommend the Udacity during Jake on creating a PWA available here.
Google Translate for Business: Translator ToolkitWebsite TranslatorGlobal Market Finder