PWA - Full Screen Web App Documentation

[abulka]

The Onsen PWA documention has some good info but seems to cover e.g. an advanced topic of Service Workers ? - rather than the basics of making a PWA for iOS and Android look native and full screen, which strikes me as a core use case for using Onsen UI components (which are trying to look like the real thing).

Techniques like saving the app bookmark to the home screen, and if the html contains:

  <meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1, maximum-scale = 1, user-scalable = no" />
  <meta name="apple-mobile-web-app-capable" content="yes">

will cause the address bar and bottom navigation bar e.g. on iOS disappear nicely. Shouldn’t this be mentioned in the Onsen PWA doco?

I found it tricky to prevent the rubber band scrolling of the entire app when you drag down, but the inobounce javascript library seems to help - there are countless attempts at solving this problem on the internet - not sure what the best solution these days is, given Apple are always trying to prevent PWA looking native.

  <script src="inobounce.min.js"></script>

Re the bouncing fix above, as applied to the Onsen Todo list example, I found the removal of bouncing a tad too aggressive, and I can no longer pull down the todo list when it is scrolled all the way to the top, and have it bounce down slightly (like the pull to refresh effect) to indicate you are at the top to the todo list - instead nothing happens. It’s technically correct not to scroll at that point, but feels a bit odd. See my fork of the todo example, which you can save as a bookmark on the home page of iOS and it tries to act as an app (I only added full screen removal of the address bar and no bouncing - still need to add persistence and detecting updates etc).

I found a bunch of good tips at http://www.onlywebpro.com/2015/07/19/optimizing-full-screen-mobile-web-app-for-ios/ too. The tips at https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist.html are old (circa 2014) but potentially some good info there.

It would be nice if there was a snippet of code + html to detect if one is running in the browser or in fullscreen app browser mode and prompt (in a subtle way) the user to save the bookmark to the home screen for a “full screen, more native experience” - I wonder if that is possible. I’ll be googling that topic at some point…

The Onsen PWA documentation should cover all this territory IMO. I’m not an expert so am not the right one to be writing such documentation, just pointing out what seems to be a curious omission of information in the PWA docs.