How to implement cache to improve performance Brief example of sw-precache, sw-toolbox

1. 25th August, 2016
Jae Sung Park
[Image source] https://www. ickr.com/photos/sunset_man/4591376374/
현실적
PWA

2. PWA?
"Progressive Web Applications take advantage of
new technologies to bring the best of mobile sites
and native applications to users"
- Progressive Web Apps
Instant Loading:
, ,
Add to Home Screen:
Push-noti cations:
,
Service Workers Background Sync API Cache API
Web App Manifest
Push API Noti cations API

3. Performance matters
PWA 기술들 중, 가장 중요한 요소는 바로 o޵ine caching!

4. 캐싱은 왜 중요한가?
오프라인 지원
성능 향상
네트워크 보다 캐시를 통해 요청받는 것이 빠르기 때문
Lie-Fi

5. Lie-Fi
"Indicates that you are connected to a wireless
network, however you are still unable to load
webpages" - urban dictionary
[참고]: What is lie- ?

6. The challenges of PWA
iOS 미지원
: Under Consideration
Web App Manifest?
Push & Noti cation API?
데스크탑 브라우저? (Service Worker 기준)
IE (Not Supported), (In Development)
(Under Consideration)
(Supported)
Service Workers
Edge
Safari
FireFox
브라우저의 가 문제.
캐싱을 모든 환경에서 사용할 순 없을까?
지원 범위

7. 그런데... 잠깐.
브라우저는 이미 캐싱하고 있지 않나?
사용자가 방문하는 웹사이트의 모든 리소스들에 대해 브라우저는
로컬 캐시해 다음 방문시 로컬 캐시된 리소스를 활용하도록 처리된다.
그러나 많은 경우(온라인 상태인 경우라도)
로컬 캐시된 리소스를 활용하지 못하는 경우가 발생한다.
물론, 오프라인인 경우에는 로컬 캐싱은 사용불가

8. Cache
로컬 캐시에 대하여

9. 캐시의 상태
Status Description
rst
visit
첫 방문인 경우, 당연히 캐싱되어 있는 리소스는 존재하지 않음
cleared 캐싱되어 있는 경우라도, 사용자가 직접 캐시를 비우거나, 백신으로 인해 지워지거나 또는 브
라우저의 버그로 제거되기도 한다. (약 19%의 Chrome 사용자들의 경우, 최소 1주일에 한
번 이상 버그로 인해 캐시가 지워진다. - )
purged 로컬 캐시의 공간은 모든 웹사이트가 공유해 사용하기 때문에 한정된 공간으로 인해 이전에
캐시된 내용은 새로운 캐시 저장을 위해 지워지게 된다.
expired 약 69%의 리소스들은 캐싱에 대한 헤더가 없거나 또는 1일 미만의 값으로 설정되어 있다. 캐
싱 기간이 만료되면, 로컬에 저장된 캐시의 내용이 유효하더라도 새롭게 요청되어 진다. (
)
revved 이전 방문으로 인해 캐싱이 되어 있는 상태라고 해도, 사이트의 내용이 변경되어 사용자의 로
컬 캐시된 리소스와 달라 사용되지 못할 수도 있다.
참고
참
고

10. 페이스북 사례
페이스북에 접속하는 사용자들 중 로컬 캐시가 없는
상태의 요청 비율은 25.5% 라고 한다. (2015/04 기준)
Type Request rate of
missing cache
Desktop 24.8%
Mobile 26.9%
[참고]: Web performance: Cache e忁�ciency exercise

11. 브라우저의 캐시 공간
로컬 캐싱은 성능에 큰 영향을 주는 요소 중 한 가지.
그러나 모바일 환경에서의 캐싱은 데스크탑 브라우저에 비해 적은 공간을 사용
브라우저에 따라 최대 사용공간은 다르며,
잘 문서화 되어 있지 않아 정확한 limit을 확인하기는 어렵다.
종류 크기
데스크탑 3자리 수 이상 (또는 사용 디스크 전체 크기의 일부)
ex. IE9의 경우는 디스크 크기의 1/256
모바일 2자리 수 정도의 공간을 활용하는 것으로 알려져 있음
ex. Android 2.x의 경우는 최대 캐시 크기는 5.7MB에 불과
(iOS의 경우는 50MB 이상)
[참고]: Early ndings: Mobile browser cache persistence and behaviour

12. Service
Workers
손쉽게 사용할 수 있는 도구들

13. sw-precache
빌드 기반의 리소스 프리캐싱
캐싱 리소스 파일의 컨텐츠에 기반해 해쉬를 통한 자동 버저닝
변경이 감지되면, 이전 버전을 만료시키고,
새로운 버전을 fetch 하도록 SW를 생성
변경되지 않은 캐시 요소에 대해선 그대로 유지
cache- rst strategy

