Combine AMP and PWA for ultra-fast mobile experiences

[Rss Bot 1]

If you find yourself struggling to build or optimise fast web pages, there may be an alternative solution for you as a developer. Why not turn to an open-source tech solution called accelerated mobile pages (AMP)? AMP offers near-instant delivery of mobile pages (0.8 seconds average), making it an ideal perfect solution for a user's first interaction with your website. Progressive web apps (PWA), on the other hand, enable you to offer more interactivity and engagement features. 

AMP and PWAs are really just sets of technologies or web pages offering complementary ways of achieving different goals. In this guide, we'll show you how to combine the two to create truly compelling and ultra-fast mobile web experiences.

For more helpful advice, take a look at our roundup of tutorials exploring how to build an app. 

• 9 amazing PWA secrets

AMP: Accelerated mobile pages

AMP loads 85% faster than standard mobile pages

AMP delivers blazingly fast, smooth landing pages. The framework itself is quite simple to code, with most developers taking less than a week to fully implement it. AMP puts content in front of users quickly, loading 85 per cent faster than standard mobile pages. 

So long as your page remains 'AMP valid', you can be confident of not breaking the code or sacrificing performance. You can develop a valid AMP page following the framework built with AMP HTML, AMP JS and AMP Cache and then using AMP Validator to check you haven't missed anything. For more on how to build APM, take a look at the Google Developers site.

It's always important to test AMP for impact. We recommend that you A/B test AMP with respect to what effect it has on your mobile performance with a 50/50 split test on traffic. This way you can safely see the results that AMP has for yourselves.

PWA: Progressive web apps

PWAs are essentially websites that behave like native apps

A PWA combines the reach of the open web with the functionality of native web applications. It's essentially a website that behaves almost like a native mobile app. They are quick to load – especially on cached or repeat mobile visits – available offline, secure and can be accessed from your home screen. However, their first load is hindered by the fact the site's service worker (assets and app shell) only accelerates delivery to a repeat visitor on a site's subsequent load. 

Service workers in PWAs enable reliable experiences when there is no network or slow/intermittent network connections. A major benefit of PWAs is that they use web technologies at the right time and can replace app-like permissions, push notifications, payment request APIs and better form interactions (autocomplete, input types, etc). PWAs can also work towards less download requests for a user, which can be quite taxing on smartphones in general, using 50 per cent fewer external JavaScript requests. 

PWAs literally put your business at your consumer's fingertips once installed (with an app-like icon) and provide richer experiences – and more immersive ones with push notifications enabled – compared to the average website you will visit. It's through the set of technologies (https, service worker and a manifest file) enabled that enhance your website, even making it accessible offline. 

In addition, they can be easily discovered because users are far more likely to download the PWA when prompted to 'add to home screen' while they are browsing the web, rather than visiting an app store and looking for applications.

How to combine AMP and PWA

Since AMP and PWAs are really just sets of technologies or web pages offering complementary ways of achieving different goals, we should really take a second to acknowledge the unique strengths of each. Plus, both technologies have their own shortcomings when implemented individually that should also be considered. 

AMP presents fast-loading, out-of-the-box content that requires relatively low effort but has some features missing. PWAs, on the other hand, offer more advanced platform features, are fast-loading for repeat visits and content is reliable even in offline mode. However, PWAs are not as strong as AMP during first content load because they are not quite as fast.

AMP and PWAs can be combined to create an engaging and super-speedy mobile web experience. Think of it as the perfect tech match. Here's the simple two-step process you need to follow: 

01. Build your site with AMP

That doesn't necessarily have to mean your entire website: you can focus on 'entry points' or landing pages. Decide on where you would expect to see the biggest incremental gains from AMP's speed. When implemented correctly, AMP should retain interest with the lightning fast load time when it's served from Google Cache.

In order to integrate PWA logic with AMP, it all starts with an AMP component called amp-install-service worker, which can install a service worker from any AMP page.

This makes the magic happen. It enables service worker installation from the AMP cache, so the service worker is installed by the time users visit the origin site. The user-experience remains uninterrupted and the service worker runs whenever the AMP file is served from the origin where the AMP file is published. Before integrating PWA features, it's a good idea to serve AMP in this way as an entry point via 'leaf pages' to your site and warm up the PWA 'behind the scenes' before switching a user to the smooth onward journey.

02. Progressively enhance with PWA features

After you've implemented AMP and the service worker, progressively enhance your site with the PWA features that best meet your business goals. PWAs have a vast array of benefits when fully integrated, which makes it easy to delight more users, grow engagement and increase conversions. Here is a useful checklist that explains what it takes to produce a baseline PWA and then develop it into an exemplary PWA.

The best teams out there are the ones willing to adapt to the new consumer expectations. AMP and PWAs go well together and ensure that your website holds a user's attention and is more engaging. One thing's for sure, we like websites to be fast and we want content to arrive ready and easy to complete. In our modern world where almost everything is skippable and we can choose to disengage, we need to focus on retaining interest. Remember: the smallest screen represents the largest opportunity. 

Book now for a super early bird discount

This article was originally published in net, the world's best-selling magazine for web designers and developers. Buy issue 318 or subscribe.

Read more:

• The best monitors for programming 2019
• 5 different ways to develop a mobile app
• The best web hosting services

View the full article