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: al@interstate21.com

Twitter: @AlainChautard

https://blog.angulartraining.com

My free PWA video course (for

Angular):

angulartraining.teachable.com