spexif enhance in prograssive web app. http://gisweb.ml/~2017GO/exifmap/ http://gholk.github.io/spexif/

1. 行動裝置上的 web 地圖
gholk

2. web 地圖
●
web 地圖是指基於 html css javascript ，以瀏覽
器為目標平台的地圖。
●
本實作能將相片展示在由 leaflet 提供的地圖上，
●
並針對行動裝置上的使用體驗最佳化。

3. 適應性設計
●
依據不同裝置、螢幕
尺寸，調整網頁 局佈

4. Prograssive Web App
●
漸近式的網頁應用程式
●
在支援 web app的裝置上提供類似原
生 app的體驗
●
在不支援 web app的裝置上也能在瀏
覽器中運行基本功能

5. 適應性功能
●
客制化樣式表：為不同尺寸螢幕客制樣式表
●
media query: 依螢幕尺寸套用不同的樣式

6. media query
●
螢幕為縱向時
●
螢幕高度小於 40em 、 度小於寬 60em
(orientation: portrait),
(max-width: 60em), (max-height: 40em)

7. 手機 局調整佈

8. 改進處
●
縮減字體大小
●
減小浮動視窗大小
●
視窗沒有使用時收合

9. 單頁式 app
●
在手機上切換分頁較麻煩
●
避免登入登出要開新頁面
●
同時保有對舊裝置的相容

10. PWA 特點
●
在瀏覽器中像正常網頁般運作
●
將 html css javascript 儲存在手機中，即使離線
也能運行

11. manifest.json
●
記錄 app 的基礎資
料：
– name
– icon
– 網址
{
"name": "Spexif",
"short_name": "Spexif",
"description": "The web app to manage photos and their exif metadata.",
"start_url": "..",
"scope": "..",
"display": "standalone",
"background_color": "white",
"theme_color": "green",
"orientation": "portrait",
"icons": [
{
"src": "icon48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "icon144.png",
"sizes": "144x144",
"type": "image/png"
}
],
"related_applications": [
{
"platform": "web"
}
]
}

12. ServiceWorker
●
Web worker 進化版，類似本地端的 http server
●
當瀏覽器訪問在 service worker 下的網址時，就會 動啟
●
可以 截從該頁面發出的攔 http request ，放行或從快取中回應
●
因此可以將原本在 server 上的 案暫存在本機檔

13. Service Worker Flow

14. 安裝
●
首次進入含 service
worker 的網頁時會詢
問安裝，
●
安裝後即可從主畫面
動。啟

15. 傳統網頁與 PWA
1.開 瀏覽器啟
2.從伺服器載入
3.進入網頁
1.從捷徑開啟
2.從快取中載入
3.進入網頁
●
不再依賴網路
●
接近原生 app 體驗

16. exifmap 中的 pwa
●
其實只用了 icon
●
PWA 限制 https
●
leaflet map 是線上服務，不適合快取

17. Github page 試用版
● https://gholk.github.io/spexif
● http://gisweb.ml/~2017GO/exifmap
● https://www.youtube.com/watch?v=P82g2i6VXU8
●
（登入功能上學期做過就不展示了）