mithril hackernews pwa

PWA - マイクロ ミスリル ハッカー ニュース クローン

Micro、Mithril v1.1.1、および Pure Materials で構築された HackerNews クローン。

これは最小限の直接的な開発です。派手なものはありません。改善できる点はたくさんあります。

Mithril は小さいながらも強力なフレームワークであり、大規模なプロジェクトに使用できます。ただし、Pure Materials はまだアルファ版の状態であるため、本番環境での使用はお勧めしません。

ライブデモ

チェックリスト

PWA

• サイトは HTTPS 経由で提供されるようになりました
• Pure Material を使用すると、タブレットやモバイル デバイスでページが応答します
• テーマカラーなどの PWA に提供されるメタデータ
• スクリプトレス環境向けのコンテンツ
• Webマニフェストでホーム画面に追加
• ファビコンを使用してその場でアイコンを構築

HNPWA

• ビュー: ハッカー ニュース トップ ストーリー、新着、ショー、質問、ジョブ、スレッド コメント
• アプリでは、ストーリー リスト ビューの場合、ページごとに 30 個のアイテムを表示する必要があります
• アプリはプログレッシブ Web アプリである必要があります
• アプリは Lighthouse を使用して 90/100 以上のスコアを獲得する必要があります
• アプリは、3G 経由で Moto G4 上で 5 秒以内にインタラクティブになることを目標にする必要があります
• アプリはアプリケーション シェル パターンを使用する必要があります
• アプリはクロスブラウザーで動作するように最善を尽くす必要があります
• アプリは HN データのオフライン キャッシュをサポートします
• アプリはサーバー側レンダリングを使用する場合があります。
• firebase-hackernews で Hackernews 公式 Firebase API を使用する

HNPWAの詳細

• フレームワーク/UIライブラリ: Micro + Mithril + Pure Materials
• モジュールのバンドル: Webpack
• Service Worker: アプリケーション シェル
• サーバー側レンダリング: いいえ
• 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 のライセンス