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 테스트는 허용됩니다). 주요 요구 사항은 다음과 같습니다
-
매니페스트 파일 () : 이 JSON 파일은 장치의 홈 화면에서 PWA의 외관을 제어하고 이름, 아이콘, 색상 등을 정의합니다. CSS는 여기에 직접 관여하지 않습니다. 순전히 구성입니다. (아래 표시된 예)
manifest.json
서비스 작업자 : 브라우저와 독립적으로 실행중인 JavaScript 파일, 네트워크 요청을 가로 채기, 캐싱 리소스 및 푸시 알림 처리. 이것은 오프라인 기능의 기초입니다. (아래의 스 니펫 예)
사이트 자산 (CSS 포함) : - 서비스 작업자 설치 중에 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'
]);
})
);
});로그인 후 복사
-
장치 기능 : 데스크탑을 포함한 모든 플랫폼에 대한 디자인 (Chrome은 이미 데스크탑 PWA를 지원합니다). CSS 및 서비스 작업자를 사용하여 사용 가능한 리소스를 기반으로 기능을 조정하십시오.
우아한 열화와 진보적 인 향상 : CSS의 고유 한 우아한 열화 (지원되지 않는 특성을 무시 함)는 점진적인 향상에 의해 보완되어야합니다. 서비스 작업자와 같은 기능을 사용하기 전에 API 지원을 테스트하십시오 :
일반 제안 : 사용자 경험 균형 개발 자원의 균형. 플랫폼 공유 디자인을위한 설계 표준 (예 : 재료 설계) 및 프레임 워크 (부트 스트랩과 같은)를 활용합니다. 플랫폼을 기반으로 한 조건부 CSS 로딩 ( 또는
사용을 사용하지만 후자는 덜 신뢰할 수 없음)을 사용할 수 있지만 복잡성을 추가합니다.
이온 성 : - 는 각도, 코르도바 및 내장 서비스 작업자/매니페스트 크로스 플랫폼 PWA 개발에 대한 지원을 활용합니다.
PWA 성능 최적화 :
속도와 참여를 유지하는 것이 중요합니다. CSS를 마른 미니멀리스트로 유지하십시오. 고려하십시오 : <.>
http/2 서버 사용
중요한 CSS 의 경우
네트워크 인식 API 및 캐싱
inlining critical css
리소스 최소화 및 최적화
Google Lighthouse : 이 성능 모니터링 도구 (Chrome Devtools에 통합)는 PWA 성능을 최적화하는 데 도움이되는 세부 보고서를 생성합니다.
결론 :
CSS로 PWA를 개발하려면 성능과 응답 성을 신중하게 고려해야합니다. 많은 웹 개발 기술이 적용 가능하지만 프레임 워크 사용에 대한 정보에 대한 결정적인 결정은 고성능, 매력적인 사용자 경험을 만드는 데 필수적입니다. 마른 효율적인 디자인의 우선 순위를 정하는 것을 잊지 마십시오.
위 내용은 CSS 및 PWAS : 프로그레시브 웹 앱 구축을위한 몇 가지 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
