Outlining the architectural thinking required to create what the Google devrel folks are calling progressive apps.
Browsers without service worker support should always be served a fall-back experience. In our demo, we fall back to basic static server-side rendering…
Yay!
…but this is only one of many options.
Hmmm. In my opinion, sending usable HTML on first request isn’t an implementation detail—it’s crucial. But on the whole, this approach is very sensible indeed.
- Basic functionality should work on any device that can access the web.
- Extras and flourishes are treated as progressive enhancements for modern devices.
- The UI can look different and even clunky on older devices and browsers, as long as it doesn’t break rule #1.
Practice Progressive Enhancement.
Build first and foremost with forgiving technologies, declarative technologies, and forward and backward compatible coding techniques.
All content should be readable without scripting.
If it’s worth building on the web, it’s worth building it robustly, and building it to last.
This is very nice HTML web component by Miriam, progressively enhancing an ordered list of audio elements.
This is a great history of the idea of progressive enhancement:
It is an idea that has been lasting and enduring for two decades, and will continue.
So what are the advantages of the Custom Elements API if you’re not going to use the Shadow DOM alongside it?
- Obvious Markup
- Instantiation is More Consistent
- They’re Progressive Enhancement Friendly
Having fun with view transitions and scroll-driven animations.
Here’s Clearleft’s approach to browser support. You can use it too (it’s CC-licensed).
Here’s how I interpret the top-level guidance in the Web Content Accessibility Guidelines.
If a browser feature can be used as a progressive enhancement, you don’t have to wait for all browsers to support it.
Naming custom elements, naming attributes, the single responsibility principle, and communicating across components.