gatsby의 gatsby-plugin-manifest 플러그인을 사용하여 webmanifest 자동 생성

gatsby-plugin-manifest

기본은 여기에 쓰여져 있지만, 세세한 궁리점을 몇 가지

그대로의 상태에서는 iPhone Safari의 「홈 화면에 추가」의 아이콘이 되지 않는다

react-helmet 등을 사용하여 head

/* icons/icon-48x48.pngなどは、gatsby-plugin-manifestで自動生成される */
<link rel="apple-touch-icon" href="icons/icon-48x48.png" sizes="48x48" />
<link rel="apple-touch-icon" href="icons/icon-72x72.png" sizes="72x72" />
<link rel="apple-touch-icon" href="icons/icon-96x96.png" sizes="96x96" />
<link rel="apple-touch-icon" href="icons/icon-144x144.png" sizes="144x144" />
<link rel="apple-touch-icon" href="icons/icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="icons/icon-256x256.png" sizes="256x256" />
<link rel="apple-touch-icon" href="icons/icon-384x384.png" sizes="384x384" />
<link rel="apple-touch-icon" href="icons/icon-512x512.png" sizes="512x512" />

자동 생성의 원이 되는 화상이 투과나 정사각형이 아닌 경우는, iPhone으로 배경색 블랙 고정이 되어 버린다

방법 그 1

원본이되는 이미지를 정사각형, 투명하지 않고 만듭니다.

gatsby-config.js

  {
    resolve: `gatsby-plugin-manifest`,
    options: {
      name: `GatsbyJS`,
      short_name: `GatsbyJS`,
      start_url: `/`,
      background_color: `#f7f0eb`,
      theme_color: `#a2466c`,
      display: `minimal-ui`,
      icon: `src/images/icon.png`, // この画像を正方形、透過無しで作る
    }
  }

방법 그 2

gatsby 프로젝트의 루트 폴더에 static 폴더를 만들고 배경색이있는 아이콘 파일을 배치합니다 (파일 이름, 크기는 각자 설정).

그 후 다음과 같이 layout 등으로 <head> 에 들어가도록 설정한다.

layout.tsx

import Helmet from "react-helmet"
...
...
<Helmet>
  <link rel="apple-touch-icon" href="/icons/touch-icon-iphone.png"/>
  <link rel="apple-touch-icon" sizes="152x152" href="/icons/touch-icon-ipad.png"/>
  <link rel="apple-touch-icon" sizes="180x180" href="/icons/touch-icon-iphone-retina.png"/>
  <link rel="apple-touch-icon" sizes="167x167" href="/icons/touch-icon-ipad-retina.png"/>
</Helmet>

탭이나 북마크의 favicon만은 자동 생성의 것으로 하고 싶지 않다

favicon은 여기서 지정되어 있으므로 자동 생성되는 48x48을 덮어쓸 수 있으면 된다.

Adding Assets Outside of the Module System
htps //w w. tsbyys. 오 rg / 드 cs / 아 ぢ g 낫게 s - 흠 ts - ぃぇ s /

gatsby 프로젝트의 루트 폴더에 static 폴더를 만들고 그 안에 icons/icon-48x48.png 를 만들면 gatsby develop 때때로 gatsby-plugin-manifest 로 자동 생성된 아이콘을 덮어씁니다.

이미지를 변경했지만 favicon 캐시가 작동하고 새로운 이미지를 볼 수 없습니다.

Chrome의 경우

강제로 favicon 캐시를 모두 지우기

rm /Users/ユーザー名/Library/Application Support/Google/Chrome/Default/Favicons

Reference

이 문제에 관하여(gatsby의 gatsby-plugin-manifest 플러그인을 사용하여 webmanifest 자동 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/github0013@github/items/90fd3f03c678ba36f016

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다