Skip to content

Instantly share code, notes, and snippets.

@nolanlawson

nolanlawson/differences.md

Last active June 19, 2017 18:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nolanlawson/1326b4af986f5ac0ee9ae24630229fa8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nolanlawson/1326b4af986f5ac0ee9ae24630229fa8 to your computer and use it in GitHub Desktop.
Download ZIP
Differences between Progressive Web Apps and old-school offline webapps
Raw
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)
  • 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

Non-differences:

  • Can launch in "minimal-ui" mode (same as "browser" on Android, so equivalent to regular AppCache)
  • Can launch in "fullscreen" mode (same as "standalone" on Android, so equivalent to regular AppCache + mobile-web-app-capable)
@PaulKinlan
Copy link
Copy Markdown

PaulKinlan commented May 25, 2016

minimal-ui doesn't yet do anything on Android.

@nolanlawson
Copy link
Copy Markdown
Author

nolanlawson commented May 25, 2016

Yup, I just tested to confirm. Seems fullscreen also just falls back to standalone.

@PaulKinlan
Copy link
Copy Markdown

PaulKinlan commented May 25, 2016

Minimal UI tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=604390
Fullscreen tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=581522

@PaulKinlan
Copy link
Copy Markdown

PaulKinlan commented May 25, 2016

Also, in theory (I need to check impl) using the theme-color in the manifest should set it for all pages in the site unless it is overrided by the tag in the page.

@PaulKinlan
Copy link
Copy Markdown

PaulKinlan commented May 25, 2016

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

@PaulKinlan
Copy link
Copy Markdown

PaulKinlan commented May 25, 2016

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

@nolanlawson
Copy link
Copy Markdown
Author

nolanlawson commented May 25, 2016

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

@PaulKinlan
Copy link
Copy Markdown

PaulKinlan commented May 25, 2016

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

@mbrookes
Copy link
Copy Markdown

mbrookes commented May 28, 2016

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment