awesome-pwa

Useful resources for creating Progressive Web Apps

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
  • Audio and Video
  • Business and Finance
  • Communication and Social
  • Development and Design
  • Education and Reading
  • Games and Entertainment
  • Health and Lifestyle
  • News and Information
  • Shopping and Travel
  • Tools and Utilities
  • Miscellaneous
• Tutorials
• Articles
  • Getting Started and Introductions
  • Case Studies and Real-World Apps
  • Performance and Optimization
  • Technical Guides and Deep Dives
• Videos
  • Google I/O
  • Progressive Web App Summit 2016
  • Chrome Dev Summit
  • Other Talks and General Concepts
• Tools
  • Generators and CLIs
  • Service Worker Libraries
  • Webpack and Framework Plugins
  • Testing and Auditing
  • Miscellaneous Utilities
• Kits
• Courses
• Conferences

App Directories

• 0data.app
• paquet.app
• store.app

Apps

Audio and Video

• BitMidi: Listen to your favorite MIDI files.
• guitar-tuner: Aerotwist Guitar Tuner
• Joybox: A pinboard for audiovisual media.
• Kudoflix: Online video editor.
• Lofimusic.app: Online radio Radio
• Music Player PWA: Music Player.
• OmniCam: Live streaming webcams around the world.
• SoundCloud: Stream and listen to music.
• Soundslice: Create living sheet music.
• Spotify: Music streaming.
• SvenPanel: The Shrine - The Message Is Feierei Alda.
• VideoTrim.app: Video trimmer app in the browser.
• Wave-PD1: Synth toy.
• X Sound: Online keyboard synth.
• Youtube Music: Music streaming via YouTube.

Business and Finance

• Contrax: Track your contracts, subscriptions and trials.
• ELFSH: Food and expense manager.
• FarmOS: Farm record keeping
• Freelancer: Hire the best freelancers for any job, online.
• JustInvoice: An intuitive invoice manager that works completely in the browser and offline.
• JustTimeTrack: A Free and Open source Time Tracker.
• MoneyTracker: Personal finances tracking web app.
• MΞRKLIN: Open-source Ethereum Wallet Explorer.
• MTGStocks: Magic the Gathering price tracker.
• Paytm Lite: Online wallet and payments.
• Rydeen: Task management app for individuals.
• Simple Currency Converter: Currency Converter
• Skcript: Ruby on Rails Consulting.
• SplittyPie: Easy expense splitting.
• Taskade: Remote Team Workspace.
• Tender: Personal finance app.

Communication and Social

• Chitchatter: Secure peer-to-peer chat that is serverless, decentralized, and ephemeral
• Datememe: Online dating.
• emberclear: Encrypted Chat. No History. No Logs.
• ghChat: Chat application for GitHub.
• Google Duo: Video Calling.
• Medium: Writing space.
• Messages for web (by google): 400
• Similar Worlds: Experience Project Alternative. Find people with similar interests.
• Telegram: Telegram Web App.
• Threema Web: The messenger that puts security and privacy first.
• Tinder: Dating app.
• Twitter: Microblogging app.

Development and Design

• 3D House Editor: Free 3D floor planner
• ampproject: Web component framework.
• Bento-starter: Open-Source Full-Stack solution for fast PWA development
• Best Markdown Editor: undefined
• 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.
• ColorBeta: Advanced CSS Gradient Generator
• Demo PWA: Demonstrating offline, push notifications, background sync etc.
• DevDocs: API Documentation Browser
• Dev.Opera: Dev.Opera
• GitHub Explorer: Profile viewer.
• Hyperdraft: Turn your text notes into a website.
• JSON Formatter: Minimalist JSON formatter.
• Launchlet: Customize any website with JavaScript or CSS.
• Lorem Ipsum: Lorem Ipsum generator.
• Make Better Software: Raise software standards.
• MYHELLOIOT: MQTT client application.
• Photopea: Online Photo Editor.
• PixelCraft: Pixel Art Editor
• Regex101: Build, test and debug regex.
• SVGOMG: SVGO's Missing GUI
• Themer: Theme generator for editors, terminals, wallpapers, and more.
• Total Formatter: YAML Formatter
• TurboPixel: PixelArt Camera PWA
• webpushtest: Web Push Notifications Demo

