프로그레시브 웹 애플리케이션에 대한 간략한 논의

2016년에는 새로운 용어가 있습니다. PWA(Progressive Web Application)는 반응형 디자인, 독립적인 연결성, 참신함, 보안, 탐색 가능, 사용자 정의 가능, 설치 가능을 뜻하는 "포괄적" 용어입니다. 기본 애플리케이션이 포함된 유연하고 연결 가능한 애플리케이션/웹사이트- 상호작용 같은 거죠. 다시 말하지만, 우리 모두는 전체 PWA 개념을 다루는 방법을 배워야 하고, 더 많은 토론과 아이디어 교환을 해야 하며, 무엇이 우리 웹사이트를 더 합리적으로 만드는지 알아내야 합니다. 반응형 웹 디자인을 시작할 때 이러한 실수를 반복하지 맙시다.

프로그레시브 웹 앱이란

프로그레시브 웹 앱(PWA)은 본질적으로 일반 웹사이트와 다르지 않습니다. 또한 HTML, CSS 및 JavaScript로 구성되며 브라우저에 상주합니다. 가운데. PWA가 일반 웹사이트와 다른 점은 PWA가 충족해야 하는 10가지 핵심 개념 목록입니다. 다음은 Google 개발자 웹사이트에서 직접 가져온 목록입니다.

보안 – HTTPS를 통해 제공되어 네트워크 스누핑을 방지하고 콘텐츠가 변조되지 않도록 합니다.

프로그레시브 – 항상 점진적인 향상 원칙을 기반으로 하기 때문에 사용자가 어떤 브라우저를 사용하든 관계없이 모든 사용자가 사용할 수 있습니다.

반응형 – 데스크톱 컴퓨터, 데스크톱 컴퓨터, 스마트폰 휴대폰, 태블릿 또는 기타 장치.

네트워크 연결에 의존하지 않음 - 서비스 워커로 강화, 오프라인 또는 저품질 네트워크에서 작업 가능

네이티브 유사 애플리케이션 - 네이티브 애플리케이션과 유사한 상호 작용 및 네이티브와 같은 사용자 탐색 기능 제공 애플리케이션은 앱 셸 모델을 기반으로 구축되었기 때문에 경험하게 됩니다.

지속적인 업데이트 – 서비스 워커의 업데이트 프로세스 덕분에 애플리케이션은 항상 최신 상태를 유지할 수 있습니다.

검색 가능 – W3C 덕분에 "애플리케이션"으로 식별 가능하며 메타데이터 및 서비스 워커 등록이 명시되어 검색 엔진이 웹 애플리케이션을 찾을 수 있습니다.

재방문 가능 – 푸시 알림과 같은 기능을 통해 사용자가 쉽게 다시 돌아올 수 있도록 하세요.

설치 가능 - 사용자가 앱 스토어를 거치지 않고도 홈 화면에 유용한 앱을 유지할 수 있습니다.

연결 가능 – URL을 통해 쉽게 애플리케이션을 공유할 수 있으며 복잡한 설치 없이 실행할 수 있습니다.

이러한 지침을 따르면 브라우저에서 볼 때뿐만 아니라 홈 화면 바로가기를 통해서만 앱을 실행할 때에도 앱이 제대로 실행되도록 할 수 있습니다. Google에서 선택한 문구가 매우 혼란스러울 수 있지만 걱정하지 마세요. 이 튜토리얼에서는 규칙을 하나씩 설명하겠습니다.

프로그레시브 웹 앱이 아닌 것

PWA의 개념을 다음과 혼동해서는 안 됩니다.

Cordova 기반 하이브리드 앱

React Native

NativeScript

Electron 및 NW.js

앞서 언급한 모든 기술은 HTML 애플리케이션을 .apk, .exe 등과 같은 실행 파일로 패키지한 다음 다음에서 다운로드해야 합니다. 해당 앱 스토어에서 다운로드하여 사용자 기기에 설치하세요.

