Feature: Set up App icons & Web Manifest

[nick-y-ito]

Overview

This PR introduces our LOGO everywhere, such as favicon, touch icon, and OG image.

Changes

• Set up favicon
  • Added public/images/icons/favicon.ico
  • Specified it for icons property in layout.tsx
• Set up OGP
  • Added public/images/og.png
  • Configured openGraph and twitter property in layout.tsx
• Set up PWA for Apple devices
  • Added public/images/icons/apple-touch-icon.png
  • Specified it for icons property in layout.tsx
  • Specified the viewport.themeColor in layout.tsx
• Set up PWA for Other devices (manifest.ts)
  • Added all the icon images in public/images/icons/manifest/
  • Created manifest.ts
  • Configured shortcuts for installation display (See the video below)
  • Specified maskable and any icons to icons property
• Added the appConst.ts and configured the app information

Review points

Sorry for the large quantity of changed files, but there are only three files that you need to focus on for a review:

• src/app/layout.tsx
• src/app/manifest.ts
• src/const/appConst.ts

Other files are just image modifications or directory refactoring.

Screen Captures

Favicon (on Google Chrome of MacBook)

Favicon (on Google Safari of MacBook)

Touch Icons on iPhone, Android, Mac, Windows and Linux

All requirements for PWA are fulfilled

PWA on Android

https://github.com/nishiki-tech/nishiki-frontend/assets/99148565/70343cdd-9eea-433a-8d7f-53910c34bd8c

https://github.com/nishiki-tech/nishiki-frontend/assets/99148565/55a75124-6ffa-40d9-b390-0887d7185219

PWA with Google Chrome on MacBook

https://github.com/nishiki-tech/nishiki-frontend/assets/99148565/ad5bd8a7-55d9-4bda-b203-2e3944192df1

References

Icons

• Next.js - favicon, icon, and apple-icon
• Next.js - Static Assets in public
• Next.js - icons | Metadata Object and generateMetadata Options

Image Generators

• SVG to ICO Converter
• Web App Manifest Generator
• Round corners in image - online

Web Manifest

• Next.js - manifest.json
• How to add a Web App Manifest and mobile-proof your site
• display
• MDN - background_color
• MDN - theme_color
• orientation
• MDN - icons | maskable
• Web.dev - icons | maskable
• PWA Builder - A PWA inspector

Meta Data

• Chrome for Developers - theme-color in meta tag
• Next.js - themeColor | generateViewport

Twitter Card

• X - Card | Developer Platform
• Next.js - twitter | Metadata object
• Twitter Cards: Everything you need to know
• Qiita - Twitter Card

OGP

• Next.js - openGraph
• OGP Checker

Notes

-

Assignee Checklist:

• [x] The naming convention of the PR title is correct (See the comment at the top of this template)
• [x] The base branch is correct (See: Types of Branches)
• [x] The branch name follows the Branch Naming Conventions
• [x] The correct assignees and reviewers have been designated for this PR
• [x] The coding style follows the Coding Style Guide
• [x] All the related issues are associated with this PR
• [x] All criteria in the associated issues are met (please tick the checkboxes)
• [x] My changes do not generate new warnings or errors (especially in the console)

Reviewer Checklist:

• [ ] Double-check the "Assignee Checklist"
• [ ] The code follows the generic best practices and our Coding Style Guide
• [ ] The code is well-commented and easy to understand
• [ ] The UI changes accurately reflect the provided design

[nick-y-ito]

The look of the icon on Android is not as expected. The image should fill the entire icon.

↓

I needed to specify the icons as "maskable" in manifest.ts. It's solved now.

[nick-y-ito]

@kanta1207 @ShoeheyOt @kotaaaa Please review this PR when you have time. Thank you!

[nick-y-ito]

@hitohata @taniguchiiqqq Could you also test if you can install it as a PWA and the rounded icon is displayed correctly on Windows and Linux, please?

[ShoeheyOt]

@nick-y-ito Thank you for your work! I tried to use it on Windows, Linux laptop and iPhone. It's All LGTM :)

[nick-y-ito]

@hitohata @ShoeheyOt @kanta1207 Thank you for your reviews!😄