슈퍼 진보적 인 웹 앱
슈퍼 진보적 인 웹 앱
SuperPWA는 WordPress 웹 사이트를 진보적 인 웹 앱으로 쉽게 변환하는 데 도움이됩니다.
웹 사이트 방문»
보고 버그 · WordPress 플러그인 · 리뷰 · FAQ · 기부금
Super PWA Github 저장소에 오신 것을 환영합니다
⚡️ Demo : superpwa.com 비디오 확인 작동 방식을 알 수 있습니다.
진보적 인 웹 앱이란 무엇입니까?
PRWA (Progressive Web Apps)는 웹 사이트와 모바일 앱 사이에 중간 기반을 만드는 새로운 기술입니다. 그들은 일반 앱 (웹 앱)처럼 전화기에 설치되며 홈 화면에서 액세스 할 수 있습니다.
사용자는 홈 화면에서 앱을 시작하여 웹 사이트로 돌아와서 앱과 같은 인터페이스를 통해 웹 사이트와 상호 작용할 수 있습니다. 귀환 방문자는 거의 영향을 미치는 로딩 시간을 경험하고 PWA의 큰 성능 이점을 누릴 것입니다!
Super Progressive Web Apps는 WordPress 웹 사이트를 쉽게 진보적 인 웹 앱으로 쉽게 변환 할 수 있습니다!
프로젝트를 지원하십시오
당신이 매우 흥분하고 작은 방식으로 우리를 지원하고 싶다면, 저장소 주연 및/또는 공유를 고려하십시오! 이것은 우리가 공동체를 알고 성장하는 데 도움이됩니다.
또한 소셜 미디어를 팔로우하고 우리에 대해 공유함으로써 우리를 지원할 수 있습니다.
? 설치
Superpwa a️가 설치되면 지원되는 모바일 장치에서 웹 사이트를 탐색하는 사용자는 "화면 하단에서 홈 화면 추가"통지를 볼 수 있으며 장치의 홈 화면에 웹 사이트를 설치할 수 있습니다. 방문한 모든 페이지는 장치에 로컬로 저장되며 오프라인 상태 일 때에도 읽을 수 있습니다!
SuperPWA는 구성하기 쉽고 프로그레시브 웹 앱을 설정하는 데 1 분도 걸리지 않습니다! Superpwa는 생성하는 모든 데이터베이스 항목 및 파일을 제거하여 깨끗한 제거를 수행합니다. 실제로, 처음으로 수동으로 저장할 때까지 기본 설정은 데이터베이스에 저장되지 않습니다. 계속해서 시도해보십시오.
진보적 인 웹 앱 최소 요구 사항
홈 화면에 추가 및 프로그레시브 웹 앱이 다른 브라우저에서 작동하는 방법에 대한 비디오
Android 용 Google Chrome |
Android 용 Mozilla Firefox |
Android 용 Microsoft Edge |
Android 용 Samung 인터넷 |
iOS의 PWA -Safari 브라우저 |
|---|
브라우저에서 PWA를 테스트하기위한 자세한 문서
- Android 용 Chrome의 PWA
- 데스크탑의 PWA- 크롬
- iOS 장치의 PWA- 사파리 브라우저
- Android 용 Microsoft Edge 브라우저의 PWA
- Android 용 Samsung 인터넷 브라우저의 PWA
? 상자 안에있는 것
Super Progressive Web Apps의 현재 기능은 다음과 같습니다.
- 웹 사이트의 매니페스트를 생성하여 웹 사이트 헤드에 추가하십시오.
- 프로그레시브 웹 앱의 응용 프로그램 아이콘을 설정하십시오.
- 프로그레시브 웹 앱의 스플래시 스크린의 배경색을 설정하십시오.
- 귀하의 웹 사이트에는 지원되는 브라우저에서 액세스 할 때 "홈 화면 추가"통지가 표시됩니다.
- Cachestorage API를 사용한 페이지의 공격적인 캐싱.
- 캐시 된 페이지는 사용자가 오프라인 상태라도 제공됩니다.
- 사용자 정의 오프라인 페이지 설정 : 캐시에없는 페이지에 액세스하고 사용자가 오프라인 상태 인 경우 사용자가 원하는 페이지를 선택하십시오.
- 새로운 버전 1.2 : 테마 컬러 지원.
- 버전 1.2 : 이제 응용 프로그램 이름과 응용 프로그램 짧은 이름을 편집 할 수 있습니다.
- 새로운 버전 1.2 : PWA의 시작 페이지를 설정하십시오.
- 새로운 버전 1.2 : 시작 페이지의 AMP (Accelerated Mobile Pages) 버전을 설정합니다. 지원되는 플러그인 : WordPress 용 AMP, WP 용 AMP, 더 나은 AMP, AMP 우위, WP AMP.
- 새로운 버전 1.3 : 고품질 스플래시 화면에 대한 지원이 추가되었습니다. 이제 프로그레시브 웹 앱의 스플래쉬 화면에 512x512 아이콘을 설정할 수 있습니다.
- 버전 1.3 : Super Progressive Web Apps는 이제 콘텐츠 업데이트를 설명하고 웹 사이트를 업데이트 할 때 캐시를 업데이트합니다.
- 버전 1.3의 새로운 새로운 서비스 작업자 업데이트 처리.
- 버전 1.4의 새로운 새로운 : 이제 PWA의 기본 방향을 설정할 수 있습니다. "Any"(장치 방향을 따르십시오), "초상화"및 "풍경"중에서 선택하십시오.
- 버전 1.4의 새로운 새로운 : 이제 Manifest에서 Theme_Color 속성을 설정할 수 있습니다.
- 버전 1.5의 새로운 새로운 : 푸시 알림을위한 OneSignal 통합.
- 버전 1.6의 새로운 : WordPress 다중 사이트 네트워크 호환성.
- 새로운 버전 1.7 : Superpwa의 추가 기능이 여기에 있습니다! PWA에서 오는 방문을 추적하기 위해 UTM 추적 추가 기능이 있습니다.
- 버전 1.8의 새로운 새로운 : OneSignal의 호환성 문제가 해결되었습니다!
- 버전 1.8의 새로운 새로운 추가 기능 : Apple Touch 아이콘을 Apple Touch 아이콘으로 설정하는 Apple Touch 아이콘.
- 버전 2.0 : SuperPWA는 이제 하위 폴더에 설치된 WordPress와 호환됩니다.
- 버전 2.0의 새로운 새로운 : 이제 SuperPWA 설정에서 디스플레이 속성을 설정할 수 있습니다.
- 버전 2.1.1의 새로운 새로운 : Maskabale 아이콘 지원.
? 다가오는 기능 :
PWA에 대한 장치 및 브라우저 지원
| 크롬 | 파이어 폭스 | 가장자리 | 오페라 | 원정 여행 | 삼성 | UC 브라우저 | 용감한 |
|---|
| 홈 화면에 추가하십시오 | | | | | | | | |
| 서비스 근로자 | | | | | | | | |
| 웹 푸시 및 알림 | | | | | | | | |
| 지불 요청 API | | | | | | | - | - |
| 메타 테마 색상 | | - | - | - | - | | - | |
지원되는 베타 또는 개발의 부분 지원
프로그레시브 웹 앱에는 매니페스트 및 서비스 작업자를 지원하는 브라우저가 필요합니다. 현재 Google Chrome (버전 57+), Android 용 Chrome (62), Mozilla Firefox (57), Android 용 Firefox (58)는 PWA를 지원하는 주요 브라우저입니다.
이 목록은 빠르게 성장하고 있으며 올해 말까지 대부분의 주요 브라우저에서 지원 될 것입니다.
진보적 인 웹 앱을 구축하는 이유는 무엇입니까?
WordPress 웹 사이트를 프로그레시브 웹 앱으로 변환하는 방법
WordPress 설치
- WordPress Admin> 플러그인을 방문하십시오> 새로운 추가
- 슈퍼 프로그레시브 웹 앱을 검색하십시오
- " 지금 설치 "를 클릭 한 다음 " 활성화 "슈퍼 프로그레시브 웹 앱
수동으로 설치하려면 :
- 서버의 초고 프로그램 Web-Apps 폴더를/wp-content/플러그인/디렉토리에 업로드하십시오.
- WordPress Admin> 플러그인 으로 이동하십시오
- 목록에서 Super Progressive Web Apps 플러그인을 활성화하십시오.
프로그레시브 웹 앱 사용자 정의
프로그레시브 웹 앱은 활성화시 기본 설정으로 테스트 할 준비가되어 있어야합니다. 당신은 그것을 더 커스터마이징하고 진정으로 자신의 것을 만들 수 있습니다.
- WordPress Admin> " Superpwa "> 설정 으로 이동
- 모바일 장치에서 PWA를 열 때 스플래시 화면의 배경색을 설정하십시오.
- 응용 프로그램 아이콘을 설정하십시오. PWA가 모바일 장치의 홈 화면에 추가 될 때 PWA의 아이콘이됩니다. 아이콘은 PNG 이미지이고 정확히 192 x 192 픽셀 크기 여야합니다.
- 오프라인 페이지를 설정하십시오. 이 페이지는 사용자가 오프라인 상태이고 요청한 페이지가 이미 캐시되지 않은 경우 표시됩니다. 이상적으로는 전용 WordPress 페이지를 만들어 여기에 설정해야합니다. 당신이 만든 페이지 내에, 당신은 "오프라인 상태이고 요청한 페이지를 지금 당장 사용할 수없는 것처럼 보인다. 온라인에 있으면 다시 다시 확인하십시오."
- "설정 저장"을 클릭하십시오.
진보적 인 웹 앱을 테스트합니다
- 지원되는 장치에서 지원되는 브라우저를 엽니 다 (예 : Android 장치의 Chrome for Android (62 이상))
- 웹 사이트를 입력하고 완전히로드 될 때까지 기다리십시오
- 응용 프로그램 아이콘이있는 팝업과 "홈 화면 추가"를 읽는 버튼이 표시됩니다.
- 클릭하면 PWA가 홈 화면에 추가됩니다. 설치가 완료 될 때까지 기다리십시오.
- 홈 화면으로 가서 PWA를여십시오. 원하는 경우 몇 페이지를 찾아보십시오. 앱을 닫으십시오.
- 인터넷에서 연결을 끊고 이제 PWA를 다시 엽니 다. 이전에 탐색 한 모든 페이지를 볼 수 있어야합니다.
- 전에 방문하지 않은 페이지를 방문해보십시오. Superpwa 설정에서 "오프라인 페이지"로 설정 한 페이지가 표시됩니다.
? 우리에 대해
우리는이 아이디어에 대해 흥분한 듀오입니다. 우리의 사명은 간단합니다. 사용자가 홈 화면에 갖고 싶어하는 멋진 PWA를 구축하도록 도와줍니다. 우리가 PWA에 대해 처음 들었을 때 우리는 그것에 대해 모든 것을 배우고 싶었습니다. 우리는 학습 시간을 많이 보냈으며 그것을 세상과 나누고 싶어합니다. 건설적인 피드백과 지원을주십시오.
⛷️ 지원
이것은 슈퍼 프로그레시브 웹 앱을위한 개발자의 포털이며 지원에 사용해서는 안됩니다. 지원 포럼을 방문하십시오.
? 보고 버그
당신이 막히면, 우리는 당신의 등을 보러 왔습니다! 질문이 있거나 기능이 필요한 경우 새로운 지원 주제 티켓을 엽니 다. 우리는 귀하의 의견을 듣고 매우 기쁩니다. WordPress 웹 사이트를위한 최고의 프로그레시브 웹 앱을 구축하는 데 진심으로 도움을 드리고자합니다!
? 기여
누구나 슈퍼 PWA에 기여하여 슈퍼를 만들 수 있습니다.
기여할 수있는 다양한 방법이 있습니다.
- Github에 대한 문제를 제기하십시오.
- 소셜 미디어에서 우리와 함께 참여하십시오
트위터에서 공유하십시오
Facebook에서 공유하십시오
LinkedIn에서 공유하십시오
? changelog
superpwa.com/changelog/.
이모티콘 크레딧 : 이모 지프 디아 소셜 미디어 아이콘 크레딧 : Flaticon
⬆ 위로 돌아갑니다
