ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 모바일 사이트로 앱 만들기
    IT소식&팁 2019.05.08 09:28

    구글에서는 다양한 연구를 시도하고 있습니다. 그 중에 하나가 모바일 사이트를 앱으로 쉽게 만드는 것 입니다. 이 것은 연구 단계임에도 많은 웹 사이트들이 사용하고 있습니다.

     

     

     

     

     

     

    1. 테스트 페이지 만들기

    테스트 모바일 사이트가 될 index.html 을 만듭니다.

    <html>
    <head>
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <h1>Hello World.</h1>
        <p>This is work6 lab.</p>
    </body>
    </html>

     

     

     

     

     

     

    2. 매니페스트 파일 만들기


    manifest.json 은 표시되는 방식을 제어하는 기능을 제공하는 JSON 파일입니다. 

    {
      "name": "Hello World",
      "short_name": "Hello World",
      "icons": [{
        "src": "/img/icon-128x128.png",
          "sizes": "128x128",
          "type": "image/png"
        },{
          "src": "/img/icon-152x152.png",
            "sizes": "152x152",
            "type": "image/png"
          },{
            "src": "/img/icon-192x192.png",
              "sizes": "192x192",
              "type": "image/png"
            }],
      "start_url": "/",
      "display": "standalone",
      "background_color": "#3E4EB8",
      "theme_color": "#2F3BA2"
    }

     

     

     

     

     

     

    3. 매니페스트 링크 추가

    매니페스트 링크를 추가합니다.

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

     

     

     

     

     

     

    4. iOS 메타 태그 및 아이콘 추가

    메니페스트는 iOS에서 지원되지 않습니다. 그래서 메타 태그를 별도로 추가해 줘야 합니다.

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Hello World">
    <link rel="apple-touch-icon" href="/img/icon-152x152.png">

     

     

     

     

     

     

     

    5. SEO


    구글 검색에서 검색될 수 있도록 SEO 최적화를 위해 Description 을 추가합니다.

    <meta name="description" content="This is Work6 lab">

     

     

     

     

     

     

    6. 주소 표시줄 꾸미기


    브라우저 주소창에 색상을 모바일 사이트 컬러와 일치 시키면 방문자에게 더 몰입감을 줄 수 있습니다.

    <meta name="theme-color" content="#2F3BA2" />

     

     

     

     

     

     

    7. 서비스 워커 등록


    서비스 워커는 백그라운드에서 동작하는 스크립트로 다양한 기능을 제공합니다.

    <script>
            if ('serviceWorker' in navigator) {
                window.addEventListener('load', () => {
                    navigator.serviceWorker.register('/service-worker.js')
                        .then((reg) => {
                          console.log('Service worker registered.', reg);
                        }).catch(function(error) {
                            console.log('ServiceWorker registration failed:', errror);
                          });
                });
            }
    </script>

     

     

     

     

     

     

    8. 서비스 워크 파일 만들기


    /service-worker.js 파일을 만듭니다. 이 파일은 이벤트를 감지하는 일을 하지만, 여기선 사용되지 않음으로 자세히 다루지 않겠습니다.

    self.addEventListener('install', function(evt) {});
    self.addEventListener('fetch', function(evt) {});

     

     

     

     

     

     

    9. 테스트


    모바일을 통해서 'https://모바일 사이트 주소'로 접속해서 앱 설치 질문이 뜨는지 확인합니다.

     

     

     

     

     

     

    10. Done

     

     

     

     

     

     

     

     

    copyright ⓒ 2019. 워크식스

    댓글 0

work6.kr