Magento 2의 Progressive Web Apps 또는 PWA는 무엇입니까?

• Magento가 Progressive Web Application 플랫폼이되고 있다는 것은 무엇을 의미합니까?
• 마 젠토에서 PWA의 코드 구조는 무엇입니까?
• REST API 및 PWA와의 거래는 무엇입니까?

Progressive Web Apps는 무엇입니까?

• 모바일 앱처럼 보이고 작동합니다.
• 받아 활용 의 기본 모바일 장치의 기능을 필요로하지 않고 , 앱 스토어를 방문하는 최종 사용자를 구매하고 다운로드 를 로컬 .

왜 PWA입니까?

• 빠른
• 보안 (두 번째 마지막 주제)
• 반응 형
• 크로스 브라우저 호환
• 오프라인 모드 (답변의 마지막 주제 확인)
• 모바일“설치”
• 공유 가능한 컨텐츠

이 답변은 또한 PWA와 함께 Magento 2.3 설치를 다룹니다.

Flipkart의 예를 들어 봅시다

인도 최대의 전자 상거래 사이트 인 Flipkart 는 웹 사이트와 기본 앱을 프로그레시브 웹 애플리케이션으로 결합하여 전환율을 70 % 증가 시켰습니다.

플립 카트

접근, 접근법, 진입, 가까이가는 길, 친근 책, 착륙 진입, 닥치다, 가까이 가다, 다가 가다, 접근시키다, 착수하다, 연구하다, 다가오다, 가깝다,들이 닥치다

1. 프로그레시브 웹 앱 Flipkart Lite 개발
2. 더 빠른 로딩 시간을위한 서비스 작업자 추가
3. 초당 60 프레임의 부드러운 탐색 및 스크롤
4. “홈 화면에 추가”프롬프트를 생성하여 사용자가 모바일 웹 페이지를 홈 화면에 추가하도록 권장

   ---

결과

Flipkart, 새로운 프로그레시브 웹 앱으로 전환율 70 % 향상

Flipkart는 오프라인 모드에서도 작동합니다

• 서비스 작업자는 모든 네트워크 요청을 가로 채고 사용자가 오프라인 일 때에도 캐시의 응답을 제공하도록 스크립트를 작성할 수 있습니다.
• 라이브러리 래퍼 서비스 노동자 와 같은 간단한 패턴을 사용 할 수 있습니다 NetworkFirst, CacheFirst또는 NetworkOnly. SW-Toolbox는 찾아보기 페이지와 마지막으로 방문한 제품 페이지에 이전 검색 결과를 저장하기 위해 Flipkart 앱에서 사용 되는 LRU 캐시를 제공 합니다.
• 도구 상자에는 오래된 콘텐츠를 제거하는 데 사용하는 TTL-based 캐시 무효화 메커니즘 도 있습니다. 서비스 워커는이를 가능하게하는 저수준 스크립트 가능 프리미티브를 제공합니다.

하지만 ...하지만 ...하지만 ...

Magento PWA Studio 란 무엇입니까?

• • Magento PWA Studio 프로젝트는 Magento 2 위에서 PWA 매장 의 개발, 배포 및 유지 관리를 지원하는 개발자 도구 모음입니다.

Magento PWA Studio 프로젝트는 다음 도구를 제공합니다.

---

PWA 모듈

• 여기에는 헬퍼, 서버 측 기능과 같은 모듈이 있으며 Magento PWA Studio를 사용하여 만든 모든 테마의 기초로 작동 합니다.

PWA-buildpack -

• Buildpack은 WebpackMagento PWA 테마 개발에 사용되는 플러그인 및 도구 세트입니다 .

• 또한 Magento 2 플랫폼의 로컬 개발 환경을 설정하고 구성하는 데 사용됩니다.

다음과 같은 도구가 포함되어 있습니다.

• PWADevServer
• 마 젠토 리졸버
• 마 젠토 루트 컴포넌트 플러그인
• 마 젠토 레이아웃 로더
• 서비스 워커 플러그인

페레 - 페레의 집합입니다React components같은 젠토 고유의 기능을 처리하기 위해 만든routing,root-components등 레이아웃 처리기, 제품 목록, 가격 표시는,

Venia 테마 -venia-concept젠토 PWA 스튜디오를 사용 젠토에 의해 생성 된 데모 테마입니다. 현재 사용 가능한 모든 기능, 워크 플로우 및 페이지를 보여줍니다.

PWA Studio는 아닙니다

• 마젠 토의 새로운 출시

• 교체 모든 프런트 엔드의

• 데스크탑 애플리케이션

