spexif 對行動裝置優化與 PWA

在這學期專題，我對上學期完成的網頁地圖 spexif 在手機上的使用體驗做最佳化，參考了 google 所提出的 Prograssive Web Application 概念。 使用到 ServiceWorker、Responsive Web Design、 Single Page Application 的技術與概念。

Prograssive Web Application

pwa 的目的是在瀏覽器上提供類似原生 App 的體驗， 使用到 service worker、rwd、single page application 等技術。 其中核心技術是 service worker 與 Fetch API、Cache API， 使網頁能夠控制瀏覽器暫存網頁，達到離線使用的目的。

responsive web design

rwd 是利用 html 中架構與樣式分離的特性， 對不同裝置設計不同的樣式表， 主要是在不同尺寸螢幕上都能有適當的排版， 防止字體過大過小、網頁內容超出螢幕等缺陷。

針對 spexif，我設計了一份適合手機使用的樣式表， 縮小字體，並收合未使用的工具， 達到空出最大空間給地圖操作的目的。

single page application

由於在手機上不像桌面程式， 可以同時有多視窗共存，切換分頁的體驗十分糟糕。 所以使用 iframe 讓原先的登入介面， 可以在同一網頁內進行。

service worker

servicw worker 是進階版的 web worker， 能夠在註冊的網頁被訪問時自背景啟動， 存取暫存的網頁，並處理 http request， 控制向伺服器發出或以暫存中的版本回應。

本來 cache 的控制較無效果，僅能在伺服器端以 HTTP header 控制； cache api 能夠精細控制網頁哪些部份應該暫存， 而 fetch api 則提供發送、攔截 http request 的功能。 通過 service worker 結合二者， 即能監聽 http request 發出的 fetch 事件， 選擇從 cache api 中回應或向 server 請求。

流程

成果展示

缺失

• service worker 必須在 https 環境中運作， gisweb.ml 沒有 https。

• leaflet map 是動態載入圖磚， 就算以 service worker 快取 exifmap 的網頁， 尚有 leaflet 的圖磚需要連網， 沒辦法完全離線使用。

• 總結起來 exifmap 中只使用了 icon， 也就是啟動畫面。