기본 콘텐츠로 건너뛰기

라벨이 html인 게시물 표시

pwa (Progressive Web App) 기초

작년에 w3c 세미나에 운좋게 참여해다가 세상에 웹이 이렇게나 바뀌고 있었나 싶었던 내용을 이제서야 조금 정리해봤다. PWA(Progressive Web App) Progressive Web App 은 웹의 장점과 앱의 장점을 결합한 환경입니다. 이것은 사용자가브라우저 탭을 맨 처음 방문할 때부터 유용하며, 설치가 필요 없습니다. 시간의 흐름에 따라 사용자가 앱과의 관계를 점진적으로 쌓아갈수록 성능이 더욱 강력해질 것입니다. 이 웹 앱은 느린 네트워크에서도 빠르게 로드되고, 관련된 푸시 알림을 전송하며, 홈 화면에 아이콘이 있고, 최상위의 전체 화면 환경으로 로드됩니다. 모바일웹과 네이티브앱을 비교해보자 웹이 나은점  - ios, android 두벌로 개발할 필요가 없다.  - 앱스토어가 필요 없으며 항상 최신버전을 유지할 수 있다. 앱이 나은점  - 디바이스의 자원을 활용할 수 있다. (카메라, gps 등)  - push  - 인터넷이 끊긴 환경에서도 사용이 가능하다. 웹과 앱의 장단점은 명확하지만, 지금의 단말환경에서는 디바이스 자원을 활용할 수 있는 앱이 유리하다. 단, pwa에서는 지금의 웹이 못하는 앱의 장점을 2가지정도는 해결해줄수 있다. - push, offline 서비스워커(Service-Worker) pwa에서 가장 핵심요소이다. 현재 크롬,파이어폭스에서는 지원이 가능하며, 사파리와 IE는 개발중이다. 즉, 곧 머지않아 모든 브라우저에서 사용이 가능하다는 뜻이다. 왜? 좋으니까. 구글 개발자사이트에 나온 서비스 워커의 정의는 이렇다 서비스 워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹페이지와는 별개로 작동하며, 웹페이지 또는 사용자 상호작용이 필요하지 않은 기능에 대해 문호를 개방합니다. 현재  푸시 알림  및  백그라운드 동기화 와 같은 기능은 이미 제공되고 있습니다. 향후 서비스 워커는 주기적 동기...

iframe 사용시 주의점

iframe을 이따금씩 사용하게 되는데, 그거 뭐 별거 있어 냥 하믄되지라고 시작했다가 iframe에서 form전송 하나 하는데 낭패를 보게된적이 있었다. 아래 두가지정도만 미리 알고 시작하면 조금더 수월하게 시작할 수 있었을 듯 하다. 1. cross domain 문제 parent 와 child 사이트가 서로 다른 주소를 사용하면 정상적으로 동작하지 않는다. www.abc.com 내에서 < iframe src = "http://www.zyx.com" ></ iframe > 도메인주소는 같지만 서브도메인 주소가 다른 경우에도 마찬가지로 같은 문제가 발생한다. www.abc.com 내에서 < iframe src = "http://sub.abc.com" ></ iframe > 그래서 이럴경우에는 도메인 주소를 인위적으로 동일하게 설정을 해주어야한다. < script > document .domain = " abc.com " </ script > 결론적으로 document.domain의 값이 일치해야만 cross domain은 해결이 되는것 같다. 기본적으로 별다른 설정이 없다면 document.domain은 서브도메인 주소까지 가지고 있다. 2. form전송 위에처럼 cross domain 문제를 해결하고, form을 만들어 ajax가 아닌 서브밋을 할경우 리턴페이지가 현재 iframe 내부가 아닌 새창에서 호출될 수 있다. form의 속성값중 'target'을 설정해줘서 해결을 해야 한다. form. target = '_self' 속성값은 '_self' 외에도 몇가지 더 있으니 참조해서 사용하면 좋을듯 하다. Value Description _blank Opens in a new window _self Opens in the s...

html 이미지 로드 실패시 사용할 디폴트 이미지

초간단 개꿀팁. 이걸 여지껏 모르고있었다니, 씁쓸할뿐. < img   src= "image.gif"   onerror= "myFunction()" > 코드만 봐도 감오시쥬? ㅋ img태그의 src링크를 가져오는게 정상적으로 되지 않을때, onerror 로 대신 동작을 정의 할 수 있다. 크롬,ie,파폭,사파리 전부지원. onerror에서 함수로 처리해도 되고, 바로 디폴트 이미지를 걸고 싶으면 < img   src= "image.gif"   onerror= "javascript:src={url}" > 이렇게 할 수 있다. 참고  http://www.w3schools.com/jsref/event_onerror.asp