Progressive Web Apps
Who needs native?!
What are PWAs?
Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no installation required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience.
https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0
The web…but better
A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements (see below), are deployed to servers, accessible through URLs, and indexed by search engines.
https://ionicframework.com/docs/developer-resources/progressive-web-apps/
Progressive Web Apps are user experiences that have the reach of the web, and are:
- Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
- Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
- Engaging - Feel like a natural app on the device, with an immersive user experience.
This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.
https://developers.google.com/web/progressive-web-apps/
Why build PWAs?
Distribution
Features
Push notifications
- Available on native apps for ages
- New to web
- Use to re-engage users
- eg abandoned shopping cart
Offline functionality
- Like native app
- Control with service workers
Accessible to all
- Discoverable
- Requires SEO like any website
- Easy to share
Try before you... install
- Can start using before installing
- No app store
- Instant updates
What's the catch?
Doesn't work on iOS
- no service workers
- no push notifications
- no A2HS
WebKit project five-year plan - on service workers:
“Becoming a more frequent request. We should do it.”
Demo PWA
react-pwa
https://github.com/paulhoughton/react-pwa
My app
- Fork react-pwa
- Created lists app
- Fixed PWA fails with Lighthouse
Lighthouse
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
https://developers.google.com/web/tools/lighthouse/
Progressive Web Apps - who needs native?!
By Tim Berman
Progressive Web Apps - who needs native?!
- 515