Education and Reading

• Booksie: An open catalog of free picture storybooks for children instantly available for reading.
• EPUB Player: A fully-featured audiobook player with Audible/Spotify-like UX, powered by local TTS models. Turn your EPUBs into audiobooks entirely in-browser.
• Kommit: Create flashcards and learn them with spaced-repetition.
• PracticeLoop: Slow down & loop YouTube videos for music practice with progressive speed training.
• Swahili Dictionary: Offline Swahili-English-Swahili dictionary
• Timetable: Interactive editable timetable.
• Tutor Portfolio PWA: ???
• Unalengua IPA Translator: Translate to IPA.
• WordDB: Word finder, thesaurus, dictionary, crossword solver, rhyme finder and more.

Games and Entertainment

• 2048 Game 2048 Game
• Air Horner: Air horn sound.
• Backgammon: Backgammon game with local multiplayer (no single player).
• Colosseum: Displays Pokemons in a beautiful way
• Crazy Dice: Simple Dice App.
• Farmhand: A resource management game that puts a farm in your hand
• Life counter: Life counter app for 2 players. Supports game profiles, cout up/down.
• Match a Movie: Tinder but for movies to find out what to watch with your friends.
• Math Riddles: Interesting Math Riddles.
• Memory Game PWA: Strengthen your memory.
• Murlok.io: World of Warcraft Shadowlands.
• Othello: Play Othello against the computer.
• Player order selector: Random player order selector.
• Pokedex: Indexing Pokémon
• PokeQuest Wiki: Search for Pokémon
• PWA-NES: 8-bit NES emulator
• Soodoku: Advanced sudoku game, works online & offline, without ads and distractions.
• Virus Wars: Virus Wars game with local multiplayer (no single player).
• Yahtzee: Dice generator.

Health and Lifestyle

• Care Cards: Care Cards
• Cat Safe Foods: Sharing food with your cat? Make sure it's safe first
• ClearLungs: Free private streak tracker for quitting smoking. Track recovery phases, milestones, and share progress.
• Dog Safe Foods: Sharing food with your dog? Make sure it's safe first
• DoHabit: Straightforward habit tracker.
• FastTrack: Free intermittent fasting streak tracker with metabolic phases and milestone celebrations.
• Journalistic: Micro Journaling App.
• Paula: Free AI mental health companion using CBT and DBT techniques, with voice sessions, mood tracking, and journaling.
• Progressive Beer: Progressive Beer
• Rewire: Free private streak tracker for building better habits. Track recovery phases, earn milestones, and share progress cards.
• VapeFree: Free private streak tracker for quitting vaping. Track lung recovery phases, milestones, and share progress.
• Veganify: Check if a product is vegan or not.

News and Information

• Brutalist Hacker News: A Hacker News reader inspired by Brutalist Web design, Cyberpunk, retro computing, Y2K Aesthetics
• ComputerBase: German IT news site.
• Football Peek: Football results.
• Qi Reader: A modern web RSS reader.

Shopping and Travel

• Digikala: Digikala Web App
• Google Maps: Online maps.
• Housing Go: Real estate in India.
• trivago: Hotel prices.
• Uber Web: Ridesharing app.
• Versus: Consumer electronics shopping.

Tools and Utilities

