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
ormobile-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)
Biggest one for me, you define the entry point into your app in the manifest and that is what is launched. Old model is to add the current page to the home screen - you can work around it by detecting launch from homescreen and pushState or redirecting to the root page, but it is a massive hack