INDIAN ENGINEERING DESIGN FORUM

Connect. Collaborate. Innovate.
2
December
2017

All you need to know about PWA and AMP

Some learnings from GDD Bengaluru

All you need to know about PWA and AMP

Are you confused by the many changes that are going on in the world of mobile and web apps? How do we make sense of Progressive Web Apps (PWA), Instant Apps, Single Page Apps (SPA) or Accelerated Mobile Pages (AMP)? What are the differences and similarities among these and when to use what? I'd hoped that I would get answers to at least some of these questions at the Google Developer Days (GDD) event at Bangalore, happening on 1-2 December.

I attended the event yesterday. It was a busy day with a tight schedule of back-to-back sessions, so much so that I had rush through a five-minute lunch. I got to know recent updates to Google's platforms and products. I learned about some of the hot topics of the day: Google Assistant, Android Things, TensorFlow, Firebase, Lighthouse... But a number of sessions looked at PWA and AMP.

Why PWA?

Before we answer this question, it makes sense to understand the context. The entire app ecosystem has been built for the Developed World, not intentionally, but accidentally because developers assumed users will have fast access from high-end smartphones. Secondly, developers learned their skills from building web apps first. Transferring those skills to building mobile apps requires them to understand how users interact with mobile web and mobile apps. It's only recently that we have begun to understand some of these. Let's start with some numbers that were shared at the event:

  • Across the world, 60% of mobiles are still on 2G.
  • In 2020, 53% of Indians will still be using 2G.
  • An average mobile web page on a 3G connection takes 19 seconds to load.
  • Among Indian smartphone users, 33% run out device storage every day.
  • 53% users leave if the page takes more than 3 seconds to load.
  • 79% shoppers leave a site that's slow.
  • 66% of purchases from smartphones are via mobile web rather than apps.
  • E-commerce conversions on mobile are only a third of their counterparts on desktops.
  • 70% of online traffic is video.

What's in a PWA?

PWA aims to bring the app experience to mobile web. Apps take up storage and need to be installed (Instant Apps remove some of this friction). On the mobile web, content is served right from a web browser but the user experiences it as if she's in an app. On flaky connections, app will load in stages so that the user doesn't feel she's waiting too long. What this means is that layout is loaded first even when the content is not yet available. Under the hood, developers distinguish them by names including First Paint, First Contentful Paint, First Meaningful Paint and Time To Interaction.

What happens if the connection is unavailable? PWA allows for data caching and serving of content offline. Two of Google's popular apps that were traditionally not available in offline mode, support offline mode today: YouTube and Maps. The caching layer is one of the important parts of PWA. It's enabled by a service worker, which is really a JavaScript proxy between the client and server. This service worker does the caching and serves content from the cache.

Essentially, PWA can be summarized by a nice acronym, FIRE: Fast, Integrated, Reliable, Engaging. A handy checklist of what a PWA should do has also been published by Alex Russell.

PWA tools

By using the right tools, a developer can select a caching design pattern that suits his use case. With caching, there's always a tradeoff. Do we serve the freshest possible data or do we optimize for performance always? This is not an easy decision. Tools such as Chrome Developer Tools can help in analysing app behaviour before one goes and starts optimizing. Some advance caching can be done when app is first accessed but caching can also be done at runtime. Workbox is a tool that can help in converting your existing web app to PWA. Lightbox helps in auditing your current app and gives a PWA conformance score. PWA.rocks and PWA Builder are extra tools on the web that may help.

Is AMP complementing PWA?

I think so. With games and chat messaging, users value responsive UI and seamless modes of interaction. Users have started expecting the same with mobile web. If PWA offers a checklist of what to do, AMP gives a framework to tick some of those items. I suppose one can make a PWA even without AMP, but AMP might make the life of a developer a lot easier.

To start with, caching in AMP is transparent to the developer. In other works, developers need not worry about service workers at all. However, it's perfectly possible to build complex AMP+PWA apps by installing service workers within AMP runtime. All JavaScript runs within AMP runtime, meaning that no custom JavaScript can be introduced that can potentially slow things down on low-end devices. AMP introduces a subset of HTML and makes rendering quicker. A single CSS is expected with an upper limit on size.

What's your next app?

So should your next app be a native app or a PWA? Should you do AMP first and consider PWA later? Where does SPA fit into this mix? Unfortunately, I don't have the answers and probably they will depend on the type of app you are building. In any case, the GDD event itself failed in one aspect. There was no opportunity for Q&A. It was really an awareness event and information was dumped on hapless wide-eyed participants. I suppose many felt privileged to attend the event but also unsure of where to focus. No human can follow technology in its many facets. Technology is no longer progressing in a linear way. Technology today is evolving in all directions at the same time. Can we keep up? Maybe not as before, but we expect the same technology to help us do so in the coming future.

Related Articles

About the Author

Arvind Padmanabhan

Arvind Padmanabhan

Arvind Padmanabhan graduated from the National University of Singapore with a master’s degree in electrical engineering. With more than fifteen years of experience, he has worked extensively on various wireless technologies including DECT, WCDMA, HSPA, WiMAX and LTE. He is passionate about tech blogging, training and supporting early stage Indian start-ups. He is a founder member of two non-profit community platforms: IEDF and Devopedia. In 2013, he published a book on the history of digital technology: http://theinfinitebit.wordpress.com.

Leave a comment

You are commenting as guest.
VIEW MORE