Search results for 'HTML5_JS_CSS'

Page Visibility API

2018.03.16 00:08

파일이 변경되면 리로드를 해주는 작은 프로그램들이 많이 있는데, 이런 프로그램을 쓰지 않고 브라우저가 활성화되면 발생하는 이벤트가 없을지 찾다가 Page Visibility API를 발견했다. 설명은 이곳에서 확인할 수 있다.


결론부터 말하면 기대한 것과는 다르게 동작해서 쓰지 않기로 했다. 기대했던 것은 다른 앱을 사용하다가 브라우저를 활성화시켰을 때 리로드되는 것이었는데, 이 API를 사용하면 다른 앱을 쓰다가 브라우저로 이동해도 이벤트가 발생하지 않는다. 대신 다른 브라우저의 다른 탭을 사용하다가 돌아오면 이벤트가 발생한다.


테스트한 코드는 다음과 같다.


document.addEventListener("visibilitychange", () => {

    console.log(document.visibilityState);

});



nundefined HTML5_JS_CSS page visibility api

인스타그램 크롤러 만들기

2016.09.10 01:32

얼마전에 전자액자를 하나 샀습니다. 더운 여름에 기분전환을 해볼까 싶어 구매했는데 날이 다 시원해지고서야 제 손에 들어왔네요. 처음에는 직접 찍은 사진도 올려보고, 괜찮은 그림도 올려봤지만 오래지 않아 귀차니즘이 찾아오더군요. 결국 매일 업데이트되는 인스타그램 피드에 있는 사진을 보여주고 싶어졌습니다. 사진의 품질도 나쁘지 않을 뿐더러 누군가가 업데이트까지 해주니 바로 이거다 싶었습니다.


인스타그램에서는 API를 제공하고 있어 API를 사용할까 찾아보니, 저에게 필요한 피드 정보를 얻을 수 있는 API는 작년에 중단됐더군요. 이런 날벼락이. 어렴풋이 작년에 인스타그램이 피드 API를 중단해서 인스타그램 클론이 나오기 힘들게 됐다는 기사가 기억났습니다. 이런건 찾아보기 전에 기억날 것이지. 그래서 결국 웹페이지를 크롤링하기로 했습니다.


# 크롤러 만들기


웹페이지를 크롤링하기 위해 PhantomJS, CasperJS, SpookyJS를 사용했습니다. 간단히 설명하면 PhantomJS는 webkit 기반의 headless browser, CasperJS는 PhantomJS를 사용하여 페이지를 이동할 때 편리하게 사용할 수 있는 기능을 제공합니다. 문제는 이 두 프로그램이 node와는 관계 없이 동작하는 프로그램이라는 점입니다. SpookyJS는 node와 관계 없이 동작하는 PhantomJS/CasperJS를 node에서 컨트롤 할 수 있게 해주는 프로그램입니다. 만약 node의 기능을 사용하지 않는다면 CasperJS만으로 충분하겠지만, 저는 크롤링한 데이터를 DB에 저장할 생각이었으므로 node가 꼭 필요했습니다.


처음에는 SpookyJS를 바로 사용해서 바로 프로그램을 작성했다가 SpookyJS가 동작하는 방식을 제대로 알지 못하는 바람에 이전에 사용해본 경험이 있던 CasperJS를 기반으로 프로그램을 만든 후, 이 프로그램을 SpookyJS를 이용해서 동작하도록 수정했습니다. 간단히 정리하면 casper.xxx()로 실행되는 함수를 spooky.xxx()정도로 변환하는 정도면 큰 수정 없이 코드를 재사용할 수 있습니다. 같은 파일 내에 있지만 일반적인 JavaScript 코드와는 context가 다른 어려움이 있는데, 이는 문서를 살펴보시는 편이 가장 나을 것입니다. 사실, 이 부분을 잘 이해하는 것이 SpookyJS를 잘 사용하는 지름길입니다. 저는 프로그램을 최대한 간단히 작성하고자 했기에 크게 문제가 되는 부분은 없었습니다.


