Progressive Web Apps are web applications that take advantage of new web technologies to act and feel like a native app. Progressive web apps work for every user regardless of the browser choice, they are reliable, fast and secure.
You can think of it as a website built using web technologies but that acts and feels like an app.
10 key concepts — from Google Developers
- Safe — Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
- Progressive — Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
- Responsive — Fit any form factor: desktop, mobile, tablet, or whatever is next.
- Connectivity-independent — Enhanced with service workers to work offline or on low quality networks.
- App-like — Feel like an app to the user with app-style interactions and navigation because they’re built on the app shell model.
- Fresh — Always up-to-date thanks to the service worker update process.
- Discoverable — Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
- Re-engageable — Make re-engagement easy through features like push notifications.
- Installable — Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
- Linkable — Easily share via URL and not require complex installation.
Online Courses
Udacity — Intro to Progressive Web Apps
Udemy — Progressive Web Apps (PWA) — The Complete Guide
Plural Sight — Getting Started with Progressive Web Apps
Lynda — Building a Progressive Web App
https://www.lynda.com/CSS-tutorials/Building-Progressive-Web-App/518052-2.html
Tutorials
- Getting Started with PWA -https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
- https://scotch.io/tutorials/the-ultimate-guide-to-progressive-web-applications
- React PWA — https://engineering.musefind.com/build-your-first-progressive-web-app-with-react-8e1449c575cd
- https://auth0.com/blog/introduction-to-progressive-apps-part-one/
- Angular and Spring Boot — https://developer.okta.com/blog/2017/05/09/progressive-web-applications-with-angular-and-spring-boot
- https://tutorialzine.com/2016/09/everything-you-should-know-about-progressive-web-apps
- https://github.com/IncredibleWeb/pwa-tutorial
- https://blog.sicara.com/a-progressive-web-application-with-vue-js-webpack-material-design-part-1-c243e2e6e402
Boilerplates
- VueJS PWA Template — https://github.com/vuejs-templates/pwa
- Polymer 1.0 — https://github.com/StartPolymer/progressive-web-app-template
- React progressive web app — https://github.com/ArvinH/react-pwa-boilerplate
- An opinionated progressive web app boilerplate — https://github.com/lakshyaranganath/pwa
- Preact PWA Boilerplate / Starter Kit — https://github.com/gokulkrishh/preact-pwa-boilerplate
Check out collection of Progressive Web Apps — https://pwa.rocks/
Signup for Gridbox — Simplest Interface Builder for Bootstrap & Foundation.