What are Progressive Web Apps?
- can work completely offline
- near-instant load times
- resilient to flaky connections
- Reliable - Load instantly and never show the downasaur, even in uncertain network conditions
- Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling
- Engaging - Feel like a natural app on the device, with an immersive user experience
Web versus Native
- August 6, 1991: Sir Tim Berners-Lee at CERN launched the first website
- Websites become bigger and heavier
- More and more devices we access the web on
- Expectations are high
- Mobile connections can be horrible
- Have a better user experience
- All or most of the needed resources on the device already
- Offline capabilities
- Instant load times
Definition of PWA
Major browser vendors worked together to give developers the tools to create fast, reliable and engaging websites.
Key features of a Progressive Web App or rather a Progressive Website are:
- Responsive (works on every screen resolution)
- Connectivity-independent (can work offline)
- Feel like a native app (fast loading)
- Always up-to-date (fresh from the web; no updates from the app store)
- Safe (https)
- Discoverable (search engines)
- Linkable (URL's)
- Installable (home screen, cache data)
- Re-engageable (home screen, push notifications)
PWA's will work on every modern browser.
Older browsers will keep on working as a normal website because PWA is (it's in the name already) a Progressive Enhancement.
Two key features will make a PWA from your website:
- Manifest file
- Service Workers
A manifest file is a JSON file that contains information about the website, including its icons, colours and default screen orientation.
A Service Worker can tap into network requests, manipulate them and selectively cache responses to provide an offline experience. With the help of Service Workers it's also possible to prevent users from getting a default "No internet connection" error screen, but instead, provide them with something more useful and meaningful.