mithril hackernews pwa

PWA - 마이크로 미스릴 해커 뉴스 클론

Micro, Mithril v1.1.1 및 Pure Material로 제작된 HackerNews 클론.

이것은 최소한의 직접적인 개발입니다. 멋진 물건은 없습니다. 개선할 수 있는 부분이 많이 있습니다.

Mithril은 작지만 강력한 프레임워크이며 대규모 프로젝트에 사용할 수 있지만 Pure Material은 아직 알파 상태이므로 프로덕션에 사용하는 것은 권장하지 않습니다.

라이브 데모

체크리스트

PWA

• 현재 사이트는 HTTPS를 통해 제공됩니다.
• 페이지는 Pure Material을 사용하여 태블릿 및 모바일 장치에서 반응합니다.
• 테마 색상과 같은 PWA에 제공되는 메타데이터
• 스크립트 없는 환경을 위한 콘텐츠
• 웹 매니페스트로 홈 화면에 추가
• Favicon을 사용하여 즉시 아이콘 구축

HNPWA

• 조회수: 해커 뉴스 주요 뉴스, 신규, 표시, 질문, 채용 정보 및 스레드 댓글
• 앱은 스토리 목록 보기를 위해 페이지당 30개의 항목을 표시해야 합니다.
• 앱은 프로그레시브 웹 앱이어야 합니다.
• 앱은 Lighthouse를 사용하여 90/100 이상의 점수를 받아야 합니다.
• 앱은 3G를 통해 Moto G4에서 5초 이내에 상호작용하는 것을 목표로 해야 합니다.
• 앱은 애플리케이션 셸 패턴을 사용해야 합니다.
• 앱은 브라우저 간 작동을 위해 최선을 다해야 합니다.
• 앱은 HN 데이터의 오프라인 캐싱을 지원합니다.
• 앱은 서버 측 렌더링을 사용할 수 있습니다.
• firebase-hackernews와 함께 Hackernews 공식 Firebase API 사용

HNPWA 세부정보

• 프레임워크/UI 라이브러리: Micro + Mithril + Pure Material
• 모듈 번들링: Webpack
• 서비스 워커: 애플리케이션 셸
• 서버 측 렌더링: 아니요
• API: 해커 뉴스 Firebase API
• 호스팅: 현재
• 기타 세부사항: 태스크 러너 Gulp. CSS 전처리기 스타일러스.

시작하기

 # install dependencies
yarn install

# serve at localhost:8000 with browserSync
yarn dev

# build for production with minification
yarn build

합법적인

저자: 가면무도회 서커스. 라이센스 Apache-2.0