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

沒有留言:

張貼留言

2023 Promox on Morefine N6000 16GB 512GB

2023 Promox on Morefine N6000 16GB 512GB Software Etcher 100MB (not but can be rufus-4.3.exe 1.4MB) Proxmox VE 7.4 ISO Installer (1st ISO re...