Differences between Progressive Web Apps and old-school offline webapps

differences.md

Progressive Web App stack:

• Service Worker
• Web App Manifest

Old-school offline webapp stack:

• Application Cache
• Touch Icons (apple-touch-icon etc.)
• apple-mobile-web-app-capable or mobile-web-app-capable

Differences:

• App install banner
• Various benefits of SW over AppCache (flexibility, partial cache invalidation, Cache API)
• Push notifications
• Media queries for standalone mode
• Can set the background color on the splash screen
• Can set the theme (status bar) color on the splash screen
• Can define a short name vs a long name
• Can launch in landscape
• Can launch a custom URL to detect homescreen launch (e.g. index.html?homescreen=true)
• Must use HTTPS

Non-differences:

• Can launch in "minimal-ui" mode – same as "browser" on Android, so equivalent to regular AppCache (see below for tracking bug though)
• Can launch in "fullscreen" mode – same as "standalone" on Android, so equivalent to regular AppCache + mobile-web-app-capable (see below for tracking bug though)

Examples:

• Forecast.io (AppCache with mobile-web-app-capable, launches from homescreen with splash screen and no URL bar
• PouchDB.com (Regular AppCache, so launches from homescreen into browser with no splash screen)

fullscreen will be different though in the future, it won't have any phone "chrome" (notification tray and buttons at the footer)

Thanks, forgot about that that one! I'll add it.

Ah. we have a display-mode CSS media query that allows you to adjust the styles based on how it was launched.... can't do that with navigator.standalone

Is it possible to support a fallback to AppCache if the browser doesn't support PWA? OR put another way, if you have both, how does a browser that supports PWA behave?