기본 앱의 운명

2014–09 Vulture — Dick Knight (CC BY-NC-ND 2.0)

이제부터는 더 이상 기본 앱을 만들지 않을 것입니다. 앞으로 내 모든 앱은 점진적인 웹 앱이 될 것입니다. 프로그레시브 웹 앱은 기본 모바일 앱보다 모바일 장치에서 훨씬 더 원활하게 작동하도록 설계된 웹 응용 프로그램입니다.

"보다 원활하게"무엇을 의미합니까? 대부분의 웹 트래픽은 모바일 장치에서 비롯된 것으로 사용자는 매월 평균 0 ~ 3 개의 새 앱을 설치합니다. 즉, 사람들이 앱 스토어에서 새로운 앱을 찾는 데 많은 시간을 소비하지 않지만 웹에서 앱을 검색하고 사용할 수있는 많은 시간을 소비하고 있습니다.

프로그레시브 웹 응용 프로그램은 다른 웹 응용 프로그램과 마찬가지로 시작되지만 사용자가 앱으로 돌아와서 더 정기적으로 앱 사용에 관심이 있다는 사용법을 보여 주면 브라우저는 사용자를 홈 화면에 앱을 설치하도록 초대합니다. PWA는 기본 앱과 같은 푸시 알림을 활용할 수도 있습니다.

이것이 흥미로운 곳입니다. 기본 앱과 마찬가지로 프로그레시브 웹 앱에는 자체 홈 화면 아이콘이 있으며이를 클릭하면 브라우저 크롬없이 앱이 시작됩니다. 이는 URL 표시 줄과 웹 탐색 UI가 없음을 의미합니다. 휴대 전화의 일반적인 상태 표시 줄과 앱을 거의 전체 화면으로 사용할 수 있습니다.

이것은 오랫동안왔다. 새롭게 등장하는 크로스 플랫폼 표준을 제외하고는 그 어떤 기술도 특히 새로운 것은 아닙니다.

일부 역사

iPhone 초기에는 앱 스토어가 없었습니다. Steve Jobs는 개발자가 표준 웹 기술을 사용하여 iPhone 앱을 구축하기를 원했습니다.

때로는 비전 전문가가 등장하지만 10 년 앞서 있습니다. 2 년 전을 되돌아 보면, 네이티브 앱이 대성공을 거두었 기 때문에 Steve Jobs의 iPhone 용 웹 앱 제작 권장 사항은 Forbes에서 "가장 큰 실수"라고 불렀습니다.

오늘을 되돌아 보면 그가 현재의 웹 표준의 기능보다 훨씬 앞서있는 것이 분명해 보입니다.

10 년 후, 모바일 웹 표준은 이제 개발자들이 네이티브 앱으로 찾은 많은 기능을 지원하며, 모바일 웹 애플리케이션에 대한 Steve Jobs의 독창적 인 비전은 이제 전 세계적으로 진지하게 추구되고 있습니다. Apple은 iOS 기기가 적합한 아이콘과 같은 것을 찾는 데 도움이되는 메타 태그를 사용하여 거의 처음부터 홈 화면에 추가 할 수있는 "apple-mobile-web-capable"웹 응용 프로그램을 지원했습니다.

다른 벤더들은 각각 모바일 웹 앱 기능을 선언하기 위해 자체 메타 태그 컬렉션을 생성하는 데 적합했지만 최근에는 크로스 플랫폼 사양이 도입되어 크로스 플랫폼 모바일 웹 앱이 마침내 현실화되고 있습니다.

표준을 구현하는 앱을 점진적 웹 애플리케이션이라고하며, 점진적 향상 또는 반응 형 앱과 같은 혼동되는 유사한 용어와 혼동되지 않습니다.

프로그레시브 웹 앱이란 무엇입니까?

프로그레시브 웹 앱은 모바일 용으로 설계된 웹 응용 프로그램입니다. 브라우저에서 사용자가 앱을 계속 사용하고 싶어하는 경우 홈 화면, 독 등에 설치하라는 메시지가 표시 될 수 있습니다. 그래도 자격을 갖추려면 특정 기준을 충족해야합니다.

  • HTTPS 여야합니다 (암호화 참조)
  • 필수 특성이있는 유효한 Manifest (Web Manifest Validator)
  • 서비스 담당자가 있어야합니다
  • 매니페스트 start_url은 항상 오프라인이어야합니다 (서비스 작업자 사용).
  • 자체 네비게이션을 제공해야합니다
  • 다른 화면 크기와 방향에 반응해야합니다