프로그램을 작성하면서 처음에 어려움을 겪었던 부분은 인스타그램이 ReactJS로 되어 있어 1. 특정 엘리먼트가 생성될 때까지 실행을 지연시켜야 했던 점과 2. 사람에게 불친절한 selector의 사용으로 특정한 엘리먼트를 찾을 때 한 번 더 생각을 했던 점 그리고 3. 폼에 값을 입력하는 부분이었습니다. 1번의 경우 CasperJS에서 제공하는 waitFor 함수를 사용했고, 2번의 경우에는 id나 class selector를 사용하지 못하고 element selector와 *-child selector를 사용하여 해결했습니다. 3번의 경우에는 ReactJS의 특성상 input element에 바로 값을 설정해도 ReactJS내부의 변수에 값이 정상적으로 설정되지 않는 문제... 라고 생각했습니다만 제 오해였습니다. PhantomJS를 사용하면 문제가 발생하지만 CasperJS에서는 그런 것 없습니다. sendKeys와 click 함수가 모든 문제를 해결해줍니다.


인스타그램은 화면의 최하단까지 스크롤할 경우 자동으로 다음 페이지의 내용을 불러옵니다. CasperJS에서 제공하는 함수를 쓰면 화면 최하단까지 이동하는 것은 어렵지 않습니다. 문제는 그 후에 값을 다시 불러오는 부분이었습니다. 이 부분은 조건에 따라 다음 페이지의 내용을 불러올 때까지 기다렸다가 더 불러올 글이 있는지 확인하고 다시 다음 페이지를 불러야 하는 기능입니다. 그런데 이 부분을 만들면서 보니 CasperJS의 동작을 동적으로 추가하는 것이 다소 어렵게 느껴져 구현하지 않았습니다. 자세히 살펴보지 않았지만 추측하건데 처음 SpookyJS가 동작하면서 CasperJS와 연동되어 돌아가는 작업의 개수를 실행 전에 결정하는 것이 아닌가 합니다. 디버그 메시지를 보니 이런 의심이 들더군요. 위에서도 적은 것처럼 '최대한 간단히'가 목표 중에 하나였으므로 과감히 패스했습니다. 그리고 이 문제는 스크립트를 계획보다 짧은 간격으로 실행시키는 방식으로 해결했습니다.


나머지는 node에서 DB에 값을 넣는 부분으로 크게 어려운 문제는 없었습니다. 여기서도 property 이름을 잘못 적는 바람에 삽질은 면하지 못했습니다만.


# 자동으로 실행시키기


프로그램을 만든 후 주기적으로 프로그램을 실행시키는 방법으로 처음에는 crontab을 사용하는 것을 고려했습니다. 그런데 node의 exec 함수를 테스트해보니 간단하게 프로그램을 동작시킬 수 있겠더군요. 그래서 exec 함수와 setInterval 함수를 사용하여 일정 시간마다 크롤링을 하도록 만들었습니다.


exec를 사용하지 않고 함수를 호출하여 SpookyJS 코드를 실행시키는 방법을 잠시 생각하기도 했었는데 a. 이미 작성한 코드를 변경할 필요가 없고, b. a로 인해 테스트를 하지 않아도 되서 exec를 사용하는 방법으로 적용해버렸습니다. 일단 주기적으로 프로그램을 실행시키는데는 문제가 없어보입니다.


# 만들고 나니


프로그램은 주기적으로 잘 실행됩니다. 그런데 이제보니 인스타그램의 피드에 노출되는 사진이 시간 순서가 아니군요. 지금은 중복 데이터를 걸러내기 위해 마지막으로 저장한 사진보다 최신의 사진만 DB에 저장하고 있는데, 종종 과거의 사진이 최신 사진보다 위에 노출되는 경우가 있습니다. 이 경우에는 과거의 사진을 빠트리게 되는군요. 아무래도 중복된 사진을 걸러내는 방법을 바꿔야 할 것 같습니다. 오늘은 늦었으니 이건 다음 시간에.

