Useful Resources for Developing Progressive Web Apps (PWA).

JR.Anand
Gridbox
Published in
3 min readSep 14, 2017

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

  1. Safe — Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
  2. Progressive — Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
  3. Responsive — Fit any form factor: desktop, mobile, tablet, or whatever is next.
  4. Connectivity-independent — Enhanced with service workers to work offline or on low quality networks.
  5. App-like — Feel like an app to the user with app-style interactions and navigation because they’re built on the app shell model.
  6. Fresh — Always up-to-date thanks to the service worker update process.
  7. Discoverable — Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
  8. Re-engageable — Make re-engagement easy through features like push notifications.
  9. Installable — Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  10. 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

  1. Getting Started with PWA -https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  2. https://scotch.io/tutorials/the-ultimate-guide-to-progressive-web-applications
  3. React PWA — https://engineering.musefind.com/build-your-first-progressive-web-app-with-react-8e1449c575cd
  4. https://auth0.com/blog/introduction-to-progressive-apps-part-one/
  5. Angular and Spring Boot — https://developer.okta.com/blog/2017/05/09/progressive-web-applications-with-angular-and-spring-boot
  6. https://tutorialzine.com/2016/09/everything-you-should-know-about-progressive-web-apps
  7. https://github.com/IncredibleWeb/pwa-tutorial
  8. https://blog.sicara.com/a-progressive-web-application-with-vue-js-webpack-material-design-part-1-c243e2e6e402

Boilerplates

  1. VueJS PWA Template — https://github.com/vuejs-templates/pwa
  2. Polymer 1.0 — https://github.com/StartPolymer/progressive-web-app-template
  3. React progressive web app — https://github.com/ArvinH/react-pwa-boilerplate
  4. An opinionated progressive web app boilerplate — https://github.com/lakshyaranganath/pwa
  5. 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.

--

--