Progressive web application

프로그레시브 웹 애플리케이션(Progressive web applications, PWA)은 웹을 통해 전달되는 응용 소프트웨어의 일종으로, HTML, CSS, 자바스크립트를 포함한 일반 웹 기술들을 사용하여 만들어진다. 표준을 준수하는 브라우저를 사용하는 어떠한 플랫폼에서라도 동작하도록 고안되었다. 기능에는 오프라인 작업, 푸시 알림, 장치 하드웨어 접근, 데스크톱과 모바일 장치의 네이티브 애플리케이션과 유사한 사용자 경험의 창출을 가능케 하는 것이 포함된다. 웹 애플리케이션으로 알려진 웹 페이지 또는 웹사이트의 일종이기 때문에 개발자나 사용자가 애플 앱 스토어나 구글 플레이와 같은 디지털 배급 시스템을 통해 웹 앱을 설치할 필요가 없다.

웹 애플리케이션들이 처음부터 모바일 장치용으로 사용이 가능하긴 했으나 이들은 속도가 더 느렸고 기능이 더 적은 것이 일반적이었으며 네이티브 앱보다 덜 사용되었다. 그러나 이전에 네이티브 앱에서만 사용이 가능했던 오프라인 작업 기능과 더불어 모바일 장치에서 실행되는 PWA들은 훨씬 더 빠르게 수행이 가능하며 더 많은 기능을 제공할 수 있고 네이티브 앱과의 격차를 줄여주고 데스크톱과 모바일 플랫폼에 모두 이식이 가능하게 된다.

PWA들은 별도의 빌드 또는 배포 과정이 필요 없다. 프로그레시브 웹 앱의 게시는 어떠한 웹 페이지를 대상으로도 가능하다.

About

• 웹 프로젝트는 PWA이어야 한다 - WebactuallyWebactually | 웹사이트를 만드는 사람들을 위한 온라인 정보

인트로

PWA를 잘 설명하는 좋은 무료 콘텐츠도 많지만, 잘못된 정보 역시 만연해 있다. 아마 다음 항목 중 하나 이상은 들어봤을 것이다.

• PWA를 구축하려면 자바스크립트JavaScript 프레임워크를 사용해야 한다.
• PWA를 구축하려면 싱글 페이지 앱single page app(SPA)으로 시작해야 한다.
• PWA는 오직 사용자가 설치할 수 있는 ‘앱’으로서만 의미가 있다.
• PWA는 오직 모바일에서만 유효하다.
• PWA는 안드로이드Android와 관련된 것이다.

모두 사실이 아니다. 오늘날의 많은 잘못된 정보가 그렇듯이, 각각은 거짓으로 왜곡된 진실의 파편을 포함하고 있다. PWA를 구축하고자 할 때 아마도 자바스크립트 프레임워크와 싱글 페이지 앱을 고려하겠지만, 반드시 그래야 하는 것은 아니다. 그런 사항들은 다른 웹 프로젝트와 마찬가지로 PWA에서도 선택사항일 뿐이다. 어쨌든 PWA도 웹사이트이기 때문이다(아니, 웹사이트이어야 한다). PWA는 단지 몇 가지 기능(예를 들어 ‘설치’ 기능)을 추가하여 전통적인 웹사이트를 좀더 강화한 것이다. 그러나 마찬가지로 모든 PWA에 설치 기능이 있어야 하는 것도 아니다. 비록 초창기 PWA는 모바일에 초점을 맞췄고 안드로이드에서만 동작했지만, 지금은 더 이상 작은 화면의 기기에 한정돼 있지 않다. 구글Google에서만 가능한 게 아니다. 마이크로소프트Microsoft, 모질라Mozilla, 오페라Opera, 삼성Samsung도 모두 합류했다. 애플Apple은 최근 서비스 워커Service Worker(PWA의 기반 기술 중 하나)를 구현하겠다는 계획을 밝혔다. 물론 설치 기능도 지원할지는 두고 봐야겠지만 말이다. 그러나 상관없다. 어차피 PWA는 사파리Safari에서 잘 작동하니까 말이다!

불행히도 이런 잘못된 정보는 많은 디자이너와 개발자(그리고 그 관리 팀)에게 PWA가 자신들의 프로젝트에 적합하지 않다는 확신을 심어줬다. 그러나 그 반대다! 모든 사이트는 PWA이어야 한다. 이 접근 방법은 모든 웹 프로젝트에 유익한데, 이 글에서 짧게 요약하여 설명할 예정이다. 그에 앞서 정확히 PWA가 무엇인지에 대해 설명함으로써 눈높이를 맞추고자 한다. 만약 PWA에 대해 상세하게 알고 있거나 이미 구축한 경험이 있다면 다음 절은 건너뛰어도 좋다. 만약 PWA에 전혀 익숙하지 않거나 제대로 이해하고 있지 않다면 걱정할 필요 없다. 다음 절이 PWA를 신속하게 이해할 수 있는, 잘 요약된 입문서 역할을 할 테니까 말이다.