nundefined HTML5_JS_CSS casperjs, headless browser, instagram, node, phantomjs, react, reactjs, spookyjs, 인스타그램

  1. Blog Icon

    비밀댓글입니다

  2. Blog Icon

    비밀댓글입니다

  3. Blog Icon
    dlqm1681

    안녕하세요, 최근 Casperjs로 크롤링을 처음으로 공부하고 있는데, 인스타그램에서 로그인조차 성공하지 못해서 글 올립니다.ㅠ F12를 눌러서 나오는 클래스명들로 클릭하려고 해도 반응조차 없어서 혹시 어떤 방법을 사용하셨는지 문의드려도 될까요?

  4. 제가 사용한 방법은 다음과 같습니다.

    1. document.querySelectorAll('input').length > 1 을 사용하여 실제 input element가 렌더링 됐는지 확인
    2. sendKeys를 사용하여 id, password 입력
    3. click('form button')으로 버튼 클릭

    그리고 인스타그램의 로그인 과정 중에 http status code가 302가 내려오는 것으로 기억하는데요, 이 경우 casperjs에서 제대로 처리를 못합니다. 그래서 정상적으로 로그인됐는지 여부는 document.title의 값을 확인했습니다.

    도움이 되면 좋겠네요~

  5. Blog Icon
    dlqm1681

    정말 감사합니닷^^ 덕분에 로그인하고 캡쳐 성공했습니다.
    좋은 정보 포스팅해주셔서 감사하고 댓글로 친절하게 알려주셔서 감사합니다.:D

  6. Blog Icon
    zel

    안녕하세요. 인스타그램 클롤러를 만드려고 하는데 쉽지않어서 검색하다가 댓 남겨봅니다..

    우선 api를 사용하고 계신지 궁금합니다. 계속 심사에서 실패하고있어서...

    두번째로 PhantomJS, CasperJS, SpookyJS에 대해서 잘모르는데요 자바로도 가능할지 궁금합니다.
    javafx의 webview로 instagram 로그인 하고 스크롤링 할 수 있도록 javafx 함수공부중입니다..

    세번째로 댓글을보니 로그인 후 크롤링이 가능한것 같은데 이게 api를 사용하는건지도 잘모르겠어서요..

    그리고 혹시 샘플소스를 얻을 수 있는지도 궁금합니다..

  7. 1. 인스타그램의 API는 피드 api를 제공해주지 않고 있어 직접 인스타그램 홈페이지를 headless browser를 사용하여 크롤링 후 수집하고 있습니다. (웹브라우저로 보는 것을 자동화했다고 생각하시면 됩니다.) 그리고 개인적인 용도로만 사용하고 있어 별도의 심사를 받지는 않았습니다.

    2. Java는 잘 모르겠습니다만 headless browser로 검색해보시면 도움을 얻으실 수 있지 않을까 합니다.

    3. 로그인 및 크롤링 모두 api를 사용하지 않고 headless browser를 이용하여 작업했으므로 api와는 무관합니다.

    4. 샘플코드는 http://stackoverflow.com/questions/32330264/how-to-login-in-instagram-using-casperjs 를 참고하시면 도움이 될 것 같습니다. 제가 이 페이지의 코드를 많이 참고했습니다.

  8. Blog Icon
    zel

    아 친절한 답변감사합니다.

    알려주신 링크 참조해서 공부해보겠습니다 감사합니다.

  9. Blog Icon
    poeki

    안녕하세요.

    혹시 넥사크로나 마이플랫폼, 엑스플랫폼 같은 플랫폼을 이용한 화면에서도 이용가능할까요??

    이런 플랫폼을 쓰는 화면에서는 input태그 대신 edit, button같은 패키지 고유의 태그를 사용해서.. document.querySelectorAll('input') 이런 형식으로 쓰면 안먹히는것 같더라구요. 단순히 input을 edit로 바꿔도 소용이 없고..

    혹시 도움받을 수 있을까 해서 여쭤봅니다.

    감사합니다.

  10. 안녕하세요.

    말씀해주신 플랫폼을 사용한 적이 없어서 저도 잘 모르겠습니다. 잠깐 엑스플랫폼을 검색해보니 ActiveX를 기반으로 하는 솔루션으로 보이는데요, ActiveX 기반으로 동작한다면 위 방법은 사용할 수 없습니다.

    위 방법은 순수한 HTML으로 구성된 페이지에서만 동작하도록 되어 있습니다.

  11. Blog Icon

    비밀댓글입니다

  12. Blog Icon

    비밀댓글입니다

  13. Blog Icon

    비밀댓글입니다

  14. Blog Icon

    비밀댓글입니다

  15. 어떤 데이터가 필요하신지는 모르겠지만, 인스타그램 api를 사용하여 데이터를 확보하는 방법을 먼저 고려해보시면 어떨까 합니다. https://www.instagram.com/developer/

    "python 인스타그램 크롤링", "python 크롤링" 등의 키워드로 검색해보시면 관련 정보를 많이 찾으실 수 있을 것 같습니다. python용 인스타그램 프로그램도 있는 것 같으니 이를 참고해보셔도 좋을 것 같습니다.

    http://www.yes24.com/24/Goods/33469160?Acode=101 이런 책도 있으니 아직 안보셨으면 이 책도 참고해보시면 어떨까요.

  16. Blog Icon

    비밀댓글입니다

  17. 안녕하세요.

    DB를 하신적이 없다고 하시니 어디서부터 말씀드려야 할지 모르겠습니다. Stackoverflow를 많이 검색해보시길 추천합니다.

    죄송하지만 제 소스코드는 제공해드리지 않습니다. https://stackoverflow.com/questions/31128011/casperjs-and-inserting-data-into-a-database-when-spidering 이 페이지를 참고해보시면 어떨까 합니다. 제 코드도 대략 이런 수준으로 작성되어 있습니다.

