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!