CSS 및 PWAS : 프로그레시브 웹 앱 구축을위한 몇 가지 팁

Progressive Web Apps (PWAS) : CSS와 개발에 대한 깊은 다이빙

온라인 환경은 모바일 장치의 부상으로 극적으로 바뀌 었습니다. 웹 사이트는 단일 버전에서 데스크탑/모바일 변형, 반응 형 디자인 및 기본 모바일 앱으로 발전했습니다. 최신 반복은 PWA (Progressive Web App)이며, 최고의 웹 및 기본 앱 경험을 혼합하는 것을 목표로합니다. 이 기사는 PWA 개발에 중요한 CSS 기술을 살펴 봅니다 주요 개념 :

pwas는 기본 앱의 신뢰성, 속도 및 매력적인 경험을 웹의 접근성과 결합하여 App Store 다운로드가 필요하지 않습니다. PWA 개발은 표준 웹 앱 개발과 비슷하지만 파일 (PWA 외관 제어), 서비스 작업자 (오프라인 기능 가능) 및 CSS를 포함한 사이트 자산의 신중한 관리가 필요합니다. 중요한 CSS 고려 사항에는 플랫폼 별 UI 준수, 장치 기능 설계 및 우아한 저하/점진적 향상 구현이 포함됩니다. 마른 미니멀리스트 디자인은 최적의 성능을위한 핵심입니다 React App 만들기, Angular 및 Ionic Simplify PWA 개발과 같은 프레임 워크는 성능에 영향을 줄 수 있습니다. 그들의 사용을 신중하게 고려하십시오. Google Lighthouse와 같은 성능 모니터링 도구는 PWA 속도 및 응답 성을 최적화하는 데 매우 중요합니다.

PWAS 이해 :

3 개의 핵심 PWA 기능은 전형적인 웹 앱 단점 : 신뢰성 : PWAS가 안정적으로로드, 표준 웹 페이지와 달리 네트워크 연결이 열악해도 기본 앱을 모방합니다. 속도 : PWA 성능은 위치, 네트워크 속도 또는 기타 외부 요인에 관계없이 일관성이 있습니다. 참여 : pwas는 앱 스토어 설치없이 기본 앱과 유사한 몰입 형 전체 화면 경험을 제공하며 종종 푸시 알림을 지원합니다.

• Google은 PWA 채택을 옹호했으며 인기가 빠르게 증가하고 있습니다. Cloudfest 2018에서 언급 한 Duda의 CEO 인 Itai Sadan의 CEO에 따르면 "프로그레시브 웹 앱은 다음 큰 도약을 나타냅니다. 그들은 기본 앱의 가장 좋은 측면을 취하고 반응이 좋은 웹 사이트에 포함시킵니다."
. PWA 개발 필수 사항 :
• PWA 개발은 표준 웹 앱 개발과 유사하며 배포를 위해 HTTP가 필요합니다 (LocalHost 테스트는 허용됩니다). 주요 요구 사항은 다음과 같습니다
  1. 매니페스트 파일 () : 이 JSON 파일은 장치의 홈 화면에서 PWA의 외관을 제어하고 이름, 아이콘, 색상 등을 정의합니다. CSS는 여기에 직접 관여하지 않습니다. 순전히 구성입니다. (아래 표시된 예)

     manifest.json

     서비스 작업자 : 브라우저와 독립적으로 실행중인 JavaScript 파일, 네트워크 요청을 가로 채기, 캐싱 리소스 및 푸시 알림 처리. 이것은 오프라인 기능의 기초입니다. (아래의 스 니펫 예)

     

  사이트 자산 (CSS 포함) :
  2. 서비스 작업자 설치 중에 CSS, JavaScript 및 미디어 파일을 포함한 모든 사이트 자산이 설치됩니다. CSS 스타일링이 적용되는 곳입니다

     pwas에 대한 CSS 고려 사항 : 몇 가지 주요 결정은 CSS 구현에 영향을 미칩니다

     플랫폼 별 UIS :

     self.addEventListener('install', function(e) {
     e.waitUntil(
       caches.open('airhorner').then(function(cache) {
         return cache.addAll([
           '/',
           '/index.html',
           '/index.html?homescreen=1',
           '/?homescreen=1',
           '/styles/main.css',
           '/scripts/main.min.js',
           '/sounds/airhorn.mp3'
         ]);
       })
     );
     });

     플랫폼 별 UI를 피하면 소외된 사용자를 방지하고 잠재적으로 변화하는 플랫폼 설계에 대한 의존도를 줄입니다. 플랫폼 공유 접근 방식은 원어민과 같은 행동을 위해 노력하는 동안 일반적으로 권장됩니다.

  3. 장치 기능 : 데스크탑을 포함한 모든 플랫폼에 대한 디자인 (Chrome은 이미 데스크탑 PWA를 지원합니다). CSS 및 서비스 작업자를 사용하여 사용 가능한 리소스를 기반으로 기능을 조정하십시오.

  우아한 열화와 진보적 인 향상 :

  CSS의 고유 한 우아한 열화 (지원되지 않는 특성을 무시 함)는 점진적인 향상에 의해 보완되어야합니다. 서비스 작업자와 같은 기능을 사용하기 전에 API 지원을 테스트하십시오 :

  일반 제안 :

  사용자 경험 균형 개발 자원의 균형. 플랫폼 공유 디자인을위한 설계 표준 (예 : 재료 설계) 및 프레임 워크 (부트 스트랩과 같은)를 활용합니다. 플랫폼을 기반으로 한 조건부 CSS 로딩 ( 또는

  사용을 사용하지만 후자는 덜 신뢰할 수 없음)을 사용할 수 있지만 복잡성을 추가합니다.
  .

  • pwa 프레임 워크 : 프레임 워크는 PWA 개발을 가속화하지만 성능에 부정적인 영향을 줄 수 있습니다. 특히 초기 학습 단계에서 신중하게 사용하십시오. 나중에, 마른 미니멀리스트 스타일 시트와 플랫폼 공유 디자인을 위해 노력하십시오

  React App 만들기 :
  • PWA 개발을위한 React 구성 요소를 제공합니다
    Angular :
  Google의 프레임 워크는 Native PWA 지원 ()을 제공합니다

  

이온 성 :
• 는 각도, 코르도바 및 내장 서비스 작업자/매니페스트 크로스 플랫폼 PWA 개발에 대한 지원을 활용합니다.
  PWA 성능 최적화 :

  속도와 참여를 유지하는 것이 중요합니다. CSS를 마른 미니멀리스트로 유지하십시오. 고려하십시오 : <.>

  http/2 서버 사용 중요한 CSS 의 경우

네트워크 인식 API 및 캐싱

inlining critical css 리소스 최소화 및 최적화

Google Lighthouse : 이 성능 모니터링 도구 (Chrome Devtools에 통합)는 PWA 성능을 최적화하는 데 도움이되는 세부 보고서를 생성합니다.

결론 :

CSS로 PWA를 개발하려면 성능과 응답 성을 신중하게 고려해야합니다. 많은 웹 개발 기술이 적용 가능하지만 프레임 워크 사용에 대한 정보에 대한 결정적인 결정은 고성능, 매력적인 사용자 경험을 만드는 데 필수적입니다. 마른 효율적인 디자인의 우선 순위를 정하는 것을 잊지 마십시오.

위 내용은 CSS 및 PWAS : 프로그레시브 웹 앱 구축을위한 몇 가지 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!