Awesome
awesome-pwa
Useful resources for creating Progressive Web Apps
Sponsors
MagicBell
What is a Progressive Web App
A Progressive Web App uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, leveraging the web's low friction.
Source: Google Developers - Progressive Web Apps
Table of contents
App Directories
Apps
- 2brew: PWA timer for coffee brewing
- 3D House Editor: Free 3D floor planner
- abc.xyz: Alphabet website
- Air Horner: Air horn sound.
- AlarmDJ: Online alarm clock that plays MP3 files or YouTube videos.
- ampproject: Web component framework.
- Anonynote: Note-taking app.
- Avain.app: Avain
- Backgammon: Backgammon game with local multiplayer (no single player).
- Bangle.io - A Notion like local note taking tool where data is saved in your computer and in Markdown format.
- Bento-starter: Open-Source Full-Stack solution for fast PWA development
- Best Markdown Editor: undefined
- BitMidi: Listen to your favorite MIDI files.
- 2048 Game 2048 Game
- Booksie: An open catalog of free picture storybooks for children instantly available for reading.
- Brutalist Hacker News: A Hacker News reader inspired by Brutalist Web design, Cyberpunk, retro computing, Y2K Aesthetics
- Budget Tracker: Track expenses and analyse if they stick to a budget
- bundle: A quick and easy way to bundle, minify, and compress (gzip and brotli) your ts, js, jsx and npm projects all online, with the resulting file size.
- Calculator: A calculator app with theme switcher
- Care Cards: Care Cards
- Cat Safe Foods: Sharing food with your cat? Make sure it's safe first
- Chitchatter: Secure peer-to-peer chat that is serverless, decentralized, and ephemeral
- Chrome Developer Summit: Google Developers
- Closerintime: #closerintime
- collAnon: Private discussions, perspectives exchange and a simple Gantt calendar.
- ColorBeta: Advanced CSS Gradient Generator
- Colosseum: Displays Pokemons in a beautiful way
- ComputerBase: German IT news site.
- Contrax: Track your contracts, subscriptions and trials.
- Crazy Dice: Simple Dice App.
- Currency Exchange Loss Calculator: Currency Exchange Loss Calculator
- Datememe: Online dating.
- Demo PWA: Demonstrating offline, push notifications, background sync etc.
- Dev.Opera: Dev.Opera
- DevDocs: API Documentation Browser
- Digikala: Digikala Web App
- Dog Safe Foods: Sharing food with your dog? Make sure it's safe first
- DoHabit: Straightforward habit tracker.
- DontBore: Find and share logins.
- DTH Search India: Search DTH TV channel numbers in India.
- ELFSH: Food and expense manager.
- emberclear: Encrypted Chat. No History. No Logs.
- Emoji Log: Personal tracker
- Etch: A Small team of Designers and Developers.
- Farmhand: A resource management game that puts a farm in your hand
- FarmOS: Farm record keeping
- Fast Golf Scores: Fast Golf Scores.
- FileLove: Minimal p2p file transfer right in the browser.
- FlagWarriors: Minimalist multiplayer strategy game.
- Football Peek: Football results.
- Freelancer: Hire the best freelancers for any job, online.
- ghChat: Chat application for GitHub.
- GitHub Explorer: Profile viewer.
- Google Drive: File storage.
- Google Duo: Video Calling.
- Google Maps: Online maps.
- Google Photos: Photo management.
- GPA Calculator: Generate animated artwork from your unique GPA inputs.
- GPA Calculator: Calculate your college GPA.
- guitar-tuner: Aerotwist Guitar Tuner
- Housing Go: Real estate in India.
- Hyperdraft: Turn your text notes into a website.
- Indecisive.US: App to help you make a decision.
- Journalistic: Micro Journaling App.
- Joybox: A pinboard for audiovisual media.
- jsfeatures: JavaScript features
- JSON Formatter: Minimalist JSON formatter.
- JustInvoice: An intuitive invoice manager that works completely in the browser and offline.
- JustTimeTrack: A Free and Open source Time Tracker.
- Kahla: Business messaging app.
- Kommit: Create flashcards and learn them with spaced-repetition.
- Kudoflix: Online video editor.
- Launchlet: Customize any website with JavaScript or CSS.
- Let's Plant: Plant chooser.
- Life counter: Life counter app for 2 players. Supports game profiles, cout up/down.
- Lofimusic.app: Online radio Radio
- Lorem Ipsum: Lorem Ipsum generator.
- Math Riddles: Interesting Math Riddles.
- Make Better Software: Raise software standards.
- MConverter: Online file converter.
- Medium: Writing space.
- Memory Game PWA: Strengthen your memory.
- MΞRKLIN: Open-source Ethereum Wallet Explorer.
- Messages for web (by google): 400
- MoneyTracker: Personal finances tracking web app.
- Morse Code Translator: Morse Code tools
- MTGStocks: Magic the Gathering price tracker.
- Murlok.io: World of Warcraft Shadowlands.
- Music Player PWA: Music Player.
- MYHELLOIOT: MQTT client application.
- Notella: No fluff notes app.
- OmniCam: Live streaming webcams around the world.
- Othello: Play Othello against the computer.
- PakWheels: Buy/sell cars.
- Passky: Free and open-source Password Manager
- PasteePad: Free and simple notepad app
- Paytm Lite: Online wallet and payments.
- Photopea: Online Photo Editor.
- PixelCraft: Pixel Art Editor
- Player order selector: Random player order selector.
- Pocket Devices: Pocket-sized tools for seamless functionality on the go.
- Pokedex: Indexing Pokémon
- PokeQuest Wiki: Search for Pokémon
- Pomotimer: Pomodoro Technique Timer
- Progressive Beer: Progressive Beer
- PPResume: A LaTeX Based Resume Builder
- PWA-NES: 8-bit NES emulator
- Qi Reader: A modern web RSS reader.
- QR Code Generator: Create custom QR Codes.
- QR Code Scanner: Scan a QR code.
- Regex101: Build, test and debug regex.
- Remember: Location-based reminders.
- RepoTracker: Better GitHub Repository Stats, Charts, and Insights
- Resume Nation: Resume creator.
- Rydeen: Task management app for individuals.
- SaintsApp: New Orleans Saints' game schedule.
- Saucekudasai: An Anime seacrch engine that finds animeinfo based on image provided
- Similar Worlds: Experience Project Alternative. Find people with similar interests.
- Simple Currency Converter: Currency Converter
- Skcript: Ruby on Rails Consulting.
- Smaller Pictures: Image compressor.
- Soodoku: Advanced sudoku game, works online & offline, without ads and distractions.
- SoundCloud: Stream and listen to music.
- Soundslice: Create living sheet music.
- SplittyPie: Easy expense splitting.
- Spotify: Music streaming.
- SvenPanel: The Shrine - The Message Is Feierei Alda.
- SVGOMG: SVGO's Missing GUI
- Swahili Dictionary: Offline Swahili-English-Swahili dictionary
- Taskade: Remote Team Workspace.
- Telegram: Telegram Web App.
- Tender: Personal finance app.
- Themer: Theme generator for editors, terminals, wallpapers, and more.
- Threema Web: The messenger that puts security and privacy first.
- Timetable: Interactive editable timetable.
- Tinder: Dating app.
- Todoly: A Simple ToDo PWA
- Total Formatter: YAML Formatter
- trivago: Hotel prices.
- Tutor Portfolio PWA: ???
- TurboPixel: PixelArt Camera PWA
- Twitter: Microblogging app.
- Uber Web: Ridesharing app.
- Unalengua IPA Translator: Translate to IPA.
- Veganify: Check if a product is vegan or not.
- VeggieTables: Track your crops and farming activities.
- Versus: Consumer electronics shopping.
- VideoTrim.app: Video trimmer app in the browser.
- Virus Wars: Virus Wars game with local multiplayer (no single player).
- Wave-PD1: Synth toy.
- WebAPI check: Open this PWA to check which WebAPIs are available on your current device.
- Word Counter: Count characters, words, sentences, paragraphs, pages.
- WordDB: Word finder, thesaurus, dictionary, crossword solver, rhyme finder and more.
- Wormhole: Share files with end-to-end encryption.
- X Sound: Online keyboard synth.
- Yahtzee: Dice generator.
- Youtube Music: Music streaming via YouTube.
- ztable.io: Z-Table lookup & Z-Score calculator.
- webpushtest: Web Push Notifications Demo
Tutorials
- Build a realtime PWA using Vue.js
- Build a realtime PWA with React
- Getting started with Progressive Web Apps by @addyosmani
- Google Developers - Progressive Web Apps
- Introduction to Progressive Web Apps by Google-Udacity
- Introduction to progressive web apps
- Progressive Web Apps with React.js - 4 part series by @addyosmani
- Retrofit an Existing Website as a Progressive Web App
- Service Worker Cookbook - Mozilla
- Web Powered SMS Inbox with Service Worker: Push Notifications
Articles
- A Beginner’s Guide to Progressive Web Apps & the Frontend Web
- A full-stack solution for fast PWA development
- A Tinder Progressive Web App Performance Case Study
- Are Progressive Web Apps the Future?
- FLIP your animations
- From Electron to Progressive Web App
- How I built a Progressive Beer App
- How I made a Progressive Web App out of my Blog
- How we made our website offline first
- How to build a PWA from scratch with HTML, CSS, and JavaScript
- IndexedDB, WebSQL, LocalStorage – what blocks the DOM?
- Installable Web Apps with the WebApp Manifest in Chrome for Android
- Integrating Progressive Web Apps deeply into Android
- Introducing Pokedex.org: a progressive webapp for Pokémon fans
- Introduction to Progressive Web App with example
- Intro to (Progressive) Web Apps
- Is Service Worker ready?
- Progressive web apps have leapfrogged the native install model ... but challenges remain/
- PWA Performance
- PWA - E-Commerce - Compare List
- Say Hello to Offline First
- Service Worker - Revolution of the Web Platform
- Service Workers: Dynamic Responsive Images using WebP Images
- Support for theme-color in Chrome 39 for Android
- Swift Migration to Progressive Web App
- The Building Blocks Of Progressive Web Apps
- The web app "discovery problem"
- What Progressive Web Apps Mean for the Web
- You’re Missing the Point of Server-Side Rendered JavaScript Apps
Videos
- AMP + Progressive Web Apps: Start fast, stay engaged - Google I/O 2016
- Angular 2 and Progressive Web Apps - Google I/O 2016
- Breaking the 1000ms Time to Glass Mobile Barrier (vid)
- Building a Progressive Web App - Aditya Punjani
- Building and deploying a Progressive Web App at scale with Flipkart (Chrome Dev Summit 2015)
- Building for Billions (Progressive Web App Summit 2016)
- Building for billions on the web - Google I/O 2016
- Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
- Building the Google I/O Web App: Launching a Progressive Web App on Google.com - Google I/O 2016
- Deep Engagment with Push Notifications (Progressive Web App Summit 2016)
- Fast and resilient web apps: Tools and techniques - Google I/O 2016
- Fireside Chat with the Progressive Web Apps Crew - Google I/O 2016
- Going Big: PWAs Come to Desktop and Chrome OS (Google I/O ’19)
- Great libraries and tools for great Progressive Web Apps - Google I/O 2016
- Houdini: Demystifying the Future of CSS - Google I/O 2016
- Instant loading with HTTP/2 (Progressive Web App Summit 2016)
- Instant Loading: Building offline-first Progressive Web Apps - Google I/O 2016
- Instant-loading Offline-first (Progressive Web App Summit 2016)
- Interview with Google Software Engineer Alex Russell - O'Reilly Fluent Conference 2016
- Konga (Progressive Web App Summit 2016)
- Mythbusting HTTPS (Progressive Web App Summit 2016)
- Opening Keynote (Progressive Web App Summit 2016)
- Polymer and Progressive Web Apps: Building on the modern web - Google I/O 2016
- Polymer Summit 2016 Youtube Playlist
- Progressive Web Apps (Chrome Dev Summit 2015)
- Progressive Web Apps across all frameworks - Google I/O 2016
- Progressive web apps and what's next for mobile
- Progressive Web Apps and What's Next for Mobile
- Progressive Web Apps Are Easy Now - Or Are They with Thorsten Lorenz -- UtahJS 2018
- Progressive Web Apps in any context (Progressive Web App Summit 2016)
- Progressive Web Apps on Firebase - Google I/O 2016
- Progressive Web Apps Training 2019 - Playlist
- Progressive Web Apps with Alex Russell
- Progressive Web Apps: the future of Apps
- Progressive, Performant, Polymer: Pick Three - Google I/O 2016
- Putting the Progressive in Progressive Web Apps (Progressive Web App Summit 2016)
- PWA starter kit: build fast, scalable, modern apps with Web Components (Google I/O '18)
- PWA Training Course 2017 Playlist with Sarah Clark, Google Developers India
- Samsung internets progressive web app commitment (Progressive Web App Summit 2016)
- Search and the mobile content ecosystem - Google I/O 2016
- Service workers at scale with Facebook and Flipkart - Google I/O 2016
- Summit Report: Building for billions with Progressive Web Apps (Progressive Web App Summit 2016)
- Summit Report: Checking in with Paul Lewis and Jake Archibald (Progressive Web Apps Summit 2016)
- Summit Report: Making Progressive Web Apps accessible, at scale! (Progressive Web App Summit 2016)
- Summit Report: Progressive Web Apps for any occassion! (Progressive Web App Summit 2016)
- Summit Report: Reach, acquisition and conversion (Progressive Web Apps Summit 2016)
- Summit Report: Talking HTTPS with Emily Schechter (Progressive Web App Summit 2016)
- Summit Report: The Web Developers swarm! (Progressive Web Apps Summit 2016)
- Summit Report: What do I need to know about HTTP2? (Progressive Web App Summit 2016)
- Summit Report: Why's it called a Progressive Web App? (Progressive Web App Summit 2016)
- The applied science of runtime performance (vid)
- The Future of Progressive Web Apps (Progressive Web App Summit 2016)
- The Mobile Web: State of the Union - Google I/O 2016
- The Service Worker is Coming - Look Busy (vid)
- To the Lighthouse (Progressive Web App Summit 2016)
- Tools for Success (Progressive Web App Summit 2016)
- UI Elements at 60fps (Progressive Web App Summit 2016)
- Unlocking New Capabilities for the Web (Google I/O ’19)
- Using Web Components to Build PWAs (Progressive Web App Summit 2016)
- V8, modern JavaScript, and beyond - Google I/O 2016
- Who are you, really: Safer and more convenient sign-in on the web - Google I/O 2016
- Why Build Progressive Web Apps? - Playlist
Tools
@forlagshuset/simple-fs
: Needs offline filesystem? SimpleFS provides sweet promise based nodejs file API on top of indexeddb.a2hs.js
: A useful modern JavaScript solution that helps your website users to add (install) a progressive web app to the Home Screen of their mobile iOS devices.DSW
: Generate your Service Worker dynamically, webmanifest, rules for requests, redirects, etc.fetch-manifest-json
: Fetch themainfest.json
from an URL.fetch-sync
: Proxy Fetch requests through the Background Sync APIHNPWA
: Hacker News readers as Progressive Web Apps. A spiritual successor to TodoMVC.Manifest Generator
: This simple page will generate the manifest file for you.manifest-json
: CLI tool for creatingmainfest.json
.msgr
: Nifty service worker/client message utilityoffline-plugin
: Offline plugin (ServiceWorker, AppCache) for webpack (http://webpack.github.io/)PWA Asset Generator
: Automates PWA asset generation and image declaration. Automatically generates icon and splash screen images, favicons and mstile images.PWAify
: CLI tool to convert your PWA into a cross-platform desktop app.serviceworker-rails
: Plugin to integrate Service Worker with the Rails asset pipeline.serviceworker-webpack-plugin
: Simplifies creation of a service worker to serve your webpack bundles.serviceworkerware
: An Express-like layer on top of ServiceWorkers to provide a way to easily plug functionalitysw-delta
: An incremental cache for the web.sw-precache-webpack-plugin
: SW Precache Webpack Pluginsw-precache
: A node module to generate service worker code that will precache specific resourcessw-toolbox
: A runtime caching libraryUpUp
: Makes sure your users can always access your site's content, even when they're on a plane, in an elevator, or 20,000 leagues under the seaWorkbox
: Javascript Library for building progressive web appspwa-badge
: Badging for PWA app icons, Like Native Apps
Kits
Bento starter
: Full-stack solution to build Progressive Web Apps.Progressive Web Application skeleton
: A simple set of skeleton files for shipping a Progressive Web App.pwabuilder
: All the tools you need to build and deploy your Progressive Web Apps.Web Starter Kit
: A workflow for multi-device websites.- Polymer App Toolbox: "a collection of components, tools and templates for building Progressive Web Apps with Polymer"
- Preact CLI: "Your next Preact PWA in 30 seconds"
- Simple PWA: A Progressive Web App template that provides the minimum file structure needed to create a PWA
- Stencil PWA toolkit: Ionic's "Everything you need to easily build fast, production ready Progressive Web Apps"
Courses
- Developing Progressive Web Apps Course (free)
- Getting Started with Progressive Web Apps (paid)
- Intro to Progressive Web Apps (free)
- Learn to build progressive web apps using JavaScript (paid)
- Progressive Web App Fundamentals (paid)
- Progressive Web Apps - The Concise PWA Masterclass (paid)
- Progressive Web Apps (PWA) - From Beginner to Expert (paid)
- Progressive Web Apps (PWA) - The Complete Guide (paid)