Contents
PWA Starter kit 是一個開始建構 PWA 的範例程式。 提供了以下功能:
- 所有 PWA 的養分(manifest,service worker)
- 一個響應式佈局
- 應用程式主題
- 使用 Redux 進行狀態管理的範例
- 離線 UI
- 簡單路由解決方案
- 透過使用 PRPL 模式以支援快速互動回應時間(time-to-interactive)和初始繪製( first-paint )
- 輕鬆部署到 prpl-server 或靜態託管
- 單元和集成測試起點
- 有關其它高級模式的文件。
如何開始使用?
這個範例程式使用了 Web Components , lit-html 為網頁樣板引擎,也使用了一些 npm 套件,所以使用前必須先安裝好 node ( 建議使用 v 8.0.0 以上版本 , 但是目前還沒支援 v 10.0.0 ) 和 npm
使用 pwa-starter-kit 建立一個新的 app
git clone --depth 1 https://github.com/Polymer/pwa-starter-kit my-app
cd my-app
這將在 my-app 檔案夾中生成初始專案結構,大致如下所示:
my-app
├── images
| └── ...
└── src
| └── ...
└── test
| └── ...
├── index.html
├── README.md
├── package.json
├── polymer.json
├── manifest.json
├── service-worker.js
├── sw-precache-config.js
├── ... (misc project config files)
安裝相依套件
npm install
啟動程式進入開發模式
npm start
這將在 port 8081上啟動本地端伺服器器。打開http://localhost:8081以在瀏覽器中查看你的應用程式。 請注意,當您對應用程式進行更改時,此伺服器可以繼續運行,瀏覽器頁面 refresh 即可。
啟動時使用不一樣的 port 號碼
npm start -- --hostname 0.0.0.0 --port 4444
執行測試
npm run test
要學習一個開發框架最快的方式就是從一個功能齊全的範例程式開始修改,這個 pwa starter kit 剛好可以滿足這個需求
✍ 相關關鍵字 ( 點選以下關鍵字連結以獲得更多相關開源和線上學習資訊 )