期交所雙月刊60期

23 臺灣期貨雙月刊 TAIFEX BIMONTHLY 圖 2 ：響應式網頁設計網站實例－ Dropbox ‧ 更 好 的 效 能 及 延 展 性： 得 益 於 多 樣 JavaScript 開發工具，如 Angular 、 Vue.js 及 React 等框架套件，這些工具可減少網 路資料的傳輸，提升瀏覽器端的網頁顯示 效率。對開發者而言，可藉由框架的幫助， 在某些情況下，建立新功能只需要微小幅 度的系統修改，讓網站開發者可針對功能 快速推陳出新。 響應式網頁設計 為因應各式裝置瀏覽網頁的需求，響應式 網頁設計（ Responsive Web Design, RWD ）會 根據各類裝置進行最佳化顯示，如行動電話、平 板電腦及個人電腦，使用媒體查詢技術（ media query ），自行調整最適合的呈現方式及螢幕比 例，比起傳統建置多套網頁系統，如電腦版及行 動版網頁，響應式網頁透過使用階層式樣式表 （ Cascading Style Sheets, CSS ）設計可免去開 發者針對各式裝置設計多套網頁的困擾。採用此 類設計的代表網站如 YouTube 、 Dropbox （圖 2 ） 及維基百科 Wikipedia 。 漸進式網路應用程式 漸 進 式 網 路 應 用 程 式（ Progressive Web Applications, PWA ）採用多種技術及最新的各式 網頁 API ，由 Google 在 2015 年提出，嚴格來 說，漸進式網路應用程式並非一種架構，而是一 種設計理念，通常此類應用具有可離線瀏覽的特 色，並可安裝於裝置內如同一個應用程式，以及 推播提醒訊息給使用者，帶來如同原生應用程式 （ App ）的操作體驗。 漸進式網路應用程式具有以下特色： ‧ 漸進式（ Progressive ）： 依裝置狀況決 定該呈現的效果，若碰到老舊的瀏覽器則 顯示基本功能，在新式的瀏覽器則呈現完 整功能。 ‧ 響應式（ Responsive ）： 自行視任何裝 置調適最適合的顯示模式。 ‧ App 相仿（ App-like ）： 操作方式與動線 與行動裝置應用程式相似。 ‧ 可更新（ Fresh ）： 使用瀏覽器 service worker 元件進行更新，不依賴 Google Play Store 更新機制。 ‧ 安全（ Safe ）： 皆透過傳輸層安全性協定 （ Transport Layer Security, TLS ）連線機 制傳輸資料，以確保安全性。 ‧ 可被探索（ Discoverable ）： 採用全球資 訊網協會（ World Wide Web Consortium, W3C ）制定之 manifest 規範，可被搜尋引 擎爬蟲程式索引，以進行搜尋引擎最佳化 （ Search Engine Optimization, SEO ）。