PWA는 설치가 필요하지 않으며 Google Play 또는 iTunes 앱 스토어에서는 여전히 사용할 수 없습니다. PWA를 다운로드하려면 해당 웹사이트를 방문하여 홈 화면에 대한 바로가기로 저장하세요. iOS와 Android용 별도 버전을 개발하고 유지하는 것은 더 이상 문제가 되지 않지만, 브라우저 지원을 고려해야 합니다.

1. 보안

대부분의 진보적인 웹 애플리케이션은 민감한 데이터를 처리하는 네이티브 API와 서비스 워커를 사용하므로 주의해서 처리해야 합니다. 이것이 모든 PWA가 HTTPS 연결을 통해 액세스되는 이유입니다.

SSL 인증서가 있는 서버가 없는 경우 안전한 환경에서 프로젝트를 실행하는 가장 쉬운 방법은 GitHub 페이지 또는 유사한 서비스를 이용하는 것입니다. 모든 Github 리포지토리는 HTTPS를 통해 직접 호스팅할 수 있으며 GitHub 및 GitHub 페이지 모두 공개 리포지토리에 대해 무료입니다.

로컬 서버에서 테스트하는 경우 Ngrok을 사용해 볼 수도 있습니다. 현재 실행 중인 로컬 호스트와 공개 URL 사이에 보안 채널을 설정할 수 있는 작은 도구입니다. Ngrok은 무료이며 Windows, Mac 및 Linux 시스템에서 사용할 수 있습니다.

2. 프로그레시브

기본적으로 프로그레시브는 PWA가 널리 지원되는 웹 기술을 사용하고 가능한 한 많은 브라우저에서 동일하게 실행되어야 함을 의미합니다. 우리 모두 알고 있듯이 웹 개발 세계에서는 이것이 거의 불가능합니다. 하지만 더 큰 사용자 기반에 도달하기 위해 할 수 있는 일이 여전히 있습니다.

예를 들어 PhotoBooth 애플리케이션에서는 getUserMedia() API를 사용하여 기기의 하드웨어 카메라에 액세스합니다. 다양한 브라우저에서의 지원은 매우 일관성이 없습니다. Safari는 이를 전혀 지원하지 않으며 이를 지원하는 브라우저에는 접두사가 필요하며 사용법은 다양합니다.

더 많은 사람들이 우리 앱을 사용할 수 있도록 모든 접두사를 포함합니다:

  navigator.getMedia = ( 
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia
   );

모든 접두사가 실패하면 오류를 표시합니다:

if (!navigator.getMedia) {
    displayErrorMessage("你的浏览器不支持 navigator.getUserMedia 接口。");
}else {
    // 使用 Camera API
}

가능한 경우 대체 및 폴리필 제공되어야 합니다. CSS와 HTML 코드에도 동일한 원칙이 적용됩니다.

3. 반응형

앱은 화면 크기에 관계없이 모든 기기에서 보기 좋게 보여야 합니다. 우리 애플리케이션의 UI는 매우 간단하므로 두 개의 미디어 쿼리만 사용하여 글꼴 크기, 패딩, 여백 등을 제어합니다.

부트스트랩과 같은 CSS 라이브러리 및 프레임워크를 사용하는 것을 두려워하지 마세요. 이를 통해 양식 그리드, 타이포그래피 및 일반적인 반응성을 쉽게 사용할 수 있습니다.

4. 네트워크 연결과 무관

이것이 매우 중요한 포인트입니다. 서비스 워커를 사용하면 인터넷 연결 없이도 애플리케이션을 실행할 수 있습니다.

일부 애플리케이션은 부분적으로만 캐시할 수 있습니다. UI는 캐시되어 오프라인으로 사용할 수 있으며 동적 콘텐츠는 여전히 서버에 액세스해야 합니다.