What's new in Chrome DevTools? by Addy Osmani 간단 정리

2015.10.06 01:31

지난 9월 16~17일간 토론토에서 열렸던 WEB UNLEASHED 2015에서 Addy Osmani가 발표한 What's new in Chrome DevTools?를 간단하게 요약했다. 발표자료동영상이 각각 제공되고 있으니 관심있는 분은 꼭 원본 자료를 살펴보기 바란다. 발표자료보다 동영상에서 확인할 수 있는 내용이 많으므로 자료를 살펴볼 결심을 했다면 동영상을 볼 것을 추천한다.


DevTools 공통

- DevTools 상단의 메뉴탭의 위치를 drag & drop으로 변경 가능

- Console에서 다양한 syntax highlighting 지원


Network Panel

> Filmstrip 지원

 - 시간별로 스크린샷을 기록.

 - 실제 화면에 렌더링되는 내용을 알 수 있음.

> Throttling

 - 브라우저에서 네트워크 속도를 조절할 수 있음.

 - 이미 정해져 있는 속도 중에서 선택하거나 임의로 조건을 지정할 수 있음.

> Block Request

 - 특정 요청을 보내지 않도록 막을 수 있음.

 - 특정한 요청으로 인해 속도가 느려지는 것으로 의심된다면 해당 요청만 막은 후 테스트 가능.


Timeline

> long frame times

 - 붉은 삼각형은 jank가 존재하는 것을 나타냄

 - Jank: 16ms(실제로는 10ms)내에 화면이 갱신되지 못해 프레임 속도가 떨어지는 현상

> Filmstrip

 - 메뉴의 Screenshots를 선택

 - 애니메이션과 같이 화면에 그려지는 내용을 확인할 수 있음

 - 타임라인의 특정 위치를 선택하면 해당 시간에서 화면에 그려지는 내용을 알 수 있음

> Aggregated Details

 - 실행 비용이 가장 높은 코드를 쉽게 볼 수 있음

 - URL을 기준으로 모아볼 수 있음

> Paint Profiler

 - 메뉴의 Paint 선택

 - 페인트된 내용, 그리는데 걸리는 시간, 페인트에 대한 상세한 내용을 알 수 있음.


Elements Panel

> Animation Inspection

 - about:flags에서 기능을 활성화해야 사용 가능

 - Elements > Styles > Toggle Animation controls

 - playback 속도, 실행 시간등을 간단히 변경하면서 테스트 가능

