Progressive Web Apps Demystified

May 21, 2020 · Chop-Chop Office (in Polish)

Slides: https://pasteapp.com/p/ekfvOvdgLad

I had read like a 100 pages of different documentations, and I needed to share things I learned in the process. I’m not sure if “100 pages” is a hyperbole here.

The Talk

Dan Questions:

  • How will you deliver the idea to the audience?

    • I’ll zoom in from the problem description to a case study and add a few jokes in-between.
  • What is the one thing that you want people to take away from your talk?

    • It’s not hard to make an app progressive, but it is hard to know what your client means by progressive without talking about it.
  • Why are you giving the talk? What is the emotional core? What do you believe in?

    • We deserve websites prepared for flaky internet connections of today.


  • Hi, I’m Piotr.
  • There are so many articles about PWAs that people start believing in a Progressive Web App myth.
    • They are indeed pretty cool.
    • The need they want to fill has a long history.
  • Progressive Web App is just an app that fulfils a list of requirements.
    • You might have already implemented them without trying to build a PWA.
    • You can find the checklist here: https://web.dev/pwa-checklist/
    • What are these requirements and how to fulfil them
      • Starts fast, stays fast
      • Works in any browser
      • Responsive to any screen size
      • Provides a custom offline page
      • Is installable
    • Optimal Requirements
      • Provides an offline experience
      • Is fully accessible
        • eslint-plugin-jsx-a11y
        • react-axe (WCAG2AA and WCAG2A)
      • Can be discovered through search
      • Works with any input type
      • Provides context for permission requests
      • Follows best practices for healthy code
  • How do I build a Progressive Web App?
    • But what do we want to build? The web can do so many things today!
    • “The PWA framework” doesn’t exist. But there are many tools. Use anything you’re comfortable with.
  • Case study of one approach (NextJS + Next Offline + Apollo Client + Offix)