Progressive Web Apps 101
By pjain Published Oct. 24, 2019, 2:05 a.m. in blog Programming
- Progressive Web Apps Keys 4Us
- Progressive Web Apps 101
- What
- Look and feel just like a native mobile app
- Easy Install - no AppStore needed
- Why
- Problems
- Manifest file
- Cached Assets - Faster loading
- Database - local storage
- Offline Viewing - Default Content
- Online Syncing with Remote - SOA, RESTful
- Offline Operations, Modifications
- PWA Online stores and publications
- Best PWA, Examples
- PWA Specific Features
- Resources
- Progressive Web Apps Quickstart
- Progressive Web Apps AR, Tech Review
- PWA Pro Features ~250+ APIs added 2017
- Tools for Web Apps
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.
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
0 comments
There are no comments yetAdd new comment
Similar posts
Android/Kotlin IOS/Swift Series