Progressive web apps (PWAs)
|
|
|
PWA advantages
PWA should be discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, and safe. To find out more about what these mean, read Progressive web app advantages.
Google uses a helpful acronym for us to understand why PWA are so effective: FIRE – Fast, Integrated, Reliable, and Engaging. This acronym is itself a perfect explanation of why PWA is in trend amongst developers.
To find out how to implement PWA, consult the guides listed in the below section.
Core PWA guides
The following guides show you what need to do to implement a PWA, by examining a simple example and showing you how all the pieces work.
- Introduction to progressive web apps
- Progressive web app structure
- Making PWA work offline with Service workers
- How to make PWA installable
- How to make PWA re-engageable using Notifications and Push
- Progressive loading
- Collection of resources, codelabs and tools you need to build PWA by the team at pwafire.org
- Setting up your Progressive Web App Development environment
Technology guides
- Client-side storage — A lengthy guide showing how and when to use web storage, IndexedDB, and service workers.
- Using service workers — A more in-depth guide covering the Service Worker API.
- Using IndexedDB — The fundamentals of IndexedDB, explained in detail.
- Using the Web Storage API — The Web storage API made simple.
- Instant Loading Web Apps with An Application Shell Architecture — A guide to using the App Shell coding pattern to create apps that load quickly.
- Using the Push API — Learn the essentials behind the Web Push API.
- Using the Notifications API — Web notifications in a nutshell.
- The building blocks of responsive design — Learn the basics of responsive design, an essential topic for modern app layout.
- Mobile first — Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.
- Add to home screen guide — Learn how your apps can take advantage of Add to home screen (A2HS).
Tools
- localForage — A nice simple JavaScript library for making client-side data storage really simple; it uses IndexedDB by default and falls back to Web SQL/Web Storage if necessary.
- ServiceWorkerWare — An Express-like microframework for easy Service Worker development.
- oghliner — Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.
- sw-precache — A node module to generate service worker code that will precache specific resources.
- workbox — Spiritual successor to sw-precache with more advanced caching strategies and easy precaching.
- upup — A tiny script that makes sure your site is always there for your users.
- The service worker cookbook — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.
- PWA VS Code extension - A collection of all essential code snippets you need to build Progressive Web Apps right there in your VS Code environment.
- Progressive web apps on Google Developers.
- Progressive Web Apps: Escaping Tabs Without Losing Our Soul by Alex Russell.
- Progressive Web Apps Check List.
- The Lighthouse Tool by Google.
- Tools for building progressive web apps with Angular.
- React PWA Guide Kit.
- Offline-capable Pokédex web site.
- Hacker News readers as Progressive Web Apps.
- Why Progressive Web Apps Are The Future of Mobile Web (2019 Research).
- Progressive Web Apps: Everything You Need To Know