Goals

The developers will learn:

• What progressive web apps are and the core concepts behind them
  • It should be clear that these experiences work everywhere but are accelerated in modern browsers.
• Examples of what we believe are great progressive web apps that they can use as a starting reference
  • Expand on the case studies with deep technical dives.
• The best ways to think about structuring my app to be a progressive web app.
  • There are several valid ways of building a prog-web-app, we should enumerate them and present the best practice for each.
• How to start apps from a complete, working scaffold and evolve it as needed.
• How to create a bespoke App/Shell application from scratch.
• How to layer on more advanced experiences
  • Push Notifications, BLE, Physical Web etc.
• How to add progressive web app capabilities to my existing codebase.

Tasks

This is bit below is being worked on.

• Create a landing page:
  • A clear definition of progressive web app’s
  • Point to live examples.
  • An overview of all of the platform pieces involved in a progressive web app. What they provide, what their browser support looks like, and how they fit together.
    • Guidance for Service Worker and Offline
      • Udacity Course
      • Web Fundamentals explainer (it never landed)
    • Guidance for Add to Homescreen and installability
      • Udacity Course
      • Web Fundamentals explainer (it needs to be tidied)
    • Guidance for Server Rendering
    • Guidance for Progressive Enhancement
      • What is progressive enhancement and why it is important
      • You don't need the exact same experience + data
      • Best practice and guidance
    • Guidance for RAIL - weave existing docs and guidance in.
    • Guidance for Native Interactions (Sharing for example)
      • Udacity Course
      • Web Fundamentals explainer
    • Guidance for TLS - this already exists on /web/fundamentals to an extent, needs to be updated and referenced
• Create a Your First Progressive Web Apps guide (Create Your First Progressive Web App guide #2375)
• Create Canonical Apps and case studies
  • A handful of case-studies with different verticals and use-cases.
  • A complete demo applications that people can play with on a mobile device.
  • A walkthrough that points out each of the progressive web app-specific features of this demo.
• Create a section on How to structure your app to be a progressive web app.
  • An overview of what the goals of the app-shell architecture are, and how it relates to SW & progressive web app. (strongly highlight the progressive nature).
  • A few specific examples of App/Shell-compliant structures, and their strengths/weaknesses.
    Learn what my options are for getting started.
  • Testing strategies locally and in staging environments
  • Complete list of tools, templates, and examples available to me, and what they provide. Should call out a clear starting point.
• Create 5 minutes starter pack and guide: Start building from a complete, working scaffold and evolve it as needed. (App Shell project + Guidance)
  • A codelab/step-by-step docs that arrive at a basic set of components/boilerplate for a working Progressive Web App.
  • A complete, out-of-the-box working kit that I can download and get something visible in 5 mins, that looks kind of like the thing I want to build.
  • Examples and Guidance for verticals:
    • E-Commerce - a shopping app a la Flipkart
    • Publishing? - a blog/news type app
    • Media? - a Podcast player / video player?
    • Gaming? - lots of web games, they need push, offline etc.
  • UI components that come with the toolkit that I can use to customize by app’s UI, that work seamlessly with the SW architecture.
• Create a guide for UI Performance
  • Applying FLIP and RAIL to Progressive Web Apps
  • Create a library of 60fps UI patterns, e.g. pinch-zoom, fling, pull-to-refresh(?).
• Create a how to build a more bespoke App/Shell application from scratch guide.
  • Common challenges in building with this model. What big issues am I going to run into? How can I get through them?
  • Libraries to help smooth over the rough edges identified above.
  • Template(s) to serve as jumping-off points for how to leverage the libraries.
• Create a section on upgrading an existing codebase to be a progressive web app
  • App Cache to Service Worker
    • Library
    • Rationale, Guidance and best practice
  • Best practice guidance on how to do it for React, Polymer, MDL etc. Hints and tips of things that we have found that work well.
  • Case studies from developers who have already done this step.
  • Create Blog posts or annotated pull requests showing what changes were made to an existing React, Angular, Polymer, MDL, etc. site to restructure it into a progressive web app.