1.什麼是pwa?
第一步：使用https
第二步：建立乙個應用程式清單（manifest）
第三步：建立乙個 service worker
第四步：建立可用的離線頁面
我們先建立乙個關於 pwa 的專案資料夾，
進入資料夾下我們準備一張 120x120的一張，作為我們的應用程式圖示。
建立乙個 index.html 檔案
建立乙個 main.css 檔案
建立乙個 manifest.json 檔案
建立乙個 sw.js 檔案
index.html
main.css
h3manifest.json
short_name: 「 " 使用者主螢幕上的應用名字
display : 「standalone" 設定啟動樣式，讓您的網路應用隱藏瀏覽器的 url 位址列
start_url : 「/「 設定啟動**，如果不提供的話，預設是使用當前頁面
theme_color : 「 「 用來告知瀏覽器用什麼顏色來為位址列等 ui 元素著色
background_color: 「 」 設定啟動頁面的背景顏色
icons：」」 就是新增到主螢幕之後的圖示
],}
sw.js
看網上很多人都安裝的hs和ngrok去除錯，
在這裡為了照顧新手我是直接引用的sw處理靜態快取，
首先定義需要快取的路徑，以及需要快取的靜態檔案的列表。
借助 sw 註冊完成安裝 sw 時，抓取資源寫入快取中。
使用了乙個方法那就是 self.skipwaiting( ) ，為了在頁面更新的過程當中，新的 sw 指令碼能夠立刻啟用和生效。
處理動態快取，我們監聽 fetch 事件，在 caches 中去 match 事件的 request ，
如果 response 不為空的話就返回 response ，最後返回 fetch 請求，
在 fetch 事件中我們可以手動生成 response 返回給頁面。更新靜態資源，
快取的資源會跟隨著版本的更新會過期的，所以會根據快取的字串名稱清除舊快取。
在新安裝的 sw 中通過呼叫 self.clients.claim( ) 取得頁面的控制權，
這樣之後開啟頁面都會使用版本更新的快取。
舊的 sw 指令碼不在控制著頁面之後會被停止，也就是會進入 redundant 期。
self.addeventlistener('fetch',function(e)
return fetch(e.request.url)
}))})
self.addeventlistener('activate',function(e)).map(cachenames => )
)}).then(() => )
)})
部署
我們可以把當前pwa目錄的所有內容都扔進伺服器中，或者coding pages和github pages也是可以的，
當然，記得開啟https。
在上變介紹過sw的權利比較大，為了安全性，我們使用https協議來訪問。
試著訪問一下，我們這裡用的coding pages並且繫結了自己的網域名稱
我們開啟 network 重新整理頁面一下，看看，我們的頁面資源來自 sw 而不是其他的地方，
在 console 中也列印出了我們在 index.html 中判斷的語句，瀏覽器支援就會列印出這一句話。
通過存放到 cache storage 中，我們下次訪問的時候如果是弱網或者斷網的情況下，
就可以不走網路請求，而直接就能將本地快取的內容展示給使用者，優化使用者的弱網及斷網體驗。
這個時候肯定會有同學在想，如果內容更新了，那麼頁面展示的內容是新內容呢還是舊內容呢？
下面我們操作一下，開啟 index.html 檔案，我們在 body 中新增乙個 p 標籤 ，然後回到頁面重新整理。
我們看到，頁面上的內容並沒有顯示出我剛剛新增的那個 p 標籤。這說明了，
我們拿到的資料還是從 cache storage 中獲取到的，
cache storage中的內容並沒有更新，強制重新整理也不行哦，
那麼我們怎麼才能讓我剛剛新增 的那個 p 標籤顯示出來呢。我們開啟 sw.js 指令碼檔案，我們修改一下 cachestoragekey。
PWA 漸進式 web 應用
背景 解決的問題 關鍵時間節點 主要特點 使用pwa的基本要求 離線通知 作用域 更新策略 瀏覽器通過自身 diff 演算法能夠檢測 service work 的更新包含兩種方式 生命週期 mainfest欄位詳解 short name 應用展示的名稱 桌面上顯示的名稱 icons 定義不同尺寸的應...
漸進式web應用 PWA
pwa 漸進式 web 應用 運用現代的 web api 以及傳統的漸進式增強策略來建立跨平台 web 應用程式。pwa 所需的關鍵要素是service worker支援。值得慶幸的是，桌面和移動裝置上的所有主流瀏覽器都支援 service worker。注意 service workers 大量使...
Makefile漸進式訓練
本目錄主要包含makefile一步步遞進學習的示例 makefile 例項 進行makefile小實驗，體驗makefile的功能。目錄中的makefile是不嚴謹的編寫方式。目錄中的makefile phony是嚴謹的編寫方式。切換至step0目錄下，即makefile所在的同級目錄,使用如下命令...