Over the past two years, Google has been encouraging web developers to adopt a new type of build which makes mobile websites act like native apps, emulating some of their capabilities to improve speed performance, content delivery and engagement all through a standard mobile browser. The resulting websites that are produced by the culmination of different cutting-edge tactics are described as Progressive Web Apps (PWAs).
The key characteristics of PWAs are that they look and feel like native mobile apps in that they can be full screen, while degrading gracefully according to the user’s device. Like apps, PWAs can also be made to work offline and can launch alert notifications to re-engage users.
The initiative around PWAs from Google promotes the benefits of having app landing pages that are natively linkable and indexable for search engines. PWAs are additionally secured by encryption to protect user data and there’s no need to install anything via an app store - PWAs can be discovered through browsing as normal.
To date, PWA adoption has been limited to a few high profile publishers, namely; Forbes, Washington Post and Financial Times. The only big brand eCommerce website leading the way so far is Ali Express. With quicker websites, the aim is to increase conversion potential and so we anticipate that more retailers will take steps towards implementing a PWA in 2018.
What are the Key Concepts for PWA?
PWAs are quick to load and can deliver a similar experience to native applications on mobile. But how do they achieve this?
PWAs are best defined by the following key concepts:
-
Web App Manifest
This is best described as an instructional file that is written in JSON code. The Web App Manifest file can change everything from background colours, assign full-screen mode, implement splash screens to styling fonts.
-
Push Notifications
Having pop-up messages regarding site updates help user retention. More information about Push Notifications can be found here.
-
Add to Home Screen A2HS
Add to Home Screen (A2HS) is a bookmark icon that is placed on the mobile home screen. The icon design can be customised via the Web App Manifest file.
-
PWA can work even when offline or on poor network connections
JavaScript Service Workers programs help facilitate the caching of repeatable page assets such as the entire application shell that includes JS, CSS, HTML files for repeating page elements. It can even also store content in the cache (using Cache API) with assets requested when needed.
Making PWA Search Friendly
PWAs are normally lightweight in file sizes and contain little in the way of pages and assets, preferring to build pages on-the-fly directly in the browser using JavaScript and HTML.
Since PWAs typically run on dynamically constructed pages served client side (on the browser). Google has been steadily improving the way that Googlebot – it’s web crawler for finding and analysing content to index – sees client-side content by being able to execute JavaScript code better.
However, iProspect’s previous experience with reviewing websites built this way has shown that it has the potential to cause problems around how pages are seen by search engines. We recommend developing iteratively and slowly building new features and applying rigorous testing at all stages, maintaining a development strategy of progressive enhancement.
A summary of SEO advice includes not blocking JavaScript from any crawls since Google needs to understand how the page is rendered. Offer clean URLs without using the hash symbol and properly canonical tag PWA pages back to the desktop alternatives where applicable.
There are tools such as the Lighthouse Chrome extension that can analyse a PWA. It brings up performance-related data and scores the website overall out of 100 across four key areas.
Site analysis support from Google Search Console’s Fetch and Render tool can be used to check the way that Google sees the PWA website.
To help developer’s further, Google also offers a handy checklist for developers to use for creating PWAs.
Summary
PWA has massive potential for re-engaging users to websites with push notifications and A2HS functionality. The powerful ability for PWAs to operate offline is superb for creating seamless mobile user experiences while on the move.
Positive statistics around visitor data from early adopters seem to support the assumption that PWAs can deliver better engagement. In to 2018, Google will announce more supportive measures and brands adopting this technology will only increase once the benefits of speedier and more engaging sites are communicated.
