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!