React-PWA-Install

React 프로젝트에 PWA를 적용하던 중 Android나 웹에서는 PWA가 적용이 되지만 IOS에서는 적용이 안된다는 한계점이 있었고,

모바일로 봤을 때 설정을 들어가서 설치를 해야 한다는 번거로움이 있어

react-pwa-install 라이브러리를 사용해서 사용자가 설치 유무를 빠르고 쉽게 선택 할  수 있도록 적용 해보았다.

react-pwa-install

---

  [ React-Pwa-Install이란? ]  

 

PWA 설치(홈 화면에 추가라고도 함)는 브라우저마다 다르게 처리 되기 때문에 사용자에게 이 옵션을 편리하게 제공하기가 다소 어렵습니다. 현재 Chrome, Edge 및 Samsung 인터넷만 기본적으로 BeforeInstallPrompt Event를 사용하여 이 기능을 지원합니다. IOS, Fire Fox, Opera 모바일에서 사용자는 홈 화면에 앱을 설치하기 위해 몇가지 수동 단계를 수행 해야 합니다. 이 옵션이 존재한다는 사실 조차 아는 사람이 거의 없어 접근성이 안좋습니다.

BeforeInstallPrompt Event

---

  [ 역할 ]  

해당 패키지는 prompt가 사용자에게 표시되는 시기와 방법 또는 빈도 측면에서 많은 노력을 기울이지 않으면서 여러 플랫폼에서 앱에 사용자 지정 PWA 설치 기능을 추가하는 간단한 방법을 제공합니다. 이는 애플리케이션에 따라 다르며 개발자가 정의 해야 합니다.

 

• 사용자가 기본 BeforeInstallPrompt Event를 지원하는 브라우저에서 PWA를 방문하는 경우 이 방법이 설치에 사용 됩니다. (현재 : Chrome - 모바일 및 데스크톱, Edge - 모바일, 삼성 인터넷 )
• 사용자가 "수동 설치"를 지원하는 브라우저에서 PWA를 방문하는 경우 지침이 표시 됩니다.
  (현재 iOS 기기, FireFox - 모바일, Opera - 모바일)

  ---

  [ 설치 ]  

 

패키지를 사용하려면 @material-ui/core도 함께 설치 해야 합니다.

$ npm i --save react-pwa-install @material-ui/core

---

  [ 사용 방법 ]  

1. import ReactPWAInstallProvider and UseReactPWAInstall
2. ReactPWAInstallProvider로 앱을 감쌉니다.
3. useReactPWAInstall에 supported 및 isInstalled 기능을 사용하여 설치 버튼을 표시 할 지 여부를 결정 합니다.
   supported는 PWA를 지원하는 브라우저인 지 유무를 boolean 값으로 반환 해줍니다. isIntalled는 사용자의 모바일이나 웹에 사이트가 설치 되어 있는 지 유무를 boolean 값으로 반환 해줍니다. isInstalled는 일반적으로 true를 반환하고 false를 반환하는 경우에만 표시 되어야 합니다.
4. 사용자가 설치 버튼을 클릭하면 pwaInstall을 호출 합니다.
   여기서 거부를 누를 경우 특정 기간 동안 또는 새로 접속 할 때까지 사용자에게 다시 메세지를 표시 하지 않을 수 있습니다. 수락을 누를 경우 PWA 설치 팝업이 호출 됩니다.

import React from "react";
import ReactDOM from "react-dom";
import ReactPWAInstallProvider, { useReactPWAInstall } from "react-pwa-install";
import myLogo from "img/logo.png";
 
function App() {
  const { pwaInstall, supported, isInstalled } = useReactPWAInstall();
 
  const handleClick = () => {
    pwaInstall({
      title: "Install Web App",
      logo: myLogo,
      features: (
        <ul>
          <li>Cool feature 1</li>
          <li>Cool feature 2</li>
          <li>Even cooler feature</li>
          <li>Works offline</li>
        </ul>
      ),
      description: "This is a very good app that does a lot of useful stuff. ",
    })
      .then(() => alert("App installed successfully or instructions for install shown"))
      .catch(() => alert("User opted out from installing"));
  };
 
  return (
    <div>
      {supported() && !isInstalled() && (
        <button type="button" onClick={handleClick}>
          Install App
        </button>
      )}
    </div>
  );
}
 
ReactDOM.render(
  <ReactPWAInstallProvider enableLogging>
    <App />
  </ReactPWAInstallProvider>,
  document.querySelector("#root")
);

---

  [ 적용 ]