그냥 개발자 블로그

모바일 사이트로 앱 만들기 본문

IT소식&팁

모바일 사이트로 앱 만들기

마음이파파 2019. 5. 8. 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. 워크식스

저작자표시 비영리 변경금지

'IT소식&팁' 카테고리의 다른 글

무료 아이폰 목업 파일 공유  (0) 2019.05.20
가비아 개인 정보 유출  (0) 2019.05.16
웹에이전시보다 프리랜서가 인건비가 비싼 이유  (0) 2019.05.01
프리랜서 디자이너 추천 사이트 - SAVEADESIGN  (0) 2019.04.30
맥에서 USB 저장장치 완전 초기화  (0) 2019.04.13
'IT소식&팁' Related Articles more