> Cubic Bezier Editor

 - transition이 적용된 엘리먼트에서 직접 값을 변경해가며 테스트 가능

> DOM Animation Changes

 - Class 변경으로 애니메이션이 이루어질 때 변경이 발생하는 dom에 대한 하이라이트 지원

> Colors & Pallettes

 - Eye Dropper로 페이지상의 색을 바로 선택 가능

 - 페이지에서 사용중인 Color pallettes 지원

 - Matirial Design palette 지원

 - Custom palette 지원

> Search selectors

 - ctrl+f 후 셀렉터를 입력해서 element를 찾을 수 있음

> Event Listeners

 - 임의의 Dom에 등록된 이벤트 리스너를 확인할 수 있음

 - Framework를 사용하여 등록된 이벤트 리스너도 확인 가능

> HTML in Console

 - console에서 html element를 바로 수정할 수 있으며 화면에도 반영됨


Console

> tips

 - $0: 마지막으로 선택한 dom node

 - $$('header'): query selector의 alias

 - copy(): clipboard로 복사

 - inspect(): 코드로 특정한 코드를 선택하여 inspect할 수 있음

 - console.timeStamp: timeline에 라벨을 붙일 수 있음


Sources

> inline variables

 - 디버깅 중에 변수의 값을 인라인으로 표시

> Proactive Compilation

 - 컴파일러처럼 오류가 있을 경우 바로 표시

> Blackboxing JS libraries

 - 특정한 파일을 블랙박스 처리하여 해당 파일은 디버깅 과정에서 건너뛸 수 있음

> ES2015 Promises Inspector

 - about:flags에서 기능을 활성화해야 사용 가능

 - promise의 다양한 정보를 제공하여 디버깅을 편리하게 만듬

 - Async모드: 비동기적으로 실행되는 경우에도 call stack을 정상적으로 보여줌


이 외에도 계속 기능을 추가하고 있음



여기에서는 요약하지 않았지만 발표자료 초반에 RAIL에 대한 언급이 있다. 크롬팀에서는 Performance에 대해 지속적으로 RAIL 모델을 사용하고 있으므로 성능 개선에 대한 이해를 높이기 위해서는 RAIL 모델에 대해 이해를 하고 있는 것이 큰 도움이 될 것이다.

Devtools에 대한 세션 말고도 IE6 sucks!를 외치던 더글러스 크록포드 아저씨가 발표한 Upgrading the Web을 비롯하여 다양한 세션의 동영상이 유튜브에 업로드되어 있으니 다른 주제들도 살펴보기 바란다.


nundefined HTML5_JS_CSS Chrome, devtools, Rail, 개발자도구, 크롬

  1. Blog Icon

    비밀댓글입니다

  2. 크롬팀에서 설명하는 내용들은 대체로 개발 버전인 크롬 카나리에서 실행되는 경우가 많습니다. 카나리 버전을 한 번 사용해보시면 어떨까요? https://www.google.co.kr/chrome/browser/canary.html 이 페이지에서 다운로드 하실 수 있습니다.

Performance Guide RAIL 요약

2015.07.15 00:48

지난 5월 초 라스베가스에서 열렸던 LoopConf의 세션 중 Performance Guide RAIL를 요약했다. 동영상은 여기서 볼 수 있다.



Performance

- Performance는 성공적으로 실행되는 방법의 관점에서 살펴보는 행동, 작업, 활동이다.

- 성공의 의미: 성공이란 인간 두뇌의 지각 반응이 기대하는 바를 충족시키는 것이며, 사용자에게 초점을 맞추면 다른 것들은 따라온다는 것


RAIL 성능 모델 - Response, Animation, Idle, Load


Response

- 목적: 즉각적이라고 느끼도록 100ms 내에 반응

- 반응 속도에 따른 느낌을 알 수 있는 비디오: https://www.youtube.com/watch?v=vOvQCPLkPt4 (Applied Sciences Group: High Performance Touch on YouTube)


Animation

