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.

Outline:

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!
  - https://whatwebcando.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)