PhotoBooth 데모 앱과 같은 일부 앱은 완전히 캐시될 수 있습니다. 모든 소스 코드와 리소스는 로컬에 저장되며 애플리케이션은 오프라인과 온라인에서 정확히 동일한 방식으로 실행됩니다. 이 마법을 일으키는 코드는 다음과 같습니다.

이것은 서비스 워커를 지나치게 단순화한 것이므로 상용 프로젝트에서는 주의해서 사용해야 합니다.

먼저 서비스 워커 JavaScript 파일을 생성하고 그 뒤에 있는 로직을 정의해야 합니다.

sw.js

// 安装 service worker.
this.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1').then(function(cache) {
            // 如果这些资源中有任何资源不能保存，缓存就会失败
            return cache.addAll([
                // 路径是相对于缓存来源，而不是应用程序的目录。
                '/pwa-photobooth/',
                '/pwa-photobooth/index.html',
                '/pwa-photobooth/assets/css/styles.css',
                '/pwa-photobooth/assets/fonts/MaterialIcons-Regular.woff2',
                '/pwa-photobooth/assets/js/script.js',
                '/pwa-photobooth/assets/icons/ic-face.png',
                '/pwa-photobooth/assets/icons/ic-face-large.png',
                '/pwa-photobooth/manifest.json'
            ])
            .then(function() {
                console.log('成功! App 离线可用!');
            })
        })
    );
});
// 定义一个资源被请求时候会发生什么
// 对于我们的应用，我们以缓存优先的方式
self.addEventListener('fetch', function(event) {
    event.respondWith(
        // 试着从缓存中获取.
        caches.match(event.request)
        .then(function(response) {
            // 如果资源没有存储在缓存中，就回退到网络
            return response || fetch(event.request);
        })
    );
});

그런 다음 서비스 워커를 HTML에 연결해야 합니다.

index.html

// 注册 Service Worker.
if ('serviceWorker' in navigator) {
    // 路径是相对于缓存来源，而不是应用程序的目录.
    navigator.serviceWorker.register('/pwa-photobooth/sw.js')
    .then(function(reg) {
        console.log('Registration succeeded. Scope is ' + reg.scope);
    })
    .catch(function(error) {
        console.error('Registration failed with ' + error);
    });
}

이제 프로젝트의 모든 파일이 사용자의 브라우저에 저장됩니다. 모든 JavaScript 변수와 객체는 가능할 때마다 localStorage 또는 IndexDB에 저장되어야 합니다.

5. 클래스 네이티브 참조

PWA를 생성할 때는 애플리케이션 셸 아키텍처라는 설계 개념을 따르는 것이 좋습니다. 복잡해 보이지만 실제로는 다음과 같이 요약됩니다. 애플리케이션은 셸과 콘텐츠라는 두 가지 주요 구성 요소로 나뉩니다.

셸에는 헤더, 메뉴, 서랍 등 모든 정적 UI 요소가 포함되어 있습니다. 애플리케이션을 캐싱할 때 셸은 항상 사용할 수 있도록 하기 위해 항상 장치에 저장되어야 합니다. 이렇게 하면 인터넷에 연결되지 않은 사용자가 앱을 열 때 빈 화면이나 달리는 공룡이 표시되지 않고 대신 캐시된 앱 인터페이스와 적절한 오류 메시지가 표시됩니다.

内容驻留在外壳内。它也可以被缓存，但是没有必要这样做，因为内容通常是动态的，会频繁发生改变，并且每个页面加载时都可能是不同的。

6. 持续更新

一旦被缓存了，PWA 会总是从本地存储加载。不过，如果以任何方式修改了 service workersw.js，那么在下一个页面加载时，新版本就会被下载和安装。

this.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1.0.1').then(function(cache) {
            // ...
        })
    );
});