물론 오프라인 사용자를 위해 HTTPS 및 서비스 워커를 사용하는 것은 모든 최신 앱에 적합합니다.

많은 앱 빌더가 잊어 버린 것처럼 진보적 인 웹 애플리케이션을 빌드하는 경우 브라우저 크롬 및 브라우저 탐색 제스처없이 애플리케이션을 탐색 할 수 있어야합니다. 휴대 기기에서는 앱에 대한 내비게이션을 구축했다고 가정합니다.

예를 들어 정보 페이지가있는 경우 해당 페이지에 앱 UI에 대한 링크가 다시 있어야합니다. 그렇지 않으면 사용자가 기본 앱 UI로 돌아가려면 앱을 닫았다가 다시 열어야합니다.

프로그레시브 웹 애플리케이션 사용법

웹 전체에 걸쳐 진보적 인 웹 응용 프로그램을 구축하는 방법에 대한 많은 정보가 있지만 그 중 대부분은 구식이며 많은 응용 프로그램에는 응용 프로그램을 작성하는 데 알아야 할 내용의 일부만 포함되어 있습니다. 고쳐 봅시다.

HTTPS 사용

HTTPS를 사용하려면 다음이 필요합니다.

  • 웹 서버 (DigitalOcean을 추천합니다)
  • SSL 인증서
  • 강력한 Diffie-Hellman 그룹 (sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048)
  • 웹 서버에 대한 TLS / SSL 구성 (우분투의 Nginx에 대한 지침)

매니페스트

매니페스트 파일은 manifest.json이라고하며 매우 간단합니다. 이름 (홈 화면 아이콘의 짧은 이름 및보다 완전한 이름의 선택적 이름), 시작 URL 및 다양한 아이콘 목록으로 구성되어 있으므로 다양한 플랫폼에 필요한 다양한 아이콘 크기를 지원할 수 있습니다. Android + iOS의 경우 다음이 필요합니다.

  • 36x36
  • 48x48
  • 60x60 (Apple touch 아이콘 iPhone)
  • 72x72
  • 76x76 (Apple touch 아이콘 iPad)
  • 96x96
  • 120x120 (Apple touch 아이콘 iPhone 망막)
  • 152x152 (Apple touch 아이콘 iPad 망막)
  • 180x180 (iOS 8 이상용 Apple touch 아이콘)
  • 192x192
  • 512x512

나는 잘 알려진 이름을 가지고 있기 때문에 애플 터치 아이콘을 골랐다.

apple-touch-icon-180x180.png

180x180은 특정 해상도로 대체 될 수 있습니다. 잘 알려진 이름을 사용할 필요는 없지만 태그를 포함하지 않은 경우 iOS는 잘 알려진 이름을 사용하는 경우 웹 앱의 루트 디렉토리에서 아이콘을 검색하여 아이콘을 찾을 수 있습니다.

iOS 아이콘은 투명도를 지원하지 않습니다.

샘플 manifest.json :

알아야 할 몇 가지 기능이 있습니다. theme_color는 Android에서 앱간에 전환 할 때 사용되는 상태 표시 줄 및 창 헤더 표시 줄의 색상을 설정합니다.

background_color는 스플래시 화면에서 사용되는 색상을 설정합니다. Android에서는 스플래시 화면이 name 속성 (긴 이름)과 background_color 상단의 큰 아이콘으로 구성됩니다.

매니페스트는 어디에나 없습니다

프로그레시브 웹 애플리케이션을 처음 구축했을 때 Android 용 Chrome에서 예상대로 작동한다는 사실에 감격했지만 Safari / iOS에서 살펴보면 작동하지 않는 것 같습니다. 그 이유는 모바일 Safari가 10 년 동안 사용자 정의 태그를 사용하여 이러한 기능을 지원하더라도 웹 매니페스트 사양을 아직 지원하지 않기 때문입니다.

따라서 지원되는 브라우저의 매니페스트 파일 외에도 iOS 용 특수 메타 태그가 필요합니다.이 태그부터 브라우저 크롬없이 앱을 실행합니다.

