설치 가능한 웹 애플리케이션을 위해 무엇을 준비해야 합니까?

아시다시피 이제 설치 가능한 웹 애플리케이션을 PWA로 만들 수 있습니다. 그리고 나는 당신이 그것을 만드는 방법을 이미 알고 있다고 생각합니다. "manifest.json 쓰기". 그러나 때때로 올바른 구성이 무엇인지 잊어 버립니다. 이 게시물은 문제입니다.

요약: 개발자 도구에서 모든 경고를 해결하십시오.

당신이해야 할 일은 거기에 쓰여 있습니다.

올바른 manifest.json은 무엇입니까

설치 가능한 PWA를 만들려면 manifest.json을 작성해야 합니다. 하지만 manifest.json을 작성해도 웹 애플리케이션이 설치되지 않는 것을 이미 경험하셨을 것입니다. 그 이유는 잘못된 구성을 작성했기 때문입니다.

올바른 manifest.json을 어떻게 작성할 수 있습니까? 방법은 개발자 도구를 따르는 것입니다. 잘못된 구성을 작성하면 개발자 도구에서 수정 방법을 알려줍니다.

내 실제 워크플로

이제부터는 Installable PWAthis Web app로 변경하겠습니다. (죄송합니다. 이 앱은 일본어로 작성되었지만 내용은 중요하지 않습니다. 걱정하지 마십시오.)

(병합된 PR은 here )

빈 매니페스트 파일에서 만들기

자, 빈 구성 파일을 준비합시다.

{}

이것을 HTML로 로드합니다.

<link rel="manifest" href="manifest.json" />

그런 다음 응용 프로그램을 엽니다. 이 경고가 표시됩니다.



경고는 ...

매니페스트 시작 URL이 유효하지 않음

매니페스트에 name 또는 short_name 필드가 포함되지 않음

매니페스트 표시 속성은 독립 실행형 전체 화면 또는 최소 UI 중 하나여야 합니다.

매니페스트에 적합한 아이콘이 포함되어 있지 않습니다. 최소 144px의 PNG, SVG 또는 WebP 형식이 필요하고, 크기 속성을 설정해야 하며, 목적 속성(설정된 경우)은 any 또는 maskable을 포함해야 합니다.

일치하는 서비스 작업자가 감지되지 않았습니다. 페이지를 다시 로드하거나 현재 페이지의 서비스 워커 범위가 매니페스트의 범위 및 시작 URL을 포함하는지 확인해야 할 수 있습니다.

제공된 아이콘이 PNG, SVG 또는 WebP 형식에서 최소 144px 정사각형이 아닙니다

.

구성하자

시작 URL 설정

{
  "start_url": "https://birthstone.web.app/",
}

이름 설정

{
  "start_url": "https://birthstone.web.app/",
  "name": "birthstone"
}

표시 속성을 설정합니다.

{
  "start_url": "https://birthstone.web.app/",
  "name": "birthstone", 
  "display": "standalone"
}

아이콘 속성을 설정하고 이미지를 준비합니다.

{
  "start_url": "https://birthstone.web.app/",
  "name": "birthstone", 
  "display": "standalone",
  "icons": [
      {
        "src": "/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
   ]
}

서비스 워커를 준비합니다.

<!-- index.html -->
<script>
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker
      .register("sw.js")
      .then(function (registration) {
        console.log("success load");
      })
      .catch(function (err) {
        console.log(err);
      });
   }
</script>

// @sw.js
self.addEventListener("fetch", function (event) {});

그리고 배포...

완전히 앱을 받으세요.



(죄송합니다. 일본어입니다. 의미는 "설치 여부를 선택하십시오"입니다.)

요약

개발자 도구를 확인하십시오. 당신이해야 할 일은 응용 프로그램 탭에 작성됩니다.

manifest.json, sw.js를 작성하고 index.html에 로드합니다.