Progressive Web Apps Keys 4Us

Progressive Web Apps 101

What

Look and feel just like a native mobile app

Progressive Web Apps also are known as PWAs are the web apps that look and feel just like a native mobile app.

Just like a native mobile app, a PWA is displayed on the homepage, in the app drawer, sends push notifications and integrate into system settings.

Easy Install - no AppStore needed

It works on any browser whether it be chrome, opera or Samsung internet browser and the users are not obliged to download from the app store. Just tap on the link and PWA is installed on the user’s phone.

• Progressive Web Apps — The Future of Mobile Web App Development - By Goldy Benedict
• PWA on YouTube

Why

Problems

Manifest file

PWAs are just a HTML5 collection of resources with a special “manifest” file that defines the name of the app, the icon for the home screen, and whether or not the app should show the typical browser UI or just take over the full screen. Users can add any website with a manifest file to their home screen or their Start menu and launch it like a regular mobile or desktop app.

It is loaded first time using a regular web URL.

Cached Assets - Faster loading

But instead of just loading a website from the internet, a Progressive Web App is typically cached on your device so it has some sort of offline functionality. That could be anything ranging from saving the JavaScript and CSS so the website simply loads faster, on up to saving everything the user does locally like a traditional app.

Database - local storage

Offline Viewing - Default Content

Online Syncing with Remote - SOA, RESTful

Offline Operations, Modifications

PWA Online stores and publications

• These have also taken advantage of the snappy performance of PWAs.

Best PWA, Examples

• Twitter Lite client. It's fast, minimal, and even has a toggle so you can minimize data usage.

A minimal 2048 clone PWA 2048 on my iPhone for the last week. It works offline and remembers my high score between sessions. Sometimes it even saves the game state so I can resume a long run, but it's not perfect.

PWA Specific Features

• Scroll Locking - above the fold content is stable as offline bottom of page loading - about 3 page moves jerky motions avoided per page load

Resources

Now you can make a Progressive Web App and ship it to Android, iOS, Chrome OS, and Windows.

• Web apps are only getting better - The Verge
• Microsoft is turning Progressive Web Apps into Windows apps
• IOS Safari - Progressive Web Apps

Progressive Web Apps Quickstart

Progressive Web Apps AR, Tech Review

AMP - Accelerated Mobile Pages for Content focus apps

• Average AMP loads <1" and uses 10x less data
• 125m AMP docs'16 -> 2 B AMP pages from 900k domains
• Users are more engaged when AMP enabled - eg 10% greater engagement on LI article AMP

PWAs = mWeb - Tech Review

• Higher conversions

• Better engagement

• Twitter Lite ~PWA for feed (from home page) --> Links out to AMP for content pages - loads fast! (stays in app) - can do a live video feed from Twitter Lite live stream from within PWA app - RT -> sending 10m push notifs/day - Already saves app mobile data, .. enhanced data saver - save 70% on top of that (images?) - App itself is far far smaller than native apps - ~1m launches from home screen/day => Metrics - more page views vs full app - Great for Developing countries Twitter has adopted PWA technology to improve the mobile engagement and reduce the data usage of its users. The social media giant has 328 million monthly active users all around the globe, among which 80% are mobile users.

They wanted to serve faster service, lower data consumption, provide robust, reliable and more engaging experience to the users and thus developed Twitter Lite Progressive Web App.

This PWA has significantly met their expectations and the following results were observed. 75% increase in Tweets sent 65% increase in pages per session 20% decrease in bounce rate Reduced data consumption as much as 70% by optimizing the images.

• PWAs - Trivago, Wego, Infobay, Forbes (2x user engagement after PWA)

Android and Google Chrome PWAs most advanced and flawless

PWAs work flawlessly on most of the android devices but it is still unsupported with iOS devices.

Browser Support - nearly universal now

• Can still reach - opera,

Problem: IOS support but Safari PWAs have issues - Apple wants to limit

Apple’s support for the Progressive Web App standards is scattered and far from complete.

• Lancome cosmetic - 65% users are on ios - but even though some not supported, 53%+ more time spent on PWA now

• Apple seems to want to limit how much a PWA should really be capable of - possibly since with less than 10% of global market share (as China drops iPhones) it could be very vulnerable to be dropped by developers.

• OLA

PWA Pro Features ~250+ APIs added 2017

Performance of PWAs

• Chrome on Android 35% faster '17 yoy '16 - similar on other OSes

PWA Quality, Beyond the Basics - Getting as Good as Native Apps

Potential

We’ll see how that vision evolves as PWAs become more ubiquitous and powerful on the platforms of Apple’s competitors.

One tap payments API - entire ecosystem - credit cards, paypal,etc.

Media complete - 70% net traffic is video

• Background fetch
• Orientation
• Instant Playback - starts up right away =>

• Controller - builtin player

• YouTube Lite

Push notifications

Tools for Web Apps

Google Lighthouse

• Google Lighthouse score 0-100 how good mWeb app is
• Integrated right into chrome dev tools

WorkBox helps make it offline <-- Service Workers - low level API

Polymer 2.0'17 for Web Components (AMP based on it) - Reusable, 1000s exist, Material? Fast loading

• Integrates in Chrome, IOS Safari
• ES6 classes
• Modular
• 10% faster, 80% smaller