通过使用 service worker 更新，我们可以重新下载资源，删除旧缓存，或者彻底修改 service worker 逻辑。你可以从这篇 Google 开发者文章中，学到更多有关 SW 更新过程的知识。

7. 可发现

通过给应用程序添加一个 Web Manifest，可以提供有关应用程序的各种信息，并且可以修改应用程序在用户设备上的显示方式。它允许应用程序被带自定义图标的方式保存到主屏幕上，在一个单独的浏览器窗口中启动，以及很多其它很酷的东西。

Web Manifest 是以一个简单 JSON 文件的形式出现：

manifest.json

{
  "name": "Progressive Web App: PhotoBooth",
  "short_name": "PhotoBooth",
  "description": "Simple Progressive Web App for taking selfies.",
  "icons": [{
      "src": "assets/icons/ic-face.png",
      "type": "image/png",
      "sizes": "72x72"
    }, {
      "src": "assets/icons/ic-face-large.png",
      "type": "image/png",
      "sizes": "144x144 256x256" 
    }],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#fff",
  "orientation": "portrait"
}

大多数属性是自解释的，所以我们只讲讲较为重要的一些属性。要查看完整的 Web manifest 格式，以及所有可用的字段，请到这里。

Shortname – 这是应用保存到主屏幕上时的名称。

Icons – 不同分辨率的图标数组。

Display – 定义应用打开的方式。我们选择的是独立（standalone)，所以启动 PhoneBooth 时，会以全屏窗口出现，没有浏览器导航栏或者菜单。它还会被看作为多任务中的一个单独的应用。

要注册 Manifest 文件，必须把它链接到 HTML 中：

<!-- Web Manifest -->
<link rel="manifest" href="manifest.json">

Safari 还不支持 Web Manifest 标准，但是我们可以用如下的苹果特定的 meta 标记，定义类原生应用的行为：

<!-- Meta tag for app-like behaviour in iOS -->
<meta name=”apple-mobile-web-app-capable” content=”yes”>

8. 可再次访问

通知推送不再只限于原生应用。多亏了 service worker 和 Push API，Web 应用程序也可以发送消息给 Android 通知栏。并不是所有应用都可以从这个功能受益，但是当正确使用此功能时，通知确实可以帮助吸引用户。

这个主题已经超出了本教程的范围，因为推送很复杂，值得用一个完整的课程讲解。如果你依然想在你的 Web 应用中实现通知推送，这里有一些最好的学习资源：

Google 开发者网站上的《推送通知：及时、相关和准确》 – 这里.

Google 开发者网站上的《开放 Web 上的推送通知 – 这里.

MDN 上的《使用 Push API》 – 这里.

Push.js 库，提供处理推送通知的更清洁的 API – 这里.

9. 可安装

默认情况下，任何网站都可以用 Chrome 浏览器菜单的 "添加到主屏幕" 按钮，保存到主屏幕上。不过，让用户以这种方式 "安装" 应用程序可能有点难，因为大多数人完全不知道这个功能。

다행히도 간단한 설치 팝업을 사용하여 앱에서 사용자에게 저장하라는 메시지를 표시하는 방법이 있습니다. 개발자가 이러한 팝업을 남용하는 것을 방지하기 위해 프로그래밍 방식으로 팝업을 표시하는 것은 허용되지 않습니다. 대신, 애플리케이션이 다음 조건을 충족할 때 이러한 창은 자동으로 나타납니다.

유효한 웹 매니페스트가 있어야 합니다.

유효한 서비스 워커가 설치되어 있습니다.

HTTPS를 통해 애플리케이션에 액세스하세요.

위에 언급된 모든 조건을 충족하므로 사용자가 웹사이트를 몇 번 방문하면

연결 가능

PWA 애플리케이션은 브라우저만 있으면 누구나 접근할 수 있으므로, URL을 통해서만 애플리케이션을 공유할 수 있습니다. 이러한 앱을 검색하거나 설치하는 데 타사 도구가 필요하지 않습니다.

