Progressive Web Apps are the future · Angular JS addict since 2011 Web consultant / trainer @...
Transcript of Progressive Web Apps are the future · Angular JS addict since 2011 Web consultant / trainer @...
Progressive Web Apps are the future @AlainChautard - angulartraining.com
About me - Alain Chautard (or just Al)
Google Developer Expert in Web technologies
/ Angular / Google Maps
Angular JS addict since 2011
Web consultant / trainer @ angulartraining.com
Organizer of the Sacramento Angular Meetup group / GDG Sacramento
Quick Poll
● Anybody ever heard about progressive web apps?
● What about responsive web apps?
● Has anyone done a Google (or other search engine) search over
the past 24 hours? ● Has anyone been to an app store (Google Play or Apple)?
What are Progressive Web Apps?
What are Progressive Web Apps (PWAs)?
● A way to have one code base instead of three
○ No more native apps for Android and IOs, only web!
● A way to have friction-less installs on mobile devices
○ No app store needed, no heavy download
● Overall, it's win-win all over the place!
Do PWAs actually exist?
Yes! Many companies have
already adopted
Progressive Web Apps.
Example:
https://app.starbucks.com
Demo: http://bit.ly/at-pwa-
demo
Characteristics of Progressive Web Apps
● A PWA is a web app: HTML + javascript + CSS
● PWA will prompt the user to get "installed"
● Once installed, PWA shows up on the home screen of your phone
● PWA loads with a splash-screen ● PWA can load full-screen (no browser window)
And there's more...
● PWAs are meant to behave like native applications
● PWAs can do notifications
● PWAs can work offline!
● PWAs can be “uninstalled”
How to make a Progressive Web App?
How do I build a PWA?
● PWAs rely on two technologies:
○ A manifest file (manifest.json) that defines an icon, app name,
splash screen, etc. for both the native behavior and look & feel of
the application
○ A service worker that caches code (HTML, JS, CSS, images) for
offline use of the app, as well as notifications
● PWAs require HTTPS - you do need a certificate
Example of manifest.json
● Full example can be found at https://developer.mozilla.org/en-
US/docs/Web/Manifest
How to generate a manifest.json file?
There are several online tools for that, for instance: https://app-manifest.firebaseapp.com/
Example of service worker
https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker
Workbox: A library to help write service workers
Examples of notifications
Several examples can be generated here: https://tests.peter.sh/notification-generator/
LightHouse
An automated tool to test
progressive web apps
LightHouse gives a score to
your apps and highlights
what can be improved
Are Progressive Web Apps the future?
PWAs are work in progress...
● Both technologies used by PWAs are about to become W3C
standards:
○ https://www.w3.org/TR/appmanifest
○ https://www.w3.org/TR/service-workers-1/
But they are also very much in the present
● A few directories with many PWAs:
○ https://pwa-directory.appspot.com/
○ https://pwa.rocks/
Thanks for your attention
Email: [email protected]
Twitter: @AlainChautard
https://blog.angulartraining.com
My free PWA video course (for
Angular):
angulartraining.teachable.com