[IPS News] 4.4: Application manifest and icon management

[NewsBot]

Who remembers the earlier days of the internet? Back when you popped your logo at the top left of your site and you were largely done?

Invision Community has continually developed to account for all the new services that have been built during our 16 years.

We now have social media sharing images, favicons and more to consider.

Invision Community 4.4 also adds mobile application icons, Safari mask icons and data for an application manifest. Handling of these logos and icons was a prime candidate for improvement in 4.4.

Moving our current options

Step one for improving our handling of these images was to move our current options out of themes and to allow them to be managed suite-wide from a single area. You can still upload a logo image per-theme (which shows in the header area), but the rest of the options have now been relocated to a new area: Customization > Appearance > Icons & Logos.

Adding new options

After giving favicon and share logo management its own dedicated area, we took a look at enhancing the configuration options made available through the interface without requiring theme template edits.

Multiple share logos

You can now upload multiple share logos. If you elect to upload more than one share logo, Facebook and similar sites will generally either show a carousel to allow you to choose which logo to use when sharing, or simply use the first image referenced.

Application icons

You can now upload an image to represent your website which will be used to generate the "home screen" icons for iPhones and Androids automatically. Uploading a single image will result in several different copies of the image (in different dimensions) being generated, and mobile devices will automatically choose the best option from the list as needed.

Safari mask icon

You can also now upload a Safari Mask icon, which is used to represent your website in certain areas on Apple computers (such as on the "touchbar" of certain keyboards). This image must be an SVG image with a transparent background, and all vectors must be 100% black.

Additionally, you can specify the mask color which is used to offset your image when necessary (e.g. to represent it as "selected" or "active").

Application manifest

In order for devices to support the application icons that you upload, a file known as a web manifest must be generated and delivered to the browser. This now happens automatically, using details and icons specified in the AdminCP. Certain details, however, can be configured explicitly from the Icons & Logos page:

• Short name
  This is a short name to represent your site in areas with limited screen space, such as below your application icon on a mobile phone home screen.
• Site name
  This is the name of the site. The "Website name" setting is automatically used if you do not explicitly override it when configuring the manifest.
• Description
  A short description of your site
• Theme color
  You can choose a (single) color to represent the general theme of the site. This color may be used by devices in areas such as the address bar background.
• Background color
  You can also choose a (single) color to use as the background color for your site when the application is launched from a shortcut saved to the user's device home screen.
• Display mode
  Finally, you can specify the display mode your site should launch in.

For our more astute designers and developers, you may have already realized that generating the manifest file lays the groundwork for future PWA (Progressive Web App) development and support. Additionally, some Android devices will automatically prompt users to add your website to their home screen now that a manifest file is generated by the site.

Oh, and for the sake of completeness, we also generate the special browserconfig.xml file that Microsoft products (including Microsoft Edge, Internet Explorer, X-Box, and Microsoft-based mobile devices) look for when pinning sites and generating live tiles. There are no additional configuration options for this file - everything is automatically generated from the aforementioned options.

The end result?

Your community can now better convey, automatically, certain details to the myriad of devices out there that may be accessing your site, and you now have much better control over those details. You can more easily fine-tune the "little things" that help paint a complete picture of your web presence, and the groundwork has been laid for bigger and better things in the future as standardization and adoption of PWA functionality improves.

This blog is part of our series introducing new features for Invision Community 4.4.

View the full article