Progressive Web Apps, PWA
PWA를 구성하는 핵심 기술은 Service Worker(오프라인 캐싱)라 할 수 있다.
sublime text
package control
https://packagecontrol.io/installation
The simplest method of installation is through the Sublime Text console. The console is accessed via the ctrl+` shortcut or the menu. Once open, paste the appropriate Python code for your version of Sublime Text into the console.
install package
package controll
https://packagecontrol.io/installation#st3
convertToUTF8
Emmet
sftp ( ctrl + alt + u w )
terminal ( ctrl + shift + t )
Build System
Tools > build system
AMP
AMP(Accelerated Mobile Page)는 웹페이지를 빠르게 렌더링하는 방법이다.
성능과 최적화 측면에서 확실히 우수하다라고 판단되지만 규칙이나 제약사항등의 문제로 적용하기에는 다소 무리가 있어보인다.
이런 이유로 원본페이지와 별도의 AMP용 페이지를 만들어 연결해주는 방향으로 많이 활용되어지고 있다.
배경
자바스크립트는 웹의 필수적인 부분이지만 모바일 웹에서 속도저하를 일으키고, 보안의 취약 등등 여러가지 문제점을 내포하고 있다.
1. 너무 많은 스크립트가 여러 서버에서 로드된다.
2. 스크립트는 네트워크 트래픽을 발생시켜 사용자 비용을 증가시킨다.
3. 스크립트를 요청한 페이지에서 사용하지 않는 스크립트까지 로딩시킨다.
4. 스크립트의 로딩, 파싱 및 실행은 가장 중용한 컨텐츠의 로딩 및 렌더링을 차단한다.
5. 네트워크 장애, 다른 브라우저 런타임 및 호환성 문제로 인해 스크립트는 취약해질 수 밖에 없다.
구글은 웹속도를 늦추는 모든 자바스크립트 코드를 폐기하기로 하였고, 이것이 AMP가 나타나게 된 배경이다.
Google Amp 공식사이트
https://www.ampproject.org
AMP는 어떻게 웹 페이지의 성능을 높일 수 있나 – Naver D2
https://d2.naver.com/helloworld/6856597
[ 특징 ]
비동기 스크립트만 허용
모든 리소스의 크기를 정적으로 지정
확장 메커니즘이 렌더링을 차단하지 않도록 함
모든 타사 JavaScript를 주요 경로에서 제거
모든 CSS는 인라인이어야 하며 크기가 한정되어야 합니다.
글꼴 트리거는 효율적이어야 합니다
스타일 재계산 최소화
리소스 로드의 우선순위 지정
[ 필수 마크업 ]
<!doctype html> doctype으로 시작해야 합니다.
최상위 <html ⚡> 태그를 포함해야 합니다. (<html amp>도 허용됨)
<meta charset=”utf-8″> 태그를 <head>태그의 첫 번째 하위 요소로 포함해야 합니다.
<script async src=”https://cdn.ampproject.org/v0.js”></script> 태그를 <head> 태그의 두 번째 하위 요소로 포함해야 합니다.
<head> 내에 <link rel=”canonical” href=”$SOME_URL”> 태그를 포함해야 합니다.
<head> 태그 내에 <meta name=”viewport” content=”width=device-width,minimum-scale=1″> 태그를 포함해야 합니다.
<head> 태그에 AMP 상용구 코드를 포함해야 합니다.