도대체 PWA란 무엇인가?

앞서 언급했듯이, PWA는 특별한 능력을 가진 웹사이트다. “프로그레시브 웹 앱”에서 “앱”이라는 단어는 사용자가 PWA에 기대하는 콘텐츠나 경험의 유형을 한정하는 말이 아니다. “프로그레시브 웹 앱”이라는 용어 자체에 집착하지 말기 바란다. 마케팅 용어일 뿐이다. PWA는 운영체제(따라서 그 사용자)와 깊은 수준에서 연결하는 능력을 갖고 있다. 이는 설치, 그리고 알림이나 주소록 접근 등의 기능을 제공하는 API를 통해 가능하다. 반드시 설치가 돼야 모든 API를 사용할 수 있는 것은 아니지만, 일부는 그렇다. 이를테면 PWA를 웹사이트 더블 플러스website++라고 생각하면 편할 것이다.

무엇이 PWA를 진정한 PWA로 만들어줄까? 사실 별게 없다. 다음 세 개의 요건이 전부다.

HTTPS를 운영해야 한다.

PWA는 운영체제의 여러 특별한 권한을 부여받기 때문에, 웹 서버와의 보안 연결은 필수다. 이와 관련하여 도움이 필요하다면 렛츠인크립트Let’s Encrypt라는 무료 SSL 서비스를 확인해 보기 바란다.

웹 앱 매니페스트Web App Manifest가 있어야 한다.

이름만 보고 겁낼 필요는 없다. 단지 사이트와 관련된 정보를 담는 제이슨JSON 파일일 뿐이다. 게다가 파비콘favicon 생성기를 사용한다면 기본 뼈대를 갖춘 매니페스트 파일이 이미 있을 것이다. 브라우저나 검색 스파이더가 찾을 수 있도록 웹 페이지 head 부분에 link를 사용하여 참조시키면 된다.

서비스 워커를 사용해야 한다.

아마도 이게 가장 복잡한 단계일 것이다. 하지만 서비스 워커 관련해서는 엄청난 수의 가이드가 있어, 원하는 작업 유형에 맞는 제작 방법을 참고할 수 있다. 그 중에서도 특히 모질라Mozilla에서 제공한 가이드는 아주 훌륭하다.

이게 전부다. 일단 위와 같은 조건을 갖췄다면 그 웹사이트는 프로그레시브 웹 앱이다. 적어도 기술적으로는 그렇다. 그런데 왜 이런 자격 조건이 필요할까? 이에 대해서는 약간의 설명이 더 필요할 것 같다.

알렉스 러셀은 2015년에 PWA 개념을 처음 선보이며, 모든 PWA가 공통적으로 갖는 열 가지 특징을 설명했다. 그 중 대부분은 의심할 여지 없이 웹사이트를 구축하는 방법에 대한 것이었다. 하지만 일부는 보편적이지도 않고 어떤 종류의 프로젝트에도 적합하지 않은 사항이었다. 나는 이 점이 PWA 채택을 고려하는 많은 사람들에게 혼란을 준 원인 중 하나라고 의심한다. 또한 이 글을 쓰기로 결심한 이유이기도 하다.

Overview of caching flow

• Service worker caching and HTTP caching

Service worker Debugging

서비스 워커가 캐싱한 파일을 보냈는지 확인하고 싶다면 브라우저의 개발자 도구(Network 탭)를 확인하면 된다.

PWA의 캐싱이란?

• Workbox Caching | Cracking Vue.js

브라우저의 캐싱(Cache-Control)과는 다르게 브라우저의 캐시 스토리지(Cache Storage)를 활용하여 웹 리소스를 캐싱하는 기술입니다.

워크박스 캐싱 전략

Workbox#Workbox caching strategies 항목 참조.

서비스 워커의 캐싱 전략

• Service worker caching and HTTP caching
• 서비스 워커 캐싱 및 HTTP 캐싱
• [추천] The Offline Cookbook

서비스 워커의 캐싱 전략은 다음 5개가 있습니다.

Projects

• Workbox

Favorite site

• Wikipedia (en) Progressive web application
• Introduction to progressive web apps - Progressive web apps (PWAs) | MDN
  • 프로그레시브 웹 앱 소개 - 프로그레시브 웹 앱 | MDN
• 프로그레시브 웹앱(Progressive Web Apps)이란?