flyxc icon indicating copy to clipboard operation
flyxc copied to clipboard

Published 20 hours ago • verified publisher icon vicb

Add mobile web app support

Open tris opened this issue 2 years ago • 1 comments

Tested on:

  • Safari Technology Preview Release 159 on macOS Ventura 13.1
  • Google Chrome 109.0.5414.119 on macOS Ventura 13.1
  • Safari on iOS 16.2 on iPhone 14 Pro Max via iOS Simulator
  • Safari on iOS 16.1 on iPhone 14 Pro Max

Open issues:

  • The bat doesn't seem to be centered in mstile-150x150.png. I'm not sure why... that's the way it came out of realfavicongenerator.net. Still need to test on Windows.

Notes:

  • I needed a higher-res version of the logo for some of this stuff. I found the SVG (https://www.flaticon.com/free-icon/bat_1205671) but it needed some extra work in Inkscape to make it true to the logo. I removed most of the black contour lines, while the remaining two formed a rib at the midway point on the wings, which I recolored to #4e5173 and then used Path > Division to slice along the sharp bottom contour of the wing.
  • The Inkscape and Pixelmator assets (bat-icon.svg, bat-icon.pxd) perhaps belong somewhere other than .../public/static/img/. They aren't needed by the browser but will be needed if any work needs to be done with the logo again.
  • https://realfavicongenerator.net served as a starting point to generate the rest of the image assets and boilerplate.
  • For iOS, the apple-touch-icon isn't supposed to have a transparent background. (I tried it, and it's glitchy -- transparent during animations and then transitioning to an ugly flat black background.) I used Inkscape and Pixelmator to make a proper iOS-style icon with a subtle gradient, shrinking the logo to 93.75% to fit within the design template.
    image
  • To properly support Safari pinned tabs and particularly the MacBook Touch Bar, a mask-icon is required. I found three problems with that: (1) the mask-icon must be monochrome, (2) the mask-icon appears to override the favicon even in unpinned tabs, and (3) the color is independent of light/dark mode, so a neutral color must be picked. The color I picked (#5bbad5) doesn't look great, so I'm skipping the mask-icon, and the Touch Bar can just bite me.
  • For Windows Metro, I chose #da532c for the tile background (Dark Orange -- one of the 9 suggested Metro colors). I'm not in love with it.
  • service-worker.js must be in the root directory, or the file must be served with an extra header (Service-Worker-Allowed: /). The former option seemed less brittle.
  • The service worker isn't required for iOS, but is required for Chrome. (It works as an installable app on desktop Chrome!)
  • Lighthouse was invaluable for debugging the PWA.
  • A real SSL certificate (not self-signed) is required for the PWA to work fully (Chrome on OS X was particularly difficult here). (Also, in Safari, HTML5 Geolocation won't work over plain HTTP.)

Bugs and future work:

  • When the site is inaccessible, iOS seems to get into a reload loop. Not sure why that is. Once deployed to production (with legit SSL) it will hopefully use the service worker and serve up the offline page.
  • The Ozone logo is partially obscured by the "home indicator" at the bottom of the screen. (Real apps can hide this.)
  • Deal with the notch. (For now, all content is below the notch.)
  • Add more icon sizes to manifest.json (up to 1024x1024)
  • Set background_color and theme_color more appropriately
  • Make a proper set of apple-touch-startup-images -- I made a square 2048x2048 one (apple-touch-startup-image.png) based on the current splash screen (via screen recording), but it seems there needs to be an image for each screen size (https://stackoverflow.com/a/57338818).
  • Try using the service worker to actually cache stuff, or even update tracks in the background (may be useful in poor signal areas).
  • Improve the offline page (at least add a reload button?)
  • Add a maskable icon (Lighthouse throws a warning about this)
  • Add shortcuts (see YouTube's manifest as an example)
  • Add share_target (to visualize an igc or task, perhaps?)
  • Add screenshots (?) and submit to Google Play Store

More resources:

tris avatar Jan 19 '23 01:01 tris

Thanks for the change and the great description. I'll come to the review as soon as I have some time.

vicb avatar Jan 31 '23 17:01 vicb