이전에 만든 것을 PWA 대응과 드디어 외형을 바꿨습니다.
앱은 "4 한 몇 시부터인가?"를 해결하는 완전히 몸 안을위한 것입니다.
하지만 주로 PWA의 소개에 대해 쓰고 싶습니다.



사용하는 것

React.js

Flow

styled-components

GitHub pages

리포지토리 : htps : // 기주 b. 코 m/에 l 즈 p/덴치메

PWA 대응

Google Chrome Developer tools의 Audits 탐색을 따릅니다.

manifest.json에서 icon, 테마, 배경색을 설정했습니다. 자동으로 만들어지는 스플래시 화면이나 네비게이션 바의 색에 관계해 옵니다.

설정 내용은 Devtool의 Applications 탭에서 확인할 수 있습니다.


그리고는 「noscripts 태그 넣어 주세요」나 「테마 컬러와 나브 바의 색을 맞추어 주세요」등 세세한 곳입니다.



오른쪽 : PWA이므로 Android chrome에서 열면 설치를 촉구합니다.
왼쪽 두: 테마 색상이 반영됩니다.

ServiceWorker에서 오프라인으로도 시작합니다. 오히려 이번에는 시계 밖에 사용하지 않기 때문에 기능도 움직입니다.

iOS 지원

iOS는 PWA를 지원하지 않습니다. 그래서 홈 화면에 추가에서도 쾌적하게 사용할 수 있도록 최소한의 설정을했습니다.
Safari의 바 숨기기와 홈 화면 아이콘의 설정을 아래에서 할 수 있습니다.

index.html

<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/icon-2x.png" />