• 2brew: PWA timer for coffee brewing
• AlarmDJ: Online alarm clock that plays MP3 files or YouTube videos.
• Anonynote: Note-taking app.
• Bangle.io - A Notion like local note taking tool where data is saved in your computer and in Markdown format.
• BulkPicTools - Privacy-first, browser-side bulk image optimizer and editor.
• Calculator: A calculator app with theme switcher
• Emoji Log: Personal tracker
• Google Drive: File storage.
• Google Photos: Photo management.
• GPA Calculator: Generate animated artwork from your unique GPA inputs.
• GPA Calculator: Calculate your college GPA.
• MConverter: Online file converter.
• Mono Card: Turn anything to visual cards for better content sharing.
• Morse Code Translator: Morse Code tools
• Nanocell-csv: A lightweight, cross platform, open-source, PWA CSV file viewer and editor
• Notella: No fluff notes app.
• Online Notepad With Share: Online Notepad – Free Online Text Editor & Notes Sharing
• Passky: Free and open-source Password Manager
• PasteePad: Free and simple notepad app
• Pocket Devices: Pocket-sized tools for seamless functionality on the go.
• Pomotimer: Pomodoro Technique Timer
• PPResume: A LaTeX Based Resume Builder
• QR Code Generator: Create custom QR Codes.
• QR Code Scanner: Scan a QR code.
• Remember: Location-based reminders.
• Resume Nation: Resume creator.
• Share Text Online Live: Share Text Online Live——Create, edit, and share text online with secure links and QR codes – No Login and registration required
• Smaller Pictures: Image compressor.
• Todoly: A Simple ToDo PWA
• Word Counter: Count characters, words, sentences, paragraphs, pages.
• Wormhole: Share files with end-to-end encryption.
• ztable.io: Z-Table lookup & Z-Score calculator.

Miscellaneous

• abc.xyz: Alphabet website
• Avain.app: Avain
• Chrome Developer Summit: Google Developers
• Closerintime: #closerintime
• Etch: A Small team of Designers and Developers.

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
• Web Powered SMS Inbox with Service Worker: Push Notifications

Articles

Getting Started and Introductions

• A Beginner’s Guide to Progressive Web Apps & the Frontend Web
• Are Progressive Web Apps the Future?
• Introduction to Progressive Web App with example
• Intro to (Progressive) Web Apps
• Progressive web apps have leapfrogged the native install model ... but challenges remain/
• Say Hello to Offline First
• What Progressive Web Apps Mean for the Web

Case Studies and Real-World Apps

• A Tinder Progressive Web App Performance Case Study
• 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
• Introducing Pokedex.org: a progressive webapp for Pokémon fans
• Swift Migration to Progressive Web App

Performance and Optimization

• FLIP your animations
• IndexedDB, WebSQL, LocalStorage – what blocks the DOM?
• PWA Performance
• The web app "discovery problem"

Technical Guides and Deep Dives

• A full-stack solution for fast PWA development
• How to build a PWA from scratch with HTML, CSS, and JavaScript
• Installable Web Apps with the WebApp Manifest in Chrome for Android
• Integrating Progressive Web Apps deeply into Android
• Is Service Worker ready?
• PWA - E-Commerce - Compare List
• Service Worker - Revolution of the Web Platform
• Service Workers: Dynamic Responsive Images using WebP Images
• Support for theme-color in Chrome 39 for Android
• The Building Blocks Of Progressive Web Apps
• You’re Missing the Point of Server-Side Rendered JavaScript Apps

Videos

Google I/O

