iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 28
1
Modern Web

30 天 Progressive Web App 學習筆記系列 第 28

Day 28 - 30 天 Progressive Web App 學習筆記 - To-Do List 搭配 React + Redux 實作 PWA

接下來 3 篇文章的目標是以 React + Redux + Webpack 的技術來完成 To-Do List 功能與 PWA,而內容會假設讀者已經熟悉 React, Redux 及 Webpack,會把重點放在如何實作,不會逐步講解基礎觀念。

  1. 環境建置
    • 基本介紹(Intro/Install/Run)
    • 執行 React 專案前置作業
    • 打造可撰寫 JSX/ES6/ES7 的環境
    • Webpack 設定
  2. 建立檔案架構與功能
    • 規劃 React + Redux 架構
    • 顯示待辦事項清單
    • 新增/修改/刪除待辦事項清單
  3. 實作 PWA
    • 建立 Web App Manifest File
    • 新增 Service Worker

本篇為第 3 篇: 實作 PWA


今天終於做完 React + Redux 範例也搭配 Service Worker,讓 To-Do List 可以在離線的時候做瀏覽,但目前只能顯示 GET 資料,若要讓 POST、PUT、DELETE 等操作都能夠執行,必須還要實作 IndexedDB 等 API 來輔助儲存、做資料的處理。

但現在於離線的狀況,至少不會出現以下這個畫面了:

建立 Web App Manifest File

{
    "name": "PWA To-Do List with React/Redux",
    "short_name": "To-Do List",
    "start_url": ".",
    "icons": [{
        "src": "./assets/images/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    }, {
        "src": "./assets/images/icon-256x256.png",
        "sizes": "256x256",
        "type": "image/png"
    }, {
        "src": "./assets/images/icon-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
    }, {
        "src": "./assets/images/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }],
    "background_color": "#707477",
    "theme_color": "#f2f2f2",
    "display": "standalone",
    "orientation": "portrait"
}


新增 Service Worker

步驟:

實作 Service Worker,藉由 sw-precache、達成離線瀏覽:


待補充...


上一篇
Day 27 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - 完成 React + Redux 專案架構與功能
下一篇
Day 29 - 30 天 Progressive Web App 學習筆記 - 介紹 Offline Storage
系列文
30 天 Progressive Web App 學習筆記30

尚未有邦友留言

立即登入留言