mithril hackernews pwa

PWA - Micro Mithril 駭客新聞克隆

HackerNews 克隆使用 Micro、Mithril v1.1.1 和 Pure Material 建置。

這是一個最小且直接的開發。沒有花俏的東西。它還有很多可以改進的地方。

Mithril 是一個小而強大的框架，可用於大型項目，但是，Pure Material 仍處於 alpha 狀態，我不建議將其用於生產。

現場演示

清單

漸進式網頁應用

• 網站現在透過 HTTPS 提供服務
• 使用 Pure Material 的頁面可在平板電腦和行動裝置上回應
• 為 PWA 提供元數據，例如主題顏色
• 無腳本環境的內容
• 使用 Web Manifest 新增到主螢幕
• 使用 Favicons 即時建立圖標

國家水務管理局

• 瀏覽次數：駭客新聞熱門故事、新內容、顯示、詢問、工作和線程評論
• 應用程式必須每頁顯示 30 個項目才能查看故事列表
• 應用程式必須是漸進式 Web 應用程式
• 使用 Lighthouse 時應用程式的得分必須超過 90/100
• 應用程式必須目標是在 3G 上的 Moto G4 上 5 秒內實現交互
• 應用程式必須使用應用程式外殼模式
• 應用程式必須盡力跨瀏覽器工作
• App支援HN資料離線緩存
• 應用程式可以使用伺服器端渲染。
• 將 Hackernews 官方 firebase API 與 firebase-hackernews 一起使用

HNPWA 詳細信息

• 框架/UI 函式庫：Micro + Mithril + Pure Material
• 模組捆綁：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