用於建構 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

使用 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 剛好可以滿足這個需求

相關關鍵字 ( 點選以下關鍵字連結以獲得更多相關開源和線上學習資訊 )

專案網址

追蹤 Soft & Share

幫我們個小忙!

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: