2019年7月3日 星期三

My first PWA Progressive Web Application Google Part 01


主要參考:
https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0


1. API

首先去darksky.net注冊并且得到一個DARKSKY_API_KEY,我更改了一點后的Key是7cfcae53bb33928e9a7d9a85df825bce,於是可以測試HTTP GET返回的JSON:
https://api.darksky.net/forecast/7cfcae53bb33928e9a7d9a85df825bce/40.7720232,-73.9732319


2. Glitch

去https://glitch.com注冊一個賬號然後Clone from Git Repo,輸入https://github.com/googlecodelabs/your-first-pwapp.git,將Dark Sky API key寫在.env檔案裏面,按下Show Next to the Code,見到很有Google味道的界面以及天氣溫度就算是成功了。
























































3. manifest.json

index.html裏面填上<link rel="manifest" href="/manifest.json">,加入<meta>以及關於apple-mobile-web-app等東西,加入<meta> description,加入<meta> theme-color。

4. 基本離綫體驗

要讓離綫時候畫面有資料并且返回http 200,需要注冊service worker,填上需要緩存的檔案例如offline.html,


End

沒有留言:

張貼留言

2007 to 2023 HP and Dell Servers Comparison

  HP Gen5 to Gen11  using ChatGPT HP ProLiant Gen Active Years CPU Socket Popular HP CPUs Cores Base Clock Max RAM Capacity Comparable Dell ...