번거롭지 않은 PWA 아이콘 및 스플래시 화면 생성

최근에 저는 첫 번째 프로그레시브 웹 애플리케이션(PWA)을 만들었습니다. 부분적으로는 Apple Store에서 나에게 맞는 무료 앱을 찾을 수 없었기 때문이고, 부분적으로는 기본 모바일 앱보다 유지 관리가 훨씬 빠르고 더 낫다고 내 친구를 설득하려고 했기 때문입니다.

나는 주로 백엔드 개발자이기 때문에 매일 사용하지 않는 기술로 무언가를 해킹하는 것은 항상 즐겁고 편안합니다. 모든 코딩이 즐거웠습니다. 대부분 내가 상용구를 직접 파악하는 대신 거의 즉시 프로젝트 작업을 시작할 수 있는 훌륭한 도구Vue CLI와 함께 제공되는 훌륭한 도구PWA template를 사용했기 때문입니다.

그래도 몇 가지 문제가 있습니다. 앱이 홈 화면에서 열릴 때와 브라우저에서 열릴 때localStorage in PWA differs를 발견했을 때 처음으로 놀랐습니다. 사람들이 브라우저에서 앱을 사용하게 하지 말고 PWA 버전을 사용하게 하세요. 완료.

두 번째는 iOS Safari가 뷰포트 높이를 계산하는 방식으로 CSS에서 레이아웃 생성을 정말 어렵게 만들었습니다. 즉, 신중하게 배치된 앱 탐색 막대 위에 자체 도구 모음을 배치합니다. 나는 이것buggyfill을 실험했는데 잘 작동했지만 세부 사항을 렌더링하지 않고 앱 기능에 집중하고 싶다는 것을 깨닫게 되었기 때문에 이 문제를 처리하는 프로젝트에 Framework7을 채택했습니다. 완료.

그러나 놀랍게도 간단한 PWA를 만드는 가장 큰 과제는 다양한 장치/OS가 요구하는 모든 해상도의 아이콘으로 채우는 것이었습니다. Chrome DevTools가 검증하는 512픽셀 및 192픽셀 PNG 아이콘이 있고, 32픽셀 및 16픽셀 파비콘과 모든 iOS 기기에 대한 다양한 해상도가 있습니다. 지금까지는 아주 좋았습니다. 해상도가 다른 정사각형일 뿐입니다. 완료.

그런 다음 앱이 로드되는 동안 앱 사용자가 흰색 화면을 응시하지 않도록 사용할 수 있는 HTML 태그<link rel="apple-touch-startup-image">가 있음을 알게 됩니다. 그러나 거기에 있는 각 iOS 장치에 대해 언급된 시작 이미지를 만들어야 하며, 모두 다른 해상도와 디스플레이 종횡비를 가지고 있습니다.

따라서 더 이상 하나의 고해상도 PNG를 축소할 수 없습니다. 설상가상으로, 하나의 해상도만 사용할 수는 없으며 iOS가 해상도를 조정하여 모든 화면에서 사용하기를 바랍니다. 글쎄, 당신은 기대할 수 있지만 실망할 것입니다. 이것은 앱 아이콘과 함께 작동하지만 (180x180px 버전만 사용하게 되었으며 모든 장치가 제대로 작동하는 것 같습니다).

운 좋게도 Apple은 그것을 다루었고 편리한 테이블에 overview of all the resolutions을 제공합니다.

그래서 모든 이론이 제자리에 있었고 남은 일은 다양한 해상도로 내 앱 아이콘을 만드는 것뿐이었습니다. 어떻게 해야 하나요? 저는 그래픽 디자이너가 아닙니다. 온라인 도구를 사용한 다음 생성된 파일을 내 프로젝트에 수동으로 다운로드하고 싶지 않습니다. 수동으로 검토하고 선택해야 하는 gazillion 파일과 같은 출력이 있는 수십 개의 종속성이 있는 기성품 솔루션을 사용하고 싶지 않습니다. 젠장, 저는 웹 개발자입니다. 이것을 변환하는 더 좋은 방법이 있어야 합니다.

...이것으로:

그러다 날 때렸어! 다양한 종횡비와 해상도를 가진 이러한 그래픽은 하나의 이미지(각각 SVG)가 포함된 매우 단순한 반응형 웹 페이지에 지나지 않습니다. 운 좋게도 처음에는 로고를 벡터 그래픽으로 만들었습니다.

따라서 다음은 모든 화면 크기 및 방향에 적응하는 확장 가능한 웹 애플리케이션 아이콘에 대한 템플릿입니다.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  body {
    margin: 0;
    background: linear-gradient(225deg, #F9D423, #F83600);
    height: 100vh;
  }
  img {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  </style>
</head>
<body>
  <img src="logo-white.svg" >
</body>
</html>

다양한 뷰포트 크기로 스크린샷을 찍기만 하면 됩니다! 바보같이 굴지 말고 손으로 하지 마세요. 자동화하세요! 스크린샷을 찍는 작은 노드 스크립트를 뿌립니다(NPM을 통해 사용 가능한 Webshot CLI 사용).

const { exec } = require('child_process')
const util = require('util')

const sizes = [
  { name: 'favicon-16', size: '16/16' },
  { name: 'favicon-32', size: '32/32' },
  { name: 'apple-icon-180', size: '180/180' },
  { name: 'pwa-icon-192', size: '192/192' },
  { name: 'pwa-icon-512', size: '512/512' },
  { name: 'apple-splash-640', size: '640/1136' },
  { name: 'apple-splash-750', size: '750/1334' },
  { name: 'apple-splash-1242', size: '1242/2208' },
  { name: 'apple-splash-1125', size: '1125/2436' },
  { name: 'apple-splash-1125', size: '1125/2436' },
  { name: 'apple-splash-1536', size: '1536/2048' },
  { name: 'apple-splash-1668', size: '1668/2224' },
  { name: 'apple-splash-2048', size: '2048/2732' },
]

sizes.map(item => {
  exec(util.format(
    'npx webshot --window-size=%s ./src/assets/logo/logo.html ./static/img/icons/%s.png',
    item.size,
    item.name
  ))
})

하나의 SVG, 하나의 HTML, 하나의 노드 스크립트 및 하나의 로컬에 설치된 NPM 패키지. 이렇게 많은 PWA 그래픽을 생성하는 데 필요한 전부입니다.

읽어 주셔서 감사합니다! 그리고 이것은 이 멋진 커뮤니티의 첫 번째 게시물이므로 피드백을 주시면 감사하겠습니다. 여러분 모두 즐겁게 해킹하세요!

Reference

이 문제에 관하여(번거롭지 않은 PWA 아이콘 및 스플래시 화면 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dominikfiala/hassle-free-pwa-icons-and-splash-screen-generation-3c24

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

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

번거롭지 않은 PWA 아이콘 및 스플래시 화면 생성

Reference

좋은 웹페이지 즐겨찾기