PWA Roadshow

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

Integration

Reliability

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

Photos

And I’m pumped!

Subscribe to my newsletter Today

In my newsletter, I share personal and career learnings, advice, collaboration opportunities, and more.