PWA Roadshow

The Progressive Web App Roadshow is a series of events that explains the what, why and how of PWAs and allows participants to work through some code labs that provides hands-on experience.

Name

Progressive Web App Roadshow San Francisco 2017

Location

Google Launchpad Space - 301 Howard Street San Francisco, CA - 4th Floor

Date

Sunday, October 22nd - 9:00 AM to 5:00 PM

Role

Participant - I participated this event as part of the Chrome Dev Summit. Registration was super limited so I’m glad I was able to attend.

About

The Progressive Web App Roadshow is a series of events that explains the what, why and how of PWAs and allows participants to work through some code labs that provides hands-on experience.

What are PWAs? Progressive Web Apps are experiences that combine the best of the web and the best of apps. They load quickly, even on flaky networks, can re-engage with users by sending web push notifications, have an icon on the home screen and load as top-level, full screen experiences.

Topics Covered

Overview

• PWAs- Twitter Lite - Lancome- - Lyft - Google’s Udacity Courses

Integration

• High Conversion Web Forms - Payment Request API

Reliability

• Service Workers - Lie-fi - Workbox

Engaging

• Web Push Notifications Library - Web Push Notifications Carnival - Good Notifications- Timely Matters right now - Relevant User cares about it- - Precise Exact details - How Push Works- - Client Side- Get permissions to send notifications - Subscribe & get PushSubscription- - Send PushSubscription to server- - Server Side- Create message on server - Use Web Push Protocol to send All browsers use Web Push API- - Push Service delivers message- - Message arrives on device- - Browser wakes up service worker- - Handle push event and shows notification- - Application security keys- public used for subscription - private used to send messages- - Subscribing and unsubscribing- Is web push supported? - Check subscription status- - Subscribe to user userVisibleOnly- - Promoting and permission- First ask, then prompt - Weather.com gives options

Security

• HTTPS- identity - confidentiality- - integrity - Man in the middle attacks - First get HTTPS then extend to HTTP/2 - Certificate Let’s Encrypt - Referrer Policy

Lighthouse

• Available in Chrome DevTools & as a command line tool. - Aim for 90 and above on all metrics- PWA - Performance- - Accessibility- - Best Practices

Codelabs

• Your First Progressive Web App - Debugging Service Workers - Adding Push Notifications - Frictionless Payments with the Payment Request API

Photos

And I’m pumped!