그러나 기억해야 할 태그가 많이 있으며 다른 방법이있을 수도 있습니다. 웹 매니페스트 폴리 필이 있으며 manifest.json 파일을 읽고 구형 모바일 브라우저, iOS 및 Windows Phone 및 Firefox OS에 대한 공급 업체별 태그를 추가합니다.

서비스 노동자

Service Worker는 최근 웹 플랫폼 사양으로, 사용자가 인터넷에 연결되어 있지 않아도 앱이 계속 작동하도록 리소스를 로컬로 캐시 할 수 있습니다.

네트워크 요청을 가로 채고 사용자가 오프라인 일 때 로컬 캐시에서 응답을 제공하여 작동합니다. 하지만 그보다 더 많은 것이 있습니다. 매우 정교한 저수준 API로, 사용자가 온라인이든 오프라인이든 사용자 환경을 최적화하기 위해 많은 작업을 수행 할 수 있습니다.

시작하기 위해 매우 간단한 고급 추상화를 권장합니다. UpUp이라는 작은 스크립트. UpUp 사용은 정말 간단합니다. UpUp 문서의 예는 다음과 같습니다.

content-url은 사용자가 오프라인 일 때로드 할 URL입니다. 이를 위해 앱의 루트 URL을 사용하면 정상적으로 작동합니다.

자산은 앱이 제대로 작동하기 위해 로컬로 캐시해야하는 파일입니다. 모든 이미지, 아이콘, CSS 및 기본 AJAX 요청 응답이 포함되어 있는지 확인하십시오. 보시다시피, 모든 파일 형식이 작동합니다.

결국 UpUp이 제공하는 것보다 오프라인 리소스 캐싱을보다 강력하게 제어 할 수 있습니다. 그 날이 오면 시작하는 데 도움이되는 훌륭한 교육 자료는 다음과 같습니다.

  • 무료 Google Udacity 과정
  • 자세한 내용은 서비스 작업자 요리 책.

테스팅

Chrome inspect로 실제 기기 디버깅

장치를 USB 케이블에 연결하십시오. Android 기기에서 USB 디버깅을 켭니다. 원격 디버깅 지침을 참조하십시오. 원격 디버깅을 사용하기 위해 Android 휴대 전화를 개발자 모드로 전환하는 방법을 알아 보려면 Google을 방문해야 할 수도 있습니다.

개발자 모드를 켜면 설정 옵션에 개발자 옵션이 표시 될 수 있습니다. 그것을 열고 USB 디버깅이 켜져 있는지 확인하십시오.

chrome : // inspect # devices를 방문하십시오. 검사 버튼을 누르면 앱을위한 완전한 개발 도구가 제공됩니다.

서비스 담당자 확인

chrome : // inspect / # service-workers를 방문하여 서비스 담당자가 제대로 작동하는지 확인하십시오.

홈페이지에 설치 확인

사용자 참여 확인을 건너 뛰고 항상 홈페이지에 설치 옵션을 받으려면 Chrome 플래그에서 '사용자 참여 확인 통과'를 사용 설정합니다.

chrome : // flags /

데스크톱에서 테스트하려면 "선반에 추가 사용"을 뒤집어 야합니다.

네이티브 앱은 아직 죽지 않았다

프로그레시브 웹 앱은 이제 기본 앱의 기능을 대부분 갖추고 있으며, 설치 마찰이 기본 앱보다 낮을 것으로 예상되며 더 이상 앱 스토어 게이트 키퍼에 대해 걱정할 필요가 없으며 30 %의 세금을 지불 할 필요가 없습니다. 앱 스토어에있는 특권으로 앱 판매

그러나 기본 앱에는 여전히 모바일 웹 앱이 오랫동안 갖지 못할 몇 가지 기능이 있습니다.

특히, 대부분의 센서 및 하드웨어 통합 사양은 대부분의 브라우저에서 지원이 제한적이거나 지원되지 않으며, 장치 방향 API와 같은 기본 기능조차도 다양한 브라우저에 여러 버전의 사양이 적용되어 약간의 까다로운 논리 또는 폴리 필이 요구됨에 따라 변경이 발생했습니다. 안전하게 사용하십시오.