- 목적: 16ms 마다 프레임을 갱신

- 일정한 속도를 내는 쪽이 좋은 성능을 낸다고 받아들이게 된다.

- 따라서 0.5초 동안 아무것도 안하고 나머지 0.5초 동안 16ms마다 그리는 것보다 32ms마다 지속적으로 그리는 것이 사용자에게는 더 좋다.


Idle

- 목적: 가능한 긴 유휴시간을 확보

- 100ms 이내에 즉각적으로 반응하려면 100ms보다 짧은 시간마다 메인 쓰레드가 실행될 수 있도록 해야 한다. 따라서 유휴시간은 길 수록 좋다.


Load

- 목적: 사용자가 계속 집중할 수 있도록 1000ms 이내에 인터랙티브한 내용을 노출

- 1000ms (=1s) 내에 모든 내용을 보여줘야 한다는 의미는 아님. 일부라도 노출되어야 한다.


기타

서버와 통신하는 작업동안 긴 시간을 기다려야 하므로 이 시간에 트랜지션을 이용하여 사용자에게 즉각 반응하는 모습을 보여주는 것은 좋다. 그러나 트랜지션에는 수백 ms의 긴 시간이 걸리므로 주의해야 한다.


참고자료

- 슬라이드: bit.ly/perf-rails

- https://paulbakaus.com/tutorials/performance/the-illusion-of-motion/

- speed, performance and human perception

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

- Platform Success Model Explainer : chrome, blink가 performance에 대해 생각하는 내용을 알 수 있음




nundefined HTML5_JS_CSS Animation, Chrome, Google, IDLE, load, Performance, Rail, response, 구글, 성능, 크롬

Manifest for web application 요약

2015.02.14 15:39

Manifest for web application을 사용할 일이 있어 스펙을 살펴보며 간단히 정리했다. 이 스펙은 web application을 브라우저가 아닌 곳에서 실행시킬 때 기기에서 표시할 정보와 실행에 필요한 정보를 저장하는 방법에 대해 정의하고 있다. 모바일 사이트나 web os등 이 스펙이 사용되는 곳은 심심치 않게 있겠지만 일반 사용자에게는 거의 눈에 띄지 않는 스펙이기도 하다.


개인적인 필요로 http://w3c.github.io/manifest/ 문서를 한 번 살펴보면서 정리한 것이므로 개인적으로 불필요하다고 생각하는 부분은 정리하지 않았고 문서의 품질을 높이기 위해 리뷰를 하지 않았으므로 내용이 누락되어 있거나 오역이 있을 가능성이 높다. 그러므로 이 문서를 참고할 분들은 적용 전에 반드시 원본 문서를 참고하면 좋겠다.


===


Manifest for web application

Editor’s Draft 

11 Feb 2015


http://w3c.github.io/manifest/


요약

이 스펙은 개발자들이 웹 애플리케이션의 메타 데이터를 집중해서 관리할 수 있는 JSON 기반의 선언 방법을 정의한다. 앱의 이름, 링크, 아이콘을 지정하는 일 외에도 시작할 때 열리게 되는 페이지 등을 지정할 수 있다. 웹 앱의 기본 화면 방향이나 표시 방법 (풀스크린과 같은) 을 설정할 수 있다. 또한 앱을 URL에 scope하도록 함으로써 웹 앱에서 다른 웹 앱으로 이동할 수 있는 딥 링크를 사용할 수 있는 방법을 제공한다.


메타데이터를 사용하면 user agent (이하 ua)는 개발자들에게 네이티브 앱처럼 동작하는 사용자 경험을 제공할 수 있는 방법을 제공한다.


또한 여기서는 manifest 링크 타입을 정의하며 이는 문서 내에서 manifest를 연결하는 선언 방법을 제공한다.


1. 사용 예


1.1 일반적인 manifest의 예

