I have already published one post about Progressive Web Apps (PWA) a few months back. It looks like Google is investing a lot of efforts to make it a new standard of building websites. At the last Google I/O, there were a few announcements made related to making PWA a default feature in a few popular boilerplates and CLIs for libraries like React, Preact, Polymer or Vue. I recommend watching the following presentation by Addy Osmani:
HNPWA project
A new project called HNPWA was created to present Hacker News readers as Progressive Web Apps implemented with the different frameworks and libraries. The idea itself was influenced by TodoMVC project. All implementations are validated using Lighthouse tool from Google.
The PRPL pattern
The PRPL Pattern was created by Google and stands for:
- Push critical resources for the initial URL route.
- Render initial route.
- Pre-cache remaining routes.
- Lazy-load and create remaining routes on demand.
It translates into the following action items:
- Use HTTP/2 server push to send CSS files or fonts as early as possible. Fallback solution would be to use
link rel="dns-prefetch"andlink rel="preload". - Getting the meaningful pixels on the screen as soon as possible.
- Introducing an app shell to pre-cache static files, which improves the loading time for the returning visitors.
- Enable code-splitting and preload async chunks.
Preact on production
This is a quite interesting idea. You can use Preact as a drop-in replacement for React on production to ship less code. They claim it works in 99% of cases, so you still need to tweak the existing code from time to time to make it compatible.
Further reading
- How 17 Lines of Code Improved Shopify.com Loading by 50% – an article about using preload.
- HTTP/2 push is tougher than I thought – Jake Archibald explains how HTTP/2 push works and compares it with preload.
- Twitter Lite and High Performance React Progressive Web Apps at Scale – an article by Paul Armstrong.
- Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage – a case study of Twitter Lite.
- Switching to Preact (from React) – a tutorial from Preact website.
- An opinionated progressive web app boilerplate.