앱이 독립형 모드로 실행되는 경우 브라우저 주소 표시줄과 메뉴가 표시되지 않으므로 앱 내에 공유 버튼을 추가하는 것도 현명한 방법입니다.

드디어

반응성을 넘어서

반응형 디자인을 처음 경험한 후 특별한 장비 디자인과 프로그래밍을 제공한다는 것을 깨달았습니다. 돌아올 수 없는 길이다. 첫 번째 시도에 성공할 수 있는 프로덕션 준비 웹사이트는 없지만, 특수하지 않은 다른 장비라면 가능합니다. 오늘날 대부분의 사람들은 모바일에서 스타일링 긴급 상황을 발견할 때 미디어 쿼리 추가를 가장 먼저 생각하며, 그래도 괜찮습니다.

지금 반응형 디자인을 생각하고 있었다면 미디어 쿼리와 콘텐츠의 유연한 형식 지정 이상의 작업을 수행한다는 의미일 것입니다. 반응형 웹사이트를 만들면서 점점 더 많은 사람들이 적응성, 성능, 콘텐츠를 필요로 한다는 것을 깨달았습니다. 나는 반응형 웹사이트를 적합하거나 성능 좋게 만드는 것을 잊어버린다면 아무 소용이 없다는 것을 깨달았습니다. 나는 열 때마다 화면에 맞게 디자인되어 접근하기 어렵고 과부하가 걸리는 반응형 디자인 사이트보다 빠르고 접근하기 쉬운 사이트를 선호합니다.

Service Worker도 마찬가지입니다. 처음에는 단순한 오프라인 솔루션으로 생각했을 때 웹사이트의 접근성을 높이고 사용하기 쉽게 만드는 많은 성능 측면과 방법을 깨달았습니다.

이름뿐 아니라 진보적인 웹사이트 만들기

진보적인 웹 애플리케이션 – 반응성이 뛰어나고 독립적인 연결성, 참신하고 안전하며 탐색 가능하고 사용자 정의가 가능하며 설치가 가능하고 연결 가능한 앱(기본 웹사이트) 네이티브와 같은 훌륭한 상호 작용이 제공되지만 우리가 절대 잊지 말아야 할 단어가 하나 있습니다. 바로 진보적입니다.

프로그레시브 웹의 업그레이드 최적화를 추진하는 것이 어렵다는 것을 이해하기 때문에 프로그레시브 웹 애플리케이션에 이름을 붙이는 것이 훌륭하다고 생각합니다. 나는 더 많은 사람들이 진보적인 웹사이트를 만들었으면 좋겠다. 사용자는 "저희 사이트를 발전적으로 만드는 데 도움을 주실 수 있나요?"라고 말할 것입니다. 그러면 점진적인 최적화와 업그레이드는 일시적인 일이 아니라 모두가 하고 싶어하게 될 것입니다.

프로그레시브 웹 애플리케이션은 기회입니다

처음에는 프로그레시브 웹 애플리케이션을 구현할 수 있는 최고의 솔루션을 모색하겠습니다. 이를 통해 더 많은 사람들이 점진적인 업그레이드 최적화에 대해 알게 되기를 바랍니다. 사람들이 기기에 집중할 때 같은 실수를 하지 않기를 바랍니다. 반응형 디자인은 웹사이트 구축 방식을 변화시켰습니다. 이제 웹 콘텐츠, 접근성, 성능 및 사용자에 대해 더 많이 생각하게 되었습니다. PWA(Progressive Web Apps)를 구축할 때 더 많은 사람들이 웹의 기본을 알 수 있도록 하고 싶습니다.

과거의 실수를 반복할 필요는 없습니다. PWA가 특정 장치에서만 작동하는 것은 실수입니다. PWA를 구축할 때 "애플리케이션" 자체보다는 "진보적인" 부분에 초점을 맞춰 보겠습니다.