PWA Studios에서 사용되는 도구 및 라이브러리

웹팩

• Webpack의 주요 기능은 프로젝트 모듈의 종속성에서 하나 이상의 번들을 작성하는 것입니다.

앱 셸

• 총 크기가 작습니다
• 초기 부하가 세 개의 파일을 요청 login.html, shell-1234.js,3456.js
• 초기로드는 다음을로드해야합니다. Shell + Router + content
• 쉘은 Page Shell 접근 방식보다 이전에 볼 수 있습니다.

페이지 쉘

• 총 크기가 더 큽니다 (예 : 대시 보드 내용이 dashboard-1234.js 및 4567.js에 있음)

• 앱이 오프라인 준비에 더 오래 걸립니다.

• 초기로드는 두 파일 만 요청합니다 : login.html,login-2345.js

• 초기로드는 다음을로드해야합니다. Shell + content

• 는 shell + content앱 쉘 방식보다 볼 이전.

쉘과 컨텐츠가 두 개의 요청으로 분리 된 경우 하이브리드 방식을 사용할 수 있습니다 (예 : 관리 페이지 참조). 이것은 내용이 쉘보다 훨씬 큰 경우에 적합하며 쉘은 이전에 볼 수 있어야합니다.

반응

• 사용자 인터페이스 구축을위한 JavaScript 라이브러리.

리덕스

• 웹 애플리케이션에서 상태를 관리하는 데 사용되는 JavaScript 라이브러리.

GraphQL

• 클라이언트 측의 데이터 쿼리 언어 및 서버 측의 서비스 계층

마젠 토의 GraphQL

인증 및 스키마

프론트 엔드 쿼리 양 줄이기

위상 렌더

데스크탑 브라우저 호환성

• 지원되지 않음 : IE, Safari

모바일 브라우저 호환성

지원되지 않음 : Android Webview, IE, Safari

보다 안전한 PWA

• 웹 개발자는 Googlehttps 대신 웹 사이트에 얼마나 많은 웹 사이트를 권장 하는지 알 수 있습니다 HTTP. 사이버 위협 은 항상 웹 및 앱 개발자에게 가장 중요합니다 .
• 과거에는 HTTP사용자 정보를 보호하기에 충분히 안전하지 않았습니다.
• 이제 웹 사이트가 프로그래밍되고 HTTPs있으며 안전한 환경에서 Progressive Web App을 쉽게 시작할 수 있습니다.
• 신용 카드 정보 또는 연락처 와 같은 개인 정보를 PWA에 입력하는 동안 보안이 유지되고 안심할 수 있습니다.

PWA-오프라인 모드

오프라인 Wikipedia 응용 프로그램 은 응용 프로그램 셸 모델 을 사용하는 PWA 의 좋은 예입니다.

• 반복 방문시 즉시로드되지만 JS를 사용하여 컨텐츠를 동적으로 가져옵니다.
• 그런 다음이 콘텐츠는 나중에 방문 할 수 있도록 오프라인으로 캐시됩니다.

Progressive Web App은 의심 할 여지없이 웹 개발의 미래입니다. 앞으로 전자 상거래 사이트, 식당 및 미디어 소스는 기본 앱에서 프로그레시브 웹 앱으로 전환 될 것입니다. 그러나 아직 초기 단계에있는 많은 개발자들은 PWA가 제공하는 기회를 최대한 활용할 수있는 방법을 적극적으로 찾고있을 것입니다.

PWA로 Magento 2.3 설치를 시작할 수 있습니다

1. DIR / var / www / html /에 다음 명령을 입력하십시오 (m203은 내 Magento 2.3 디렉토리).

composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m203

2. 커맨드 라인으로 Magento를 설치하십시오 :

bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin --admin-email=admin@admin.com --admin-user=admin --admin-paassword=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. PWA Venia 테마 의 부모가 될 기본 pwa 테마를 만듭니다 .

• 지금은 기본 pwa 테마 저장소를 복제 할 수 있습니다. https://github.com/magento-research/theme-frontend-pwa

4. 디렉토리를 app/design/frontend/Magento/pwa만들고 여기에 기본 테마의 모든 파일과 디렉토리를 복사하십시오.

• 기본 테마를 사용할 수 있는지 여부를 확인할 수 있습니다.

• Run: php bin/magento setup:upgrade

• Magento Admin-> Content-> Themes로 이동하십시오.

5. PWA 스튜디오 프로젝트를 다운로드하십시오.

6. Magento 설치 루트 디렉토리로 이동하여 프로젝트의 모듈 디렉토리 (pwa-studio / packages / pwa-module)에 링크 된 Pwa symlink 폴더를 만듭니다.

