GameWith Advent Calendar 2018

이 기사는 GameWith Advent Calendar 2018의 18 일째입니다!

소개

스스로 만든 사이트에 공부를 겸해 Add to homescreen을 구현했습니다.

Android 또는 Windows에서 최신 Chrome이라면 이 방법으로 데스크톱에 추가할 수 있습니다.

htps //w w. 호 ly p ぁ세 p p. 코m/ 에 액세스하고 오른쪽의 세 점 리더에서 "Holy Place Photo"설치 중"을 클릭하십시오.



배너가 표시되므로 [설치]를 클릭합니다.



클릭하면 브라우저가 아닌 단독 응용 프로그램으로 Holy Place Photo가 시작됩니다.



단독의 어플리케이션이므로 데스크탑에 아이콘을 할 수 있어 태스크 바에도 표시됩니다.



또한 Chrome의 앱 목록에도 표시됩니다.



삭제할 때 Chrome의 앱 목록에서 마우스 오른쪽 버튼을 클릭하고 'Chrome에서 삭제...'를 클릭하여 삭제할 수 있습니다.

구현

manifest.json

우선 Add to homescreen의 간인 manifest.json.

public 바로 아래에 있습니다.

또한 auncher-144x144.png와 launcher-512x512.png도 public 바로 아래에 있습니다.

manifest.json

{
  "short_name": "HPP",
  "name": "Holy Place Photo",
  "icons": [
    {
      "src": "launcher-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "launcher-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "background_color": "#fff",
  "theme_color": "#e1e4e8",
  "orientation": "portrait",
  "start_url": "/",
  "display": "standalone"
}

HTML

만든 manifest.json은 link 태그로 로드됩니다.

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

서비스 워커

fetch를 쓰지 않으면 움직이지 않는 것 같습니다 (하늘에서 좋다)

public 바로 아래에 놓습니다.

sw.js

self.addEventListener('install', (e) => {
  console.log('ServiceWorker install')
});

self.addEventListener('fetch', (e) => {
});

자바스크립트

위에서 작성된 sw.js를 읽는 중입니다.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then( (registration) => {
    // 登録成功
    console.log('ServiceWorker registration successful with scope: ', registration.scope);
  }).catch((err) => {
    // 登録失敗 :(
    console.log('ServiceWorker registration failed: ', err);
  });
}

디버깅

Chrome이라면 개발자 도구의 Application Manifest 'Add to homescreen'에서 테스트 할 수 있습니다.

※단, localhost or https로 액세스하고 있을 때만

결론

Copipe로 쉽게 구현할 수 있지만 데스크톱 애플리케이션이 되었기 때문에 단점도 있습니다 (단일 애플리케이션으로 이동하므로 검색하고 싶을 때 Chrome으로 전환 등)

HTML5에서의 세션에서도, 제품에는 UIUX 설계를 하고 나서 넣어야 한다고 대화되고 있었습니다.

그래도 새로운 기술을 사용하고 싶은 기분도 알 수 있다

다음은 오프라인 캐시 구현해 보려고합니다!