"Just add a manifest!" he said… Sigh. This PR closes #299.

After much testing and image editing, I finally have a proposed set of changes for improving the site icons and mobile-/browser-friendliness of Plans. It involved more graphical changes than I hoped, so I'd appreciate feedback.

Key points:

• Adds a new .webmanifest that allows the website to be "installed" in many situations and updates index.php meta to reference it. I believe only Chrome at this time will automatically prompt people to "install" the site/page. Other browsers will generally just support and new or improved version of the browser's "Add to Home" (or taskbar) action.
• Creates a new vector version of the plans logo and favicon
• Creates a slightly tweaked dark mode version of the favicon (slightly lighter red to improve legibility but attempt to not change perceived color)
• Creates new "app icon" versions of the favicon as well as new icons to refer to "Quick Edit" and "Edit" (your plan)

If you're wondering why this is worth it at all, it is a nice minor facelift to plans and (most importantly, by far, if you ask me) prevents spawning multiple browser tabs on mobile for anyone who has added a plans bookmark to their home screen. I don't know how widespread that is, but it personally drives me up the wall. And showing plans in full screen is fun! More plan text on each screen!

Testing new behaviors

This deserves some testing. In order to support that, I placed an equivalent webmanifest on https://rootwiley.com/plans/history/. Visiting that page allows you to install/add to home screen the page and see the proposed icons and behavior for GrinnellPlans.com. I've included a lot of screenshots at the end to review what I've seen / tested.

Testing Combinations

I have successfully tested "installing" / "add to home screen" in the following:

• Android + Chrome
• Android + Firefox (shows FF icon on app icon, doesn't support shortcuts)
• Safari + iOS
• Safari + iPadOS
• Chrome + Windows
• Edge + Windows

They all provide different installation and feature experiences but at least provide a dedicated icon and standalone window every time. In no way does not installing the site interfere with usage.

New Images and Icons

As you review the PR, you'll see a number of new images:

• Vector version of Plans logo that is extremely close to the original
• Vector version of favicon with tweaked alignment of the "p", but otherwise the same
• New crops of the favicon for the app icon which requires a very generous safe boundary area

While the logo and favicon are not perfect replacements, I'm optimistic that they're close enough and maybe, just maybe improvements. I didn't swap the new SVG in on the login page or footer, but that might make sense in a follow-up PR.

Next Steps

What do we need to do to A) determine if this is worth adding and B) be confident when deploying? The chance of anything breaking due to these changes seems absolutely minuscule, but the Chrome install prompt does mean I want the experience to be positive for anyone who uses it right away.

Screenshots

Here are various screenshots of the results.

Firefox darkmode favicons

Firefox (left) and Chrome (right) "installed" icons on Android

Installed app from Safari + iOS

"Loading" screen for installed site on Chrome + Android

"Installed" page in Chrome + Android (phone using Dark mode)

Chrome automatic "install" prompt on Android

Chrome + Android long-press shortcuts