• 이 디렉토리에서 내 명령을 실행했습니다- / var / www / html / m230

• 이것은 pwa 다운로드 소스가 / var / www / html / PWA / 인 디렉토리입니다.

ln -s /var/www/html/PWA/pwa-studio-master/packages/pwa-module app/code/Magento/Pwa

7. 테마 디렉토리도 연결합니다. Magento 설치의 루트 디렉토리로 이동하여 프로젝트의 모듈 디렉토리 (pwa-studio / packages / venia-concept)에 연결되는 Pwa symlink 폴더를 만듭니다.

ln -s /var/www/html/PWA/pwa-studio-master/packages/venia-concept app/design/frontend/Magento/venia

8. 이제 pwa-studio 프로젝트의 venia-concept 디렉토리 .env.dist로 이동하여 새 .env파일 로 복사 한 후 URL을 사용하여 변수를 Magento 개발 저장소에 업데이트하십시오.

cd /var/www/html/PWA/pwa-studio-master/packages/venia-concept

cp .env.dist .env

9. venia 테마 및 Pwa 모듈 설치 :

run: php bin/magento setup:upgrade

우리는 venia 테마가 성공적으로 설치되었음을 볼 수 있습니다.

10.에서 Venia 테마 구성 admin->Content->Configuration

11. 경로 ( /var/www/html/PWA/pwa-studio-master) 실행으로 이동 합니다.

npm install

또는

npm install webpack-dev-server -g

12. 그리고 마지막으로 /var/www/html/PWA/pwa-studio-master/packages/venia-concept

npm start

축하합니다! Venia 테마 프로젝트를위한 개발 환경을 설정했습니다.

PWA-프로그레시브 웹 애플리케이션은 일반적으로 사용자가 리치 웹을 경험하는 웹 애플리케이션입니다. 방법으로 :

• 신뢰성 -즉시로드하고 오프라인 모드에서도 사용할 수 있습니다.
• 빠른 - 사용자가 어떤 스크롤이나 애니메이션 정크없이 또한 상호 작용이 원활하고, 상호 작용하는 방법이다.
• 참여 -응용 프로그램이 신뢰할 수 있고 빠르면 두 지점 위에 표시된 것처럼 분명히 더 많은 사용자 경험을 제공하고 자연스러운 응용 프로그램처럼 느껴집니다.

"마 젠토가 프로그레시브 웹 애플리케이션 플랫폼이되고 있다는 것은 무엇을 의미합니까?"

magento는 2.3 버전 릴리스를 준비하면서이 "PWA"기능을 포함하여 사용자 상호 작용 방식으로 프론트 엔드를보다 효율적으로 만듭니다.

REST API 및 PWA와의 거래는 무엇입니까?

magento가 "PWA"를 사용함에 따라 "GraphQL"api로 "REST / SOAP"의 프론트 엔드 개발 측 API 대안을 제공하기 위해 "GraphQL API"도 추가하고 있습니다.

"PWA"및 "magento2.3 공개 상거래"의 새로운 기능에 대한 자세한 내용 은이 magento의 공식 페이지를 방문하십시오 .

프로그레시브 란 사용자가 웹 사이트를 탐색 할 때 응용 프로그램이 관련 데이터 및 자산과 함께로드됨을 의미합니다. 그 결과 속도, 유용성, 오프라인 작동 및 장치 통합이 향상되어 최종 사용자 경험이 향상됩니다.

웹 은 웹 언어 (HTML, CSS, JavaScript)로 작성되었음을 의미합니다. 이를 통해 iOS 또는 Android와 같은 하나의 플랫폼으로 제한되는 기본 앱을 만들지 않고도 더 많은 앱과 유사한 기능을 제공하는 사이트를 만들 수 있습니다.

응용 프로그램 은 구매자의 장치 또는 컴퓨터에 코드를 설치하고 실행한다는 의미입니다. 이렇게하면 과거의 단일 페이지 JavaScript 앱보다 속도와 기능이 향상됩니다.

PWA는 기본적으로 일반 웹 페이지와 모바일 앱이 혼합되어있어 웹에서 모바일 앱과 유사한 경험을 제공합니다.

Magento는 Progressive Web Application 플랫폼이되고 있습니다. 즉, Magento는 온라인 상점을 점진적 웹 응용 프로그램으로 구축하기위한 도구 모음을 만들고 있습니다. 이 도구는 개발자가 Pagent 기술을 익히고 초고속 PWA 프론트 엔드를 구축하며 Magento Marketplace에서 재사용 또는 판매를위한 PWA 구성 요소 및 확장을 만드는 데 도움이됩니다. Magento는이 도구 모음을 Magento PWA Studio라고 부릅니다.

