Learning Progressive Web App

Getting Started

• Progressive Web Apps | Web Fundamentals - Google Developers

  • What is a Progressive Web App
  • Definition of Progressive Web App
  • Components details, Guides, and Code labs materials.
  • Codelabs
    • Your First Progressive Web App | Web Fundamentals - Google Developers

• Progressive Web Apps with Alex Russell - YouTube: You can understand, why Progressive Web Apps has emerged, and keenly feel the necessity of the new stage of mobile web app

• AddyOsmani.com - Getting started with Progressive Web Apps

  • All that Progressive Web App
  • Web App Manifest, Home Screen Banner, Service Worker, Push Notification, Advanced features such as Bluetooth
  • Application Shell
  • Boilerplates, Progressive Web Apps and Frameworks

• Progressive Web Apps (Chrome Dev Summit 2015) - YouTube: Talk about Progressive Web App from Chrome Dev Summit 2015

Components

Web Manifest

Tools

• Manifest generator
• Web Manifest Validator
• Sample manifest of web-starter-kit/manifest.json

Service Worker

• Adding a Service Worker and Offline into your Web App
  • Adding a Service Worker with sw-precache: Codelab
• Service Worker Libraries | Web Tools - Google Developers
  • GoogleChrome/sw-precache: A node module to generate service worker code that will precache specific resources
  • GoogleChrome/sw-toolbox: A collection of tools for service workers
• Service Worker, what are you? - Service Worker explanation with illustative sketches

Kits, Boilerplates, Skeletons, and Generators

• google/web-starter-kit: Web Starter Kit - a workflow for multi-device websites
  • Boilerplate for web development with many tools
  • Material Design Lite, Web App Manifest, Splash Screen, Service Worker
• PolymerElements/polymer-starter-kit: A starting point for Polymer 1.0 apps
  • Powered by Material Design Layout with Polymer
  • Service Worker with Platinum Service Worker Element, Push Notification with Platinum Push Element
  • Web App Manifest, Home Screen Banner
• PolymerLabs/progressive-webapp-config: Generalised Progressive Web App skeleton
  • Progressive Web App skeleton
  • Mobile optimized HTML, Web App Manifest, Service Worker
• hemanth/generator-pwa: Yeoman generator for a progressive webapp.
  • Yeoman generator for Progressive Web App

Learning Materials

• Your First Progressive Web App | Web Fundamentals - Google Developers

App Collections

• Progressive Web Apps: Progressive Web Apps collections made by Opera DevRel Team
• hemanth/awesome-pwa: Awesome list of progressive web apps!
• PWA rocks - Filterable list of Progressive Web Apps

Feedback

• GoogleChrome/progressive-webapps-everywhere: Feedback on PWAs built using JS frameworks