• AMP + Progressive Web Apps: Start fast, stay engaged - Google I/O 2016
• Angular 2 and Progressive Web Apps - Google I/O 2016
• Building for billions on the web - Google I/O 2016
• Building the Google I/O Web App: Launching a Progressive Web App on Google.com - Google I/O 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: Building offline-first Progressive Web Apps - Google I/O 2016
• Polymer and Progressive Web Apps: Building on the modern web - Google I/O 2016
• Progressive, Performant, Polymer: Pick Three - Google I/O 2016
• Progressive Web Apps across all frameworks - Google I/O 2016
• Progressive Web Apps on Firebase - Google I/O 2016
• PWA starter kit: build fast, scalable, modern apps with Web Components (Google I/O '18)
• Search and the mobile content ecosystem - Google I/O 2016
• Service workers at scale with Facebook and Flipkart - Google I/O 2016
• The Mobile Web: State of the Union - Google I/O 2016
• Unlocking New Capabilities for the Web (Google I/O ’19)
• 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

Progressive Web App Summit 2016

• Building for Billions (Progressive Web App Summit 2016)
• Deep Engagment with Push Notifications (Progressive Web App Summit 2016)
• Instant-loading Offline-first (Progressive Web App Summit 2016)
• Instant loading with HTTP/2 (Progressive Web App Summit 2016)
• Konga (Progressive Web App Summit 2016)
• Mythbusting HTTPS (Progressive Web App Summit 2016)
• Opening Keynote (Progressive Web App Summit 2016)
• Progressive Web Apps in any context (Progressive Web App Summit 2016)
• Putting the Progressive in Progressive Web Apps (Progressive Web App Summit 2016)
• Samsung internets progressive web app commitment (Progressive Web App Summit 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 Future of Progressive Web Apps (Progressive Web App Summit 2016)
• Tools for Success (Progressive Web App Summit 2016)
• To the Lighthouse (Progressive Web App Summit 2016)
• UI Elements at 60fps (Progressive Web App Summit 2016)
• Using Web Components to Build PWAs (Progressive Web App Summit 2016)

Chrome Dev Summit

• Building and deploying a Progressive Web App at scale with Flipkart (Chrome Dev Summit 2015)
• Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
• Progressive Web Apps (Chrome Dev Summit 2015)

Other Talks and General Concepts

• Breaking the 1000ms Time to Glass Mobile Barrier (vid)
• Building a Progressive Web App - Aditya Punjani
• Interview with Google Software Engineer Alex Russell - O'Reilly Fluent Conference 2016
• Polymer Summit 2016 Youtube Playlist
• 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: the future of Apps
• Progressive Web Apps Training 2019 - Playlist
• Progressive Web Apps with Alex Russell
• PWA Training Course 2017 Playlist with Sarah Clark, Google Developers India
• The applied science of runtime performance (vid)
• The Service Worker is Coming - Look Busy (vid)
• Why Build Progressive Web Apps? - Playlist

Tools

Generators and CLIs

• DSW: Generate your Service Worker dynamically, webmanifest, rules for requests, redirects, etc.
• fetch-manifest-json: Fetch the mainfest.json from an URL.
• Manifest Generator: This simple page will generate the manifest file for you.
• manifest-json: CLI tool for creating mainfest.json.
• 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.

Service Worker Libraries

• fetch-sync: Proxy Fetch requests through the Background Sync API
• msgr: Nifty service worker/client message utility
• serviceworkerware: An Express-like layer on top of ServiceWorkers to provide a way to easily plug functionality
• sw-delta: An incremental cache for the web.
• sw-precache: A node module to generate service worker code that will precache specific resources
• sw-toolbox: A runtime caching library
• UpUp: 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 sea
• Workbox: Javascript Library for building progressive web apps

Webpack and Framework Plugins

• offline-plugin: Offline plugin (ServiceWorker, AppCache) for webpack (http://webpack.github.io/)
• 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.
• sw-precache-webpack-plugin: SW Precache Webpack Plugin

Testing and Auditing

• PageGuard: Free website health scanner that audits performance, accessibility (WCAG 2.1), SEO, and best practices — ideal for verifying PWA quality before launch.

Miscellaneous Utilities

• 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.
• add-to-homescreen: Easily add a website/PWA to home screen on IOS/Android/Desktop.
• @forlagshuset/simple-fs: Needs offline filesystem? SimpleFS provides sweet promise based nodejs file API on top of indexeddb.
• HNPWA: Hacker News readers as Progressive Web Apps. A spiritual successor to TodoMVC.
• pwa-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)

Conferences

• A list of conferences talking about PWA