14. sw-precache
ex. Gulp task:
gulp.task('precache', function(callback) {
var path = require('path');
var swPrecache = require('sw­precache');
var rootDir = 'demo/pwa';
swPrecache.write(path.join(rootDir, 'sw.js'), {
staticFileGlobs: [ rootDir + '/**/*.{js,html,css,png,jpg,gif}' ],
stripPrefix: rootDir
// 런타임 캐싱 사용시, 생성되는 sw.js에 sw­toolbox가 자동으로 포함
// https://github.com/GoogleChrome/sw­precache#runtimecaching­arrayobject
/*,runtimeCaching: [{
urlPattern: /.cloudflare.com/(.*)/i,
handler: 'fastest',
options: {
cache: {
maxEntries: 10,
name: 'cdnjs'
}
}
}]*/
}, callback);
[코드랩]: Adding a Service Worker with sw-precache

15. sw-toolbox
런타임 요청에 대한 공통의 캐싱 패턴을 제공
다음의 3가지 패턴(전략*)을 제공
cacheFirst
networkFirst
fastest
// URL 패턴에 매칭되는 리소스에 대한 캐싱 전략을 지정
toolbox.router.get("/images", toolbox.[ cacheFirst | networkFirst | fastest ], options);
*The o޵ine cookbook

16. sw-toolbox
(global => {
'use strict';
// sw­tookbox 로딩
importScripts('./js/sw­toolbox.js');
// 디버깅을 위한 로깅 옵션 (개발자 도구 콘솔에 로깅됨)
global.toolbox.options.debug = true;
// 이미지 폴더로 요청되는 리소스
toolbox.router.get('/demo/pwa/img/(.*)', global.toolbox.cacheFirst, {
cache: {
name: 'img',
maxEntries: 10,
maxAgeSeconds: 60*60*24 // 1일간 유효
}
});
// cloudflare.com (cdnjs.com)에서 요청되는 모든 리소스
toolbox.router.get('/(.*)', global.toolbox.cacheFirst, {
cache: {
name: 'cdnjs',
Instant Loading with Service Workers (Chrome Dev Summit 2015)
Service Worker Toolbox, Totally Tooling Tips
Getting started with the sw-toolbox

17. offline-plugin for webpack
webpack 프로젝트에서 사용할 수 있는 플러그인
1) webpack.con g 설정
var OfflinePlugin = require('offline­plugin');
module.exports = {
plugins: [
// ... other plugins
// 플러그인들 중, 가장 마지막에 추가
new OfflinePlugin({
caches: {
main: ['external.js', ':rest:']
},
externals: ['external.js'],
excludes: ['main.js']
})
]
// ...
}
2) in your client script
require('offline­plugin/runtime').install();

18. Demo
sw-precache 및 sw-toolbox
https://netil.github.io/demo/pwa/

19. 무엇을 캐싱해야 할까?
Application Shell architecture

20. SW가 지원되지
않는 환경에선?
스토리지를 활용한 캐싱:
Web Storage, IndexedDB, File API, etc.
[참고]: O޵ine Storage for Progressive Web Apps

21. 웹 스토리지를 활용한 캐싱 방법
캐시의 상태에 따라 항상 모든 static 파일들이 사용자의 로컬 영역에
존재한다는 보장은 없기 때문에, 자주 변경이 되지 않는 파일에 대해서는
localStorage를 이용해 확실하게 캐싱되도록 처리하는 방법도 고려할 수 있다.
몇가지 고려사항 :
자주 변경을 필요로 하지 않는 기본 라이브러리들로 대상을 한정
자주 변경되지 않더라도, 업데이트가 필요할 수 있기 때문에 '버전관리' 필요
localStorage는 브라우저에 따라 최대 저장용량이 다를 수 있다.
대체로 5MB 까지 저장할 수 있지만, 보다 정확한 최대치 확인필요
[데모]: 네이버 검색 활용 예

22. 로딩 전략
initializer: 스토리지 버전과 비교
storage.VER == le.VER ?
load from Storage : load from File
// 스토리지에 저장된 스크립트를 evaluation 한다.
let load = (code = "") => {
let s = document.createElement("script");
s.charset = "utf­8";
s.text = code;
(document.head || document.getElementsByTagName("head")[0]).appendChild(s);
};
조건과 상황에 따라 다르지만, 기존 대비 25% 성능향상 경험

23. How much can be stored?
크롬의 경우 :
영역을 사용
Per origin (not per API)
Web Storage, App Cache, File System,
IndexedDB, WebSQL가 공유
그러나 Web Storage는 5MB로 고정
temporary
Browser Limits
Firefox No limits (prompt after 50MB)
Mobile Safari 50MB max
Desktop Safari unlimited (prompts after 5MB)
IE10+ 250MB max (prompts at 10MB)

24. Chrome Quota Size
navigator.webkitTemporaryStorage.queryUsageAndQuota (
(usedBytes, grantedBytes) =>
console.log('Using ', usedBytes, ' of ', grantedBytes, 'bytes'),
e => console.log('Error', e)
);
(2016/6/16~17)
:BlinkOn 6 conference State of O޵ine Storage APIs
Type Previous Current Work
Pool (free space –
chrome's current usage) / 3
xed % of total disk space:
(drive size - OS size) * P
Origin quota pool size / 5 pool size / N
PWA gets at most 6% of free space on device
[참고]: ,Browser Storage Abuser O޵ine Storage for Progressive Web Apps

25. Debug PWA
크롬 개발자 도구

26. PWA 디버깅
SW는 'https' 에서만 동작한다.
그러나 디버깅 용도를 위해 및 에서도 동작 (포
트 상관없음)
http://localhost http://127.0.0.1
Chrome DevTools > Application Tab:
Manifest
Service Workers
Cache
chrome://serviceworker-internals/
Debug Progressive Web Apps Service Worker
Debugging

27. Manifest
전체 outline 확인
homescreen 이벤트 에뮬레이션

28. Service Workers
네트워크 핸들링
에뮬레이션: ,
update/unregister sw
start/stop sw
Push a noti cation Sync event

29. Cache
캐시된 리소스의 확인
모든 캐시의 삭제는 Application > Clear storage

30. Resources
(오페라에서 아카이빙한 PWA 앱 목록)
Google Developers:
Google Developers:
Mozilla
Service Workers 101:
(PWA 리소스 큐레이션)
https://pwa.rocks/
Progressive Web Apps
SW Case Studies
Service Worker Cookbook
SW Infographic
The Service Worker Lifecycle
Awesome Progressive Web Apps
Progressive Web App Dev Summit 2016

31. Gracias[Image source] https://www. ickr.com/photos/joshezzellphotography/12429005735/