프로그레시브 웹 앱이란 무엇입니까?

"프로그레시브 웹 앱"(PWA)은 웹 사이트 구축에 대한 새로운 철학의 일반적인 용어이자 세 가지 명시적이고 테스트 가능한 기본 요구 사항 집합이 설정된 특정 용어입니다.

일반적인 용어로 PWA 접근 방식은 다음과 같은 속성 집합 을 충족하기 위해 노력하는 것이 특징 입니다 .

반응 형

독립적 인 연결

앱과 유사한 상호 작용

신선한

안전한

발견 가능

재 참여 가능

설치 가능

연결 가능

특정 용어로 웹 사이트는 PWA 자격을 얻기 위해 다음 세 가지 기준 기준 에 따라 테스트 할 수 있습니다 .

HTTPS에서 실행되어야합니다.

웹 앱 매니페스트를 포함해야합니다.

서비스 워커를 구현해야합니다.

PWA는 웹을 통해 제공되는 앱입니다 (스토어를 통해 패키징 및 배포되는 기본 앱과 반대).

요새 대세(?)인 PWA(Progressive Web App)을 100% 충족해서 만들어보았습니다.

처음부터 만들면 엄청 고생하겠지만, Gatsby에서는 플러그인이 있어서 쉽게 만들 수 있네요. ㅎㅎ

프로그레시브 웹 앱을 만들면... 서버가 없어져도(Offline)에서도 그대로 볼 수 있습니다.

정적파일들의 모음이기 때문에 가능한 것 같습니다. ㅎㅎ

컴퓨터에 홈페이지를 설치(?) 할 수 있습니다. 큰 의미는 없겠지만요.

블로그는 링크1에 있고

테스트하는 방법은 링크2를 클릭하여 크롬 플러그인을 설치하면 볼 수 있어요!

---

Gatsby에서는 플러그인 2개만 설치하면 됩니다.

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Woosung Blog`,
        short_name: `Woosung`,
        description: `Gatsby js로 만든 우성짱의 블로그입니다. 많은 정보를 나누고 싶습니다.`,
        start_url: `/`,
        icon: `content/assets/favicon.png`,
        display: `standalone`,
        lang: 'ko',
        theme_color: `#ffffff`,
        background_color: `#f8f8f8`,
      },

위와 같이 manifest 플러그인과

    {
      resolve: 'gatsby-plugin-offline',
      options: {
         workboxConfig: {
            globPatterns: ['**/favicon*']
         }
      }
   }

위와 같이 offline 플러그인만 있으면 됩니다.

참 쉽죠?

그런데 크롬에서는

        icon_options: {
          purpose: `maskable`,
        },

이거 넣으니깐 설치버튼이 안뜨네요. 방식을 조금 다르게 해야할 듯 합니다.

어쩔 수 없이 maskabe를 뺐어요.