https://github.com/magento-research/pwa-studio 에서 코드 구조를 확인할 수 있습니다.

Magento PWA는 PQ 용 REST API의 대안으로 GraphQL 을 사용하고 있습니다.

Magento PWA에 대한 자세한 내용은 다음 링크를 참조하십시오.

• https://magento-research.github.io/pwa-studio/
• https://community.magento.com/t5/Magento-DevBlog/Introducing-Magento-PWA-Studio/ba-p/74636
• https://brandastic.com/ideas/magento-progressive-web-apps/
• https://www.monsoonconsulting.com/blog/progressive-web-apps-magento

• Progressive Web Apps는 설치 가능한 모바일 앱과 웹 사이트 사이의 중간 지점입니다. 2019 년에는 데스크톱보다 모바일 장치에서 인터넷 트래픽이 더 많이 발생할 것으로 예상됩니다. PWA는 웹 사이트의 모양과 느낌을 개선하여 전환율을 높입니다.

PWA, Magento 판매자를위한 더 많은 트래픽, 더 높은 전환 및 더 빠른 페이지로드 시간을 유도하는 빠르고 마찰없는 "앱과 유사한"경험 제공

따라서 일반적으로 Magento는 모양과 느낌을 전환하여 전환을 증가시킵니다. 자세한 내용은 여기를 참조하십시오 .

• PWA는 일반적으로 기본 앱과 거의 동일한 수준의 성능과 유용성을 가진 JavaScript, CSS 및 HTML로 구축됩니다. PWA에는 다음과 같은 특징이 있습니다.

  1. 프로그레시브 코드베이스 (종종 React J와 같은 구성 요소)가있는 대부분의 브라우저 및 장치 (모바일 및 데스크탑)와 함께 작동합니다
  2. 반응 형 디자인을 사용하여 모든 화면과 폼 팩터에 적합 서비스 워커를 활용하여 오프라인 연결을 가능하게합니다 (HTTPS 필요)
  3. 푸시 알림과 같은 재 참여 도구를 활용하는 앱과 유사한 환경 제공
  4. 사용 된 리소스를 설명하기 위해 웹앱 매니페스트를 활용

자세한 내용은 여기를 참조하십시오.

• SOAP (Simple Object Access Protocol) 및 REST (Representational State Transfer)는 가장 일반적인 웹 서비스 통신 프로토콜입니다. REST는 대부분 SOAP보다 선호됩니다 ( 여기 설명 ). 따라서 PWA와 같은 새로운 기술과 함께 REST API를 함께 사용하는 것이 합리적입니다.

질문의 일부에 대해서만 답변하지만 더 많은 Magento 2에 특정합니다.

향후 Magento 2.3 릴리스 덕분에 PWA를보다 쉽게 ​​구축 할 수 있습니다.

https://www.degdigital.com/insights/magento-2-3/

이 기사에서 인용 :

PWA

Progressive Web App은 해당 기능을 사용할 수없는 장치에서 "프로그레시브"확장되는 최신 기술 기능을 활용하도록 개발 된 응용 프로그램입니다. 또한 인터넷 서비스가 고르지 않거나 존재하지 않을 때 오프라인 모드에서 웹 사이트를 부분적으로 또는 완전히 사용할 수 있도록 데이터를 캐싱 할 수 있습니다. 이는 일반적으로 백엔드 애플리케이션과는 별개의 최신 JavaScript 프레임 워크 / 스택으로 웹 사이트의 프런트 엔드를 작성하여 수행됩니다. 이 JavaScript 애플리케이션은 새로운 (ish) 브라우저 기능을 사용하여 위에서 언급 한 작업을 수행 할 수 있습니다.

Magento는 이에 대한 여러 가지 이점을 인식하고 2017 년 말 PWA Studio를 구축하려는 노력을 발표했습니다. PWA Studio에는 Magento의 프론트 엔드 용 PWA를 개발 및 배포하는 도구가 포함됩니다. PWA Studio와 함께 경량 (기능이 충분하지 않은) 데모 사이트가 제공됩니다. 즉각적인 이점은 프론트 엔드 성능이 크게 향상되고 새로운 Magento 프론트 엔드 개발자를 온 보딩하는 속도가 거의 10 배 증가한다는 것입니다.

• 관련 콘텐츠 : PWA가 있으며 모든 것이 바뀌고 있습니다

GraphQL