아이러니하게도, 애플이 많은 진보적 인 웹 애플리케이션 기술을 개척했지만, iOS는 진보적 인 웹 앱 채택에있어 유일한 주요 장애물 인 것으로 보인다. 현재 서비스 직원을 지원하지 않지만 개발 중입니다.

고맙게도 iOS의 하이브리드 앱에 서비스 워커 지원을 추가하는 Cordova 플러그인이 있습니다.

즉, 모든 웹 브라우저 공급 업체가 특히 사용자에게 친숙한 방식으로 설치 프롬프트를 구현한다고 믿지는 않습니다. 오늘날 사양을 사용하면 사용자에게 앱을 설치하라는 메시지가 표시되거나 표시되지 않을 수 있으며, 앱 스토어에서 앱을 검색하면 기존 앱 스토어 프로세스를 통해 하이브리드 앱을 게시하지 않으면 찾을 수 없습니다.

단기적으로 iOS 기기의 격차를 메우기 위해 Cordova 또는 이와 유사한 것을 사용하지 못할 수도 있지만 Android 기기에서 사양을 신속하게 지원합니다. Chrome을 실행하는 최신 Android 휴대 전화가 있다면 Cordova 빌드를 사용하지 않고 앱이 작동 할 가능성이 큽니다.

애플 지원이 부족하다고 생각한다면 안드로이드가 전 세계 모바일 OS 시장의 86 %라는 사실을 기억하십시오. 전세계 86 %의 낮은 설치 마찰을 이용하기 위해 Cordova로 iOS를 폴리 필해야하는 경우에도 PWA를 구축하는 것이 좋습니다.

결론

단기적으로는 여전히 웹 표준으로는 사용할 수없는 일부 장치 API를 활용할 수있는 하이브리드 앱을 만들 수 있습니다.

첫 번째 진보적 인 웹 응용 프로그램을 구축 한 후에는 미래에 대한 희망이 있지만 완벽하지는 않다는 점도 알고 있습니다. 모든 장치 플랫폼에서 모든 것이 원활하게 작동하려면 시간이 걸립니다. 또한 사용자가 앱 스토어에서 익숙한 검색 기능 및 잘 알려진 설치 절차를 놓치게됩니다.

브라우저 공급 업체가 비전을 따라 잡으면 결국 기본 앱보다 점진적인 웹 응용 프로그램의 설치 환경이 훨씬 향상 될 것입니다. 상황이 그렇게 진행되고있는 것 같습니다.

확실히 네이티브 앱은 오래 지속되지만 Swift 또는 Java를 배우느라 바빠서 네이티브 앱을 만들 수 있다면 대신 JavaScript를 배우는 것이 좋습니다.

진보적 인 웹 앱을 사용 해보고 싶습니까? pwa.rocks를 확인하십시오.

편집 : 웹 플랫폼 락

웹 플랫폼으로 심각한 앱을 구축하는 것이 불가능한 방법에 대해 의견을 보내려고한다면 :

2004 년이 아니라 2016 년입니다. 웹 플랫폼은 먼 길을 왔습니다. 다른 사람들이 웹 플랫폼 용으로 구축 한 내용을 보려면“10 웹 애플리케이션 및 게임을 봐야합니다”를 읽으십시오.

아직도 확신하지 않습니까? “기본 앱이 실제로 파멸되는 이유 : 기본 앱이 파멸 됨 pt 2”를 읽으십시오.

이 기사는 서비스 워커의 iOS 상태를 업데이트하도록 편집되었습니다. 원래 애플은 구현하려는 의도를 암시했다고 말했다. 상태가 "개발 중"으로 변경되었습니다.

크로스 플랫폼 범용 JavaScript 애플리케이션을 구축하고 싶으십니까?

Eric Elliott와 함께 JavaScript 배우기

Eric Elliott는“JavaScript 응용 프로그램 프로그래밍”(O'Reilly) 및“Eric Elliott로 JavaScript 배우기”의 저자입니다. 그는 Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC 및 Usher, Frank Ocean, Metallica 등을 포함한 최고의 레코딩 아티스트를위한 소프트웨어 경험에 기여했습니다.

그는 세계에서 가장 아름다운 여성과 함께 샌프란시스코 베이 지역에서 대부분의 시간을 보냅니다.