利用pwa-starter-kit樣板,快速開發PWA網頁

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

安裝

git clone --depth 1 https://github.com/Polymer/pwa-starter-kit my-app
cd my-app
npm install
npm start

// npm start -- --hostname 0.0.0.0 --port 4444
npm run test

專案架構

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)

參考資訊