GraphQL은 API 사용을위한 쿼리 언어입니다. PWA가 증가함에 따라 더 적은 양의 데이터를 확보하고 더 적은 API 요청을해야합니다. GraphQL의 쿼리 언어는 요청자가 엔티티에 대해 제한된 속성 서브 세트를 리턴하도록 요청함으로써 (대부분의 응답이 적음) 요청을 체인화 할 수있게합니다 (작은 수의 요청).

Magento는 현재 서비스 계약을 사용하는 REST 및 SOAP API 요청을 지원합니다. 그러나 GraphQL을 지원하기 위해 Magento는 Query API에 직접 인터페이스하는 완전히 새로운 계층을 작성하고 있습니다. GraphQL 구현은 PWA 프론트 엔드가 필요한 데이터를 검색하는 방법에 대한 토대가 될 것입니다.

프로그레시브 웹 애플리케이션은 웹 브라우저 기능을 사용하며 사용자에게 경험과 같은 모바일 앱을 제공합니다.

브라우저 탭에서 개발되며 마찰이 적은 사용자 경험으로 페이지를 더 몰입 적으로 만듭니다. 응용 프로그램처럼 작동하고 느껴지는 웹 사이트를 만드는 웹 기술입니다.

사용자는 브라우저 선택에 관계없이 기본 응용 프로그램과 같은 Progressive Web Application을 시작할 수 있습니다.

데모 테스트를 원하시면 다음 링크를 방문하십시오 : 여기를 클릭하십시오

2017 년 I / O 2017 I / O 2017 년에 출시 된 Google 제품입니다 : https://www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

HTML 기반 웹 사이트입니다.

캐시를 장치에 저장하여 오프라인에서도 사용할 수 있습니다.

그러나 처음 방문 할 때는 느리고 두 번째 방문 중에는 느려질 수 있습니다.

기기가 인터넷에 연결되면 업데이트되므로 APP와 같은 새로운 것을 업데이트 할 필요가 없습니다.

누군가가 무언가를 오프라인으로 게시하면 장치가 인터넷을받을 때 서버에 대한 모든 전자 메일을 트리거합니다.

결국, 아이폰 / 안드로이드 앱을 만들 필요가 없습니다.

제한 사항 HTML 파일 만 지원합니다. 따라서 장치는 HTML을 지원해야합니다.

There is no store to search PWA application.

Login with FB or else will not be worked.

Not supported in IE.

PWA 설정 (Linux OS)

1 단계 : magento 2.3.1 설치

2 단계 : 노드 설치 / 업그레이드

노드를 업그레이드하기 위해 npm에서 n 모듈 사용

sudo npm install n -g

안정적인 최신 버전 :

sudo n stable

최신 버전 :

sudo n latest

3 단계 : 실 설치 / 업데이트 :

sudo npm install --global yarn

sudo npm upgrade --global yarn 

4 단계 : Node-gyp 설치-Node.js 기본 애드온 빌드 도구

sudo npm install -g node-gyp

5 단계 : PWA Studio 리포지토리 복제

html 루트로 이동하여 다음을 실행하십시오.

git clone https://github.com/magento-research/pwa-studio.git

이것을 실행하면 pwa-studio 폴더가 나타납니다.

6 단계 : PWA Studio 종속성 설치

sudo yarn install

7 단계 : Magento 백엔드 서버 지정

Under the packages/venia-concept directory, copy .env.dist into a new .env file:

명령 예 :

sudo cp packages/venia-concept/.env.dist packages/venia-concept/.env

.env 파일 변경 (관리 URL이 아닌 magento URL 임) :

MAGENTO_BACKEND_URL="https://release-dev-231-npzdaky-zddsyhrdimyra.us-4.magentosite.cloud/"

8 단계 : 이제 빌드 작성

sudo yarn run build

9 단계 : 서버 실행

sudo yarn run watch:venia

Venia 상점 첫 화면 개발 환경 만 시작합니다.

sudo yarn run watch:all

Venia 핫 리로드 및 동시 Buildpack / Peregrine 재 구축을 포함한 전체 PWA Studio 개발자 경험을 실행합니다.

sudo yarn run build && yarn run stage:venia

빌드 아티팩트를 생성하고 스테이징 환경을 실행하여 더 많은 압축 된 자산을 사용하고 프로덕션을보다 자세히 반영합니다.

위의 명령 중 하나를 실행하면 PWA에서 만든 virtul URL을 얻게됩니다.

참고 : rood 사용자 인 경우 sudo를 사용하십시오.

Magento 2 officical dev 문서를 따르십시오.

https://devdocs.magento.com/guides/v2.3/pwa/