DOI QR코드

DOI QR Code

서비스워커와 해시를 이용한 통신 데이터 소모 감소를 위한 웹 콘텐츠 갱신 알고리즘 설계

Design of Web Content Update Algorithm to Reduce Communication Data Consumption using Service Worker and Hash

  • 김현국 (한국기술교육대학교 컴퓨터공학부) ;
  • 박진태 (한국기술교육대학교 컴퓨터공학부) ;
  • 최문혁 (한국기술교육대학교 컴퓨터공학부) ;
  • 문일영 (한국기술교육대학교 컴퓨터공학부)
  • 투고 : 2019.02.20
  • 심사 : 2019.04.20
  • 발행 : 2019.04.30

초록

기존 웹 페이지는 사용자가 해당 페이지를 요청할 때 마다 새로운 페이지를 다운로드 받아 사용자에게 제공하였다. 따라서 동일한 페이지를사용자가 반복해서 요청할 경우 동일한 리소스에 대한 다운로드만을 반복하게 된다. 이는 불필요한 데이터의 소비를 발생시키는 요인이다. 본 논문에서는 사용자와 서버간의 불필요한 요청에 의해 발생하는 데이터의 소모를 감소시키고, 콘텐츠 제공 속도를 향상시키는 대에 초점을 맞추었다. 따라서 이를 방지하기 위하여 본 논문에서는 캐싱 시스템과 사용자가 요청하는 파일의 변경을 감지할 수있는 해시 함수를 이용한 해시 값의 비교를 통해 항상 최신 캐시를 유지하면서 데이터 소모를 줄일 수 있는 알고리즘에 대하여 논하고, 웹 콘텐츠의 속도 향상을 위한 서비스 워커 기반의 캐싱 시스템을 설계하고 성능을 평가하였다.

The existing web page was downloaded and provided to the user every time the user requested the page. Therefore, if the same page is repeatedly requested by the user, only the download for the same resource is repeated. This is a factor that causes unnecessary consumption of data. We focus on reducing data consumption caused by unnecessary requests between users and servers, and improving content delivery speed. Therefore, in this paper, we propose a caching system and an algorithm that can reduce the data consumption while maintaining the latest cache by comparing the hash value using the hash function that can detect the change of the file requested by the user.

키워드

HHHHBI_2019_v23n2_158_f0001.png 이미지

그림 1. 서비스워커 생명주기 Fig. 1. 서비스 워커 Lifecycle.

HHHHBI_2019_v23n2_158_f0002.png 이미지

그림 2. 서비스 워커와 cache api를 이용한 서비스 예시 Fig. 2. Example service using 서비스 워커 and cache api.

HHHHBI_2019_v23n2_158_f0003.png 이미지

그림 3. 시스템 구조도 Fig. 3. System Architecture.

HHHHBI_2019_v23n2_158_f0004.png 이미지

그림 4. 시스템 동작도 – 사용자가 요청한 파일이 캐시에 존재하는 경우 Fig. 4. System operation diagram - If the file requested by the user exists in the cache.

HHHHBI_2019_v23n2_158_f0005.png 이미지

그림 5. 캐시 갱신시 발생하는 네트워크 트래픽 Fig. 5. Network traffic that occurs during cache updates.

표 1. hash.php 소스 코드 Table 1. hash.php source code.

HHHHBI_2019_v23n2_158_t0001.png 이미지

표 2. index.html 소스 코드 Table 2. index.html source code.

HHHHBI_2019_v23n2_158_t0002.png 이미지

표 3. index.js 소스 코드 Table 3. index.js source code.

HHHHBI_2019_v23n2_158_t0003.png 이미지

표 4. sw.js 소스 코드 중 캐시 최신화 함수 정의부 Table 4. sw.js Source code update cache function definition.

HHHHBI_2019_v23n2_158_t0004.png 이미지

표 5. 실험 측정 결과 – Fast 3G 네트워크 환경 Table 5. Experimental Results - Fast 3G Network Environment.

HHHHBI_2019_v23n2_158_t0005.png 이미지

표 6. 실험 측정 결과 – 100Mbps 네트워크 Table 6. Experimental Results - 100Mbps Network.

HHHHBI_2019_v23n2_158_t0006.png 이미지

참고문헌

  1. P. Lepage, Your first progressive web app [Internet]. Available: https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=en
  2. B. H. Andreas, T. A. Majchrzak, and T. M. Gronli. "Progressive web apps: The possible web-native unifier for mobile development," in Proceedings of the 13th International Conference on Web Information Systems and Technologies (WEBIST), Porto: Portugal, pp, 344-351, April. 2017.
  3. Google developers, Nikkei achieves a new level of quality and performance with their multi-page PWA [Internet]. Available: https://developers.google.com/web/showcase/2018/nikkei
  4. Mozila MDN, Service worker api [Internet]. Available: https://developer.mozilla.org/en-US/docs/Web/api/Service_Worker_api
  5. N. Pande, A. Somani, S. P. Samal, and V. Kakkirala. "Enhanced web application and browsing performance through service-worker infusion framework," in 2018 IEEE International Conference on Web Services (ICWS), San Francisco: CA, pp, 195-202, July. 2018.
  6. A. Gambhir, and G. Raj. "Analysis of cache in service worker and performance scoring of progressive web application," in 2018 International Conference on Advances in Computing and Communication Engineering (ICACCE), Paris: France, pp, 294-299, June. 2018.
  7. Mozila MDN, Cache [Internet]. Available: https://developer.mozilla.org/en-US/docs/Web/api/cache
  8. Kravchenko and Maxim. Evaluation of security of serviceworker and related apis, Bachelor, Linnaeus University, Sweden, 2018.
  9. I. Malavolta, G. Procaccianti, P. Noorland, and P. Vukmirovic. "Assessing the impact of service workers on the energy efficiency of progressive web apps," in Proceedings of the 4th International Conference on Mobile Software Engineering and Systems, New Jersey: NJ, pp, 35-45, May, 2017.
  10. T. A. Majchrzak, B. H. Andreas, and T. M. Gronli. "Progressive web apps: the definite approach to cross-platform development?." in Hawaii International Conference on System Sciences (HICSS), January, 2018.