2019-05-01+net

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.

However, AMP and PWAs can be

combined to create a truly compelling

and ultra-fast mobile web experience.

Think of it as the perfect tech match and

a simple two-step process:

1

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

Get

progressive

with PWAs

Building PWAs is a progressive

process; it can be a series of

incremental updates for most

development teams that all make

sense on their own. Firstly, for

example, you can add offline

mode functionality, then the

option to Add to Homescreen

and lastly enable push

notifications for engagement

before leveraging payment API

requests for a more user-friendly

experience on mobile.

If you’re keen on progressively

enhancing your website with a

PWA, here is a rundown of what I

would prioritise:

O Basic caching for fast load

O Enable push notifications

O App shell for navigation

O Provide offline support

O App manifest for ‘add to home

screen’ prompt

As a proof point, Pinterest

reduced its time to interactive

from 23 seconds to 5.6 seconds

with its PWA and this change

had significant impact on

performance, resulting in a 60 per

cent increase in engagement and

3 per cent improvement over its

native mobile app’s performance.

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.

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 and 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.

Easy to discover and

install

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.

Combination is key

Since AMP and PWAs are really just sets

of technologies or web pages offering

complementary ways of achieving

Above Pinterest reduced its time to

interactive from 23 seconds to 5.6

seconds with its PWA

A PWA combines

the reach of the open

ZHEZLWKWKH

functionality of native

ZHEDSSOLFDWLRQV

FEATURES
Unite AMP and PWAs