{

  "name": "Super Racer 2000",

  "short_name": "Racer2K",

  "icons": [{

        "src": "icon/lowres",

        "sizes": "64x64",

        "type": "image/webp"

      }, {

        "src": "icon/hd_small",

        "sizes": "64x64"

      }, {

        "src": "icon/hd_hi",

        "sizes": "128x128",

        "density": 2

      }],

  "scope": "/racer/",

  "start_url": "/racer/start.html",

  "display": "fullscreen",

  "orientation": "landscape"

}


1.2 link를 사용한 manifest의 연결

<!doctype>

<html>

<title>Store finder - search</title>


<!-- Startup configuration -->

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


<!-- Fallback application metadata for legacy browsers -->

<meta name="application-name" content="Store Finder">

<link rel="icon" sizes="16x16 32x32 48x48" href="lo_def.ico">

<link rel="icon" sizes="512x512" href="hi_def.png">


2, 설치할 수 있는 웹 앱

manifest의 값들은 top-level browsing context (application context)에서 유효하다. > see 6.3


2.1 설치 가능 표시

적절한 값이 지정된 manifest가 있다면 ua에서는 설치 가능하다고 판단할 수 있음

하지만 정확한 기준은 브라우저마다 다를 수 있음


3. navigation scope

manifest랄 적용했을 때 application context가 이동할 수 있는 URL을 표시한 것


scopeUrl이 지정되어 있지 않거나 targetUrl과 scopeUrl이 same origin이고 pathname이 scopeUrl의 pathname으로 시작하면 이동 가능.

navigation scope은 scope 값으로 지정. 지정하지 않으면 unbounded 상태. 모든 url로 이동 가능


3.1 고려해야 하는 보안 문제

unbounded이고 browser 모드가 아닌 경우 ua에서는 보안/프라이버시 문제가 발생하면 사용자에게 알려야 함


3.2 deep links

설치된 웹 앱의 범위 내에 있는 url


4. display mode

사용자에게 보여지게 될 모습을 지정

display mode를 지정하면 top-level browser context에서 기본 display mode가 됨

기본은 browser

browser를 제외하고는 fallback display mode가 있다.


fullscreen: ua chrome이 없고 화면 전체를 사용

standalone: native app처럼 보임

minimal-ui: fullscreen과 비슷하나 네비게이션을 컨트롤 할 수 있는 최소의 ui를 제공

browser: 플랫폼에서 지정된 ua사용


4.1 display-mode 기능

css에서 display-mode로 구별하여 css를 지정할 수 있따.

EcmaScript에서는 matchMedia()를 사용하여 값을 확인할 수 있다.


5. 리소스와 manifest를 연결

resource는 리소스의 표현자인 html 문서에 manifest 링크 관계가 포함되어 있을 때 manifest와 연결되어 있다고 한다.


5.1 manifest 연결

link 엘리먼트를 이용하여 manifest 키워드를 사용할 수 있다.


manifest 타입이 여러개 있을 경우 첫 번째 line 엘리먼트만 유효하다.


6. manifest 라이프 사이클


6.1 manifest의 획득

브라우저에서 성공하면 처리된 manifest와 manifest url을 반환하지만 다른 경우에는 바로 멈추고 아무것도 반환하지 않음. 아무것도 반환되지 않으면 브라우저는 manifest 선언을 무시해야 함. 이 과정에서 브라우저는 load 이벤트를 지연시켜서는 안됨


manifest를 캐시하기 위해서는 명시적으로 캐시 선언자를 지정하기를 권장함


6.1.1 컨텐트 보안 정책

manifest-src, default-src를 사용하여 ua가 manifest를 얻을 수 있는 출처를 지정할 수 있음.

기본적으로 manifest-src는 * 이며 ua는 cors를 통해 어떤 곳에서도 값을 받아올 수 있음.


6.2 manifest의 처리

개발자에게 경고를 해야 할 때, ua에서 에러를 표시할 수도 그렇지 않을 수도 있음

에러를 무시할 경우 ua는 내용이 지정되지 않은 것처럼 처리되어야 함


extension point: 다른 스펙에서 새로운 종류의 값을 manifest에 추가하는 방법


manifest 처리 순서

파싱

extension point: 다른 값을 처리

start URL

display mode

orientation

name

short name

icons

scope

