An Event Apart: “Designing Progressive Web Apps”

Jason Grigsby speaking at An Event Apart Seattle 2018 on April 3, 2018.

If you have a website—particularly one that generates revenue for your organization—you need a Progressive Web App. So where do you begin? How do you decide which features of a Progressive Web App make sense for your users? What tools can make the process easier (or harder)? In this practical session, Jason will guide you through the key design decisions you’ll need to make about your Progressive Web App and how those decisions impact the scope of your project. He’ll also teach you how to avoid common pitfalls and help you take full advantage of Progressive Web App technology.

Notes

  • PWA Stats

  • Original definition:
    • Responsive — tit any form factor
    • Connectivity Independent — offline features thanks to service workers
    • App-like interactions — app shell for apps navigation
    • Fresh — up-to-date thanks to service workers
    • Safe — served on HTTPS
    • Discoverable — manifest files identify them as apps
    • Re-engageable — push notifications bring people back to apps
    • Installable — can be installed to the home screen w/o app stores
    • Linkable — still part of the web, URLs still work
    • Progressive — use progressive enhancement for better experience
  • PWA is a website that has been enhanced with:
    • HTTPS
    • Service worker
    • Manifest
  • HTTPS
    • We should encrypt everything on the web
    • New features only available on HTTPS
    • Soon browsers will warn users that your site isn’t on HTTPS
  • Service worker
    • Explicit control of network requests and cache
    • Act as a proxy
    • Big improvement in performance
    • Key to providing offline experience and push notifications
  • Manifest
    • Simple JSON document
    • Add to home screen install banners

  • Progressive web apps allow us to build experiences that previously required a native application

  • Embrace the hype
    • “The name isn’t for you and worrying about it is distraction from just building things that work better for everyone. The name is for your boss, for your investor, for your marketeer.” — Frances Berriman, Naming Progressive Web Apps
  • Do we need a progressive web app?
    • Does your organization have a website? — If so, you would probably benefit from a PWA
    • Does your organization make money on your website via e-commerce, advertising, or some other method? — If so, you definitely need a progressive web app

  • Your website is often a customer’s first interaction with your company — a better web experience will likely mean more revenue and more native app installs

  • The web can do more than we think

  • AliExpress
    • 104% for new users across all browsers in conversion
    • 82% increase in iOS conversion

  • The Washington Post saw 5x increase in user engagement

  • 5 factors to look at when designing a PWA
    1. Making it feel like and app
    2. Installation and discovery
    3. Offline mode
    4. Push notifications
    5. Beyond PWAs
  • Making it feel like an app
    • Problems with making it look native:
      • Do you switch design language between platforms?
      • How many platforms will you adapt to?
      • What about desktop browsers?
      • Will you jump every time the platform changes?
    • Define your own design and be consistent
    • Define concrete “app-like” goals
    • What happens when you remove browser chrome? — No URL, tabs, menu, or back button
      • As you start removing OS UI, you remove things people rely on — we’re spoiled by our browsers
    • Not every customer or potential customer will add your Progressive Web App to their home screen — but every visitor will install your PWA
    • Fast, fluid experience — perceived performance matters most
    • PWA != SPA — PWAs don’t have to be single page applications
    • Personality
      • Animate transitions to support wayfinding and add polish
  • Installation and discovery
    • Manifest
      • Manifest files are simple JSON documents
      • Startup screen with background color
      • Theme color
    • Add to home screen prompts
      • Add to home screen badges
      • Add to home screen banners
      • Manually trigger add to home screen banner
      • Pick the optimal time to ask for install — Asking on order confirmation page resulted in 3x increase in conversion for Flipkart
    • App stores
      • PWAs don’t need an app store
      • 2 ways to get into Microsoft store:
        1. Active submission
        2. Passive ingestion
    • Remember, your PWA is your website so all the normal web marketing applies
  • Offline mode
    • Cache for performance and offline fallback
    • Offline fallback pages can keep people engaged
    • Cache recently viewed content for offline use
    • Highlight stale information
    • Display the information you have
    • Let users choose what they want offline
    • Pre-cache content and apps
    • Offline interactivity — or disallow editing
  • Push notifications
    • Notification JS is relatively easy
    • Many hidden challenges
    • The backend stuff is difficult
    • 3x higher conversion for personalized notifications
    • Push notification’s true requirements:
      • Are there events that should trigger notifications? Products shipping, etc.
      • Do you want to track who receives notifications and what percentage of people respond to the notifications?
      • Do you want to be able to tie notifications to authenticated users?
      • Do you need a profile of users that tie their notification behavior with other touchpoints like email?
      • Do you want to be able to send marketing messages to audience segments? If so, how do you give people control so they can opt out of marketing messages?
    • Many people are annoyed by notifications
    • Don’t immediately ask for permission to send push notifications — If you ask for permission and the user says no, you will never be able to ask again
  • Beyond PWAs
    • Credential Management API
    • Payment Request API

  • PWAs are progressive because… Progressive Roadmap

  • PWA blueprint
    • Planning and definition
      • Gather team
      • Brainstorm ideal PWA
      • Benchmarks and measurement plans
      • Build roadmap
    • Technical debt (if necessary)
      • Assess current website
      • Fix performance issues
      • Fix usability issues
    • Baseline PWA
      • Manifest
      • HTTPS
      • Service worker for performance
      • Offline fallback
    • Front-end additions
      • Cache recently viewed pages
      • Precache popular or important pages
      • Add third-party push notification service
      • CMS plugin for push notifications
    • Larger Initiatives
      • Payment Request API
      • Credential Management API
      • Integrate notifications with backend systems
      • Background sync
      • Move to app shell

  • Every step on the path to a PWA makes sense on its own

Speaker Links and Resources

Case Studies

Progressive Web App Definitions

Why Progressive Web Apps?

Making it Feel Like an App

Installation and Discovery

Offline

Push Notifications

Beyond PWAs

Sample PWAs

PWA Galleries

PWA Resources and Tools

Progressive Web App Roadmap

Related Links