[F20_WebFund] Lab5 軟創二 508170040 王琳

Group content visibility: 
Use group defaults
Groups audience: 

1.截圖

1.1  添加manifest.json和server work 功能

1.2  添加 caches api

1.3  添加通知功能

1.4  lighthouse 評分

2.說明功能

我的pwa主要添加了4個功能.

  • 添加manifest.json和server work .js功能 可以把網站添加到桌面上.server work 裏面設置了install activate fetch三個屬性用於安裝激活和操作緩存.
  • 添加 caches api,可以在離綫時登錄app.
  • 添加通知功能. 離綫和登錄時提醒用戶讓他們知道自己是在綫,還是使用的是緩存資源

3.心得

本次實作google pwa 教學沒有找到原檔,有在github上找到資源但是別人已經做好的pwa就沒用.自己在網站上找了一個天氣的html,把他做成PWA 了. 剛開始找資料全是英文,中文資料很少覺得好難.後來東拼西凑找到教學視頻就跟著做了,第一次出現可以安裝到桌面的app時很興奮.後來又添加了離綫和通知功能.過程很艱辛,不過大概知道要怎麽把網站包裝成app和提高用戶體驗了.