파싱이 끝난 manifest 반환


6.3 manifest의 적용

top-level browsing context에 manifest 적용

manifest의 값이 표시 방법이나 동작에 영향을 미치게 됨

manifest가 적용된 top-level browsing context는 application context라고 함


ua가 딥링크로 이동하는 요청을 받아 application context가 생성되면

ua는 즉시 replacement enabled[?]인 상태로 딥링크로 이동해야 함


6.4 manifest의 갱신

manifest URL을 사용하면 ua는 변경 여부를 주기적으로 확인하기도 한다. (HTTP cache 선언자에 따르거나 실행 이후의 업데이트를 확인) 변경 내용이 있다면 동일한 처리 방법으로 갱신한다.

변경사항이 없더라도 manifest에서 지정한 리소스가 변경됐는지를 주기적으로 확인할 수도 있다.

변경사항이 있으면 업데이트를 할 수도 있다.


7 manifest와 구성 요소

manifest는 웹 애플리케이션이 실행될 때 시작 파라미터와 기본값을 담고 있는 JSON 문서다.


7.1 name

웹 앱의 이름을 표시하는 문자열

meta element에서 application-name 속성과 동일하게 동작한다.

지정하지 않을 경우 application-name이나 title의 값으로 대신한다.

trim된 값을 사용함


7.2 short_name

웹 앱의 짧은 이름을 표시하는 문자열

공간이 부족할 때 사용

trim된 값을 사용


7.3 scope

application context에서 이동할 수 있는 범위를 나타내는 문자열


7.4 icon

icon 객체의 배열. 아이콘으로 표시되어야 하는 곳에서 다양하게 사용된다.

icon 객체는 src, type, sizes, density로 구성될 수 있다.

동일한 선언이 있는 경우 마지막에 선언된 것을 사용


7.5 display

display mode를 나타내는 문자열

값이 지정되지 않거나 잘못 지정되면 ua에서는 항상 대체 방안을 적용해야 한다.


7.6 orientation

기본 방향을 설정

any

natural

landscape

portrait

portrait-primary

portrait-secondary

landscape-primary

landscape-secondary

중에 선택 가능 (https://w3c.github.io/screen-orientation/#idl-def-OrientationLockType)


7.7 start_url

사용자가 처음 실행시켰을 때 ua에서 로드할 url 문자열

권고 사항임. 사용자가 북마크 하는 과정에서 변경될 수도 있음.

manifest 파일의 url의 상대 경로로 지정할 수 있음.


8. icon 객체와 구성 요소

ua에서 조건이 가장 잘 맞는 아이콘을 찾게 됨

rel 속성이 icon인 link 엘리먼트와 동일한 기능


8.1 icon 객체의 내용 보안 정책

아이콘 로드는 manifest를 참조하는 문서와 연관된 image-src 선언자에 의해 결정된다.


8.2 density

icon에 최적인 device pixel density 

dot per px로 지정

0보다 큰 값

기본 값은 1.0


8.3 sizes

공백으로 구분되는 토큰의 집합으로 구성되는 문자열

토큰은 대소문자를 가리지 않으며

아이콘의 크기를 나타낸다.

값은 any나 양수로 표시하며 x(또는 X)로 구별한다.

실제 pixel값을 의미함


8.4 src

ua가 icon 데이터를 얻어올 수 있는 url

manifest의 url을 기준으로 값을 계산한다.


8.5 type

icon의 media type에 대한 힌트.

ua에서 지원하지 못하는 종류를 걸러내기 위한 것이 목적

기본 값은 없으나 ua에서는 image타입으로 예상해야 한다.


기타

manifest의 media type은 application/manifest+json




nundefined HTML5_JS_CSS html5, manifest, w3c, Web Application

  1. iOS에서의 add to homescreen
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW3

    android에서의 add to homescreen
    https://developer.chrome.com/multidevice/android/installtohomescreen

  2. android의 옛날 버전을 지원하기 위해
    <meta name="mobile-web-app-capable" content="yes">
    를 사용하면 주소창이 노출되지 않는 상태로 실행된다.