![](https://web.dev/static/images/case-studies-header.png?authuser=8&%3Bhl=zh-tw&hl=zh-tw)
個案研究
運用實際使用者資料,讓基線資料可做為行動依據
RUMvision 如何將基準資訊與 RUM 資料整合。
發揮 CSS 容器查詢的強大功能:Netflix 團隊的經驗
本個案研究說明 Netflix 採用容器查詢的好處。
Tokyu 如何透過密碼金鑰,讓登入速度提升 12 倍
瞭解東京市的鐵路公司 Tokyu 如何使用密碼金鑰快速登入 12 倍,每天協助數千名通勤者。
為何 Google 試算表將其計算工作站從 JavaScript 移植到 WasmGC
Google 試算表的計算程序最初是在伺服器上完成,再由用戶端以 JavaScript 執行,現在則改在 WebAssembly 垃圾收集機制中完成。此個案研究會說明做法和原因。
更流暢、更全面的控管功能:Google Meet 如何改善音訊和視訊權限
本個案研究說明 Google Meet 團隊如何改善權限,以及對使用者帶來的影響會議滿意度
BILIBILI 選擇了 MediaPipe' 裝置端網路 AI 解決方案,改善影片串流的使用者體驗,同時使工作階段持續時間增加 30%
瞭解網路如何實現沉浸式 3D 體驗,協助客戶瞭解及探索實體產品。
Disney+ Hotstar 如何把 INP 減少 61%,讓客廳裝置上的每週卡片觀看次數增加 61%
瞭解 Disney+;Hotstar 是智慧型電視與機上盒裝置適用的應用程式,如何大幅降低觀眾參與度,大幅提升觀眾參與度。
透過 Google 硬體在網頁上推出互動式 3D 體驗:新一代產品教育體驗
瞭解網路如何實現沉浸式 3D 體驗,協助客戶瞭解及探索實體產品。
PubTech' 同意聲明管理平台將客戶網站的 INP 減少多達 64%,同時使廣告可視度提升多達 1.5%
PubTech' 同意聲明管理平台將客戶網站的 INP 減少多達 64%,同時使廣告可視度提升多達 1.5%
隨處提供好記
過去兩年來,Goodnotes 工程團隊正在進行一項專案,將這款成功的 iPad 筆記應用程式拓展至其他平台。本個案研究探討了該年度在 2022 年推出的 iPad 應用程式,如何使用網頁技術和 WebAssembly 開發網站、ChromeOS、Android 和 Windows,並重複使用該團隊所開發的相同 Swift 程式碼。
內容推薦供應商 Taboola 如何使用 LoAF,為發布商合作夥伴網站改善高達 36% 的 INP。
內容推薦供應商 Taboola 如何使用 LoAF,為發布商合作夥伴網站改善高達 36% 的 INP。
CapCut 使用 WebAssembly 和 WebCodecs 打造功能完整的網頁應用程式,讓自然流量增加 83%
看看行動版目前市面上最熱門的影片編輯應用程式之一,如何打造出功能完備的網頁版。
運用網路技術輔助插圖:pixiv 如何在繪圖應用程式上運用網頁技術
pixiv 是線上社群服務,供插畫家和插畫愛好者透過內容彼此交流。讓使用者發布自己的插圖。截至 2023 年 5 月,他們在全球擁有超過 8400 萬名使用者 ,並發布超過 1 億 件藝術作品。 pixiv Sketch 是 pixiv 提供的服務之一。這項功能可讓使用者使用手指或觸控筆在網站上繪製圖片。它支援多種功能,可繪製精彩的插圖,包括多種筆刷、圖層和桶子繪圖,還可讓使用者直播繪圖過程。 在本案例研究中,我們將探討 pixiv Sketch 如何運用 WebGL、WebAssembly 和
Tokopedia 如何運用機器學習技術改善賣家網頁應用程式,進而降低營運成本
本文說明 Mitra Tokopedia 如何運用機器學習技術改善賣家的網頁應用程式,進而降低營運成本。
Trendyol 指出 INP 減少 50% 的方式,使點閱率提升 1%
本個案研究將逐步說明如何運用 PageSpeed Insights (PSI)、Chrome 開發人員工具和 scheduler.yield API,在 React 採用的 React 中,逐步偵錯及改善 INP。
Kiwix PWA 如何讓使用者儲存網際網路上的 GB 資料以供離線使用
本個案研究探討非營利組織 Kiwix 如何採用漸進式網頁應用程式技術和 File System Access API,讓使用者下載及儲存大型網際網路封存檔案供離線使用。
Yahoo!JAPAN 將密碼金鑰採用率提高至 11%,並降低簡訊動態密碼費用
瞭解 Yahoo!JAPAN' 改善密碼金鑰採用率和使用者體驗的做法。
Terra 如何運用預先擷取功能,將廣告點閱率提升 30%,並加速最大內容繪製速度。
預先擷取是一種技術,可透過下載資源 (甚至是整個網頁) 加快網頁載入速度,不久後使用者可能會用到。研究顯示,載入時間越快,轉換率越高,轉換率就會越好。
往返快取如何協助 Yahoo!JAPAN News 在行動裝置上將收益提高 9%
Yahoo! JAPAN News 是日本最受歡迎的新聞平台之一,不但成功提高影格速率,也帶來了顯著的使用者體驗和企業改善成效。具體來說,他們執行的 A/B 測試結果顯示,使用 bfcache 的網頁廣告收益提升了 9%。
RedBus 如何改善網站's Interaction to Next Paint (INP) 和銷售量提升 7%
INP 最佳化措施讓 redBus 的銷售量增加了約 7%
經濟時間修正 INP
將 TBT 減少 30 倍並遷移至 Next.js 之後,Ecomonic Times 的 INP 降低了將近四倍,跳出率則降低 50%,網頁瀏覽量則增加 43%。
《Slow Roads》如何吸引遊戲玩家和開發人員,並強調瀏覽器中 3D 令人驚豔的功能
進入這款休閒駕駛遊戲的無限美景,探索 WebGL 的潛力。 慢路道路 是休閒駕駛遊戲,著重於程序無止盡的場景,且全部都在瀏覽器中以 WebGL 應用程式 代管。對許多人來說,這種密集體驗似乎在瀏覽器使用情境有限的情況下無法派上用場;事實上,解決這個不利的體驗確實是我這項專案的目標之一。本文將詳細說明我曾為我的使命找到效能障礙的幾項技術,重點是在網路上呈現 3D 技術可能讓人眼花撩亂的潛力。
打造更優質的網路環境:更快速的 YouTube
這是第一系列的單元 1:打造更棒的 YouTube 網路。
Rakuten 24';針對網站體驗核心指標進行投資,將每位訪客收益提升 53.37%,轉換率則提高 33.13%
透過評估實際使用者人數,Rakuten 24 也發現,大幅提升內容繪製 (LCP) 成效後,轉換率可提升 61.13%。
GoDaddy's 網站 + 行銷服務如何將客戶網站體驗核心指標提升 75%
這份報告探討 GoDaddy 採取了哪些變更措施,改善數百萬個網站的網站效能,進而提升 PageSpeed Insights 和網站體驗核心指標的分數。
豪華零售商 Farfetch 的轉換率更高,網站體驗指標就會提升
豪華零售商 Farfetch' 如何投資網站體驗核心指標來改善業務成果。
Yahoo! JAPAN's 免密碼驗證的做法減少了 25% 的提問,登入時間減少 2.6 倍
Yahoo! JAPAN 導入了無密碼的身分識別系統。瞭解他們的做法和付出的努力。
RebelMouse 如何運用網站體驗核心指標提升忠誠度和參與度
這份個案研究旨在評估網站體驗核心指標的整體成效分數及其整體影響與效益。
Adobe Experience Manager 搭配 WorkBox 的現代化網路體驗
漸進式網頁應用程式可充分發揮新式網路的功能。Adobe 使用了 Workbox 將這類功能導入 Adobe Experience Manager。
MishiPay';PWA 提升了交易 10 倍,並省下 2.5 年的佇列
瞭解 MishiPay's PWA 如何將交易次數提升 10 倍,並節省 2.5 年的佇列。
《The Economic Times》(經濟時間) 如何通過網站體驗核心指標的要求,同時達到整體跳出率提高 43% 的水準
在 The Economic Times 網站上最佳化網站體驗核心指標,大幅提升了使用者體驗,並大幅降低整個網站的跳出率。
Terra 如何運用深色模式來提高使用者參與度
在本文中,我們將分析 Terra' 的流程,包括識別 "深色模式" 同類群組的大小、套用自訂深色主題,最後再評估這項實作對主要 KPI 的影響。
QuintoAndar 如何改善網頁效能,進而提高轉換率和單次工作階段頁數
一項專案的重點是將網站體驗核心指標最佳化並遷移至 Next.js,轉換率提高 5%,單次工作階段頁數則增加 87%。
Kapwing:功能強大的網路影片編輯工具
Kapwing 等公司運用強大的 API (例如 IndexedDB 和 WebCodecs) 和效能工具,讓使用者能夠直接在網路上製作所有影片內容。
SVGcode:將光柵圖片轉換為 SVG 向量圖形的 PWA
將色彩或單色點陣圖圖片 (PNG、JPG、JPEG、WEBP、AVIF、GIF ...) 轉換為彩色或單色向量圖片 (SVG)。
改善 Mail.ru 首頁的網站體驗核心指標資料,轉換率平均提升 10%
數個月努力改善 Mail.ru 首頁的網站體驗核心指標,使累計版面配置位移 (CLS) 的第 75 個百分位數提高 60%,平均工作階段時間提升了 2.7%,核心部分的轉換率也增加超過 10%。
Renault 如何透過評估及最佳化「最大內容繪製」來提升跳出率和轉換率
這篇文章說明 Renault 及其全球資料合作夥伴如何評估及改善網站體驗核心指標。該團隊分析了 1,000 萬次造訪到達網頁上的資料,發現最大內容繪製和轉換次數之間有顯著的關聯性,使最佳化作業的成果倍增。我們會查看這些資料點,並瞭解各團隊如何安排進行最佳化。
Swappie 如何運用網站體驗核心指標,將行動收益提升 42%
本個案研究說明 Swappie 團隊如何針對 Core Web Vitals 最佳化網頁應用程式,進而提高轉換次數和收益。
網站體驗核心指標的業務影響
本文說明網站體驗核心指標與關鍵業務指標之間的關聯性,本文將提供幾個已帶來正面影響的公司範例,協助您瞭解這些公司對使用者和業務帶來正面影響。
瞭解網站體驗核心指標如何確保 Netzwelt' 廣告收益增加 18%
瞭解德國新聞發布商 Netzwelt 如何改善網站體驗核心指標,改善使用者體驗和廣告收益。
Blibli' PWA 的每位使用者收益比先前的行動網站多了 10 倍
Blibli 如何將跳出率降低 42%、行動裝置轉換率提高 8 倍,以及單次工作階段頁數增加 2.5 倍。
改善 Telegraph Media Group 的累計版面配置位移
英國頂尖新聞網站 Telegraph 將如何從 0.25 提高至 0.1,成功將 CLS 的第 75 個百分位數提升至 250%。
橘色:全新 PWA 在行動裝置上的轉換率提高了 52%
此外,新版 PWA 的平均載入時間比舊網站快了 30%,跳出率則提升 12%,工作階段深度達 18%。
Mainline Menswear 導入 PWA,結果轉換率提升 55%
Mainline Menswear 實作漸進式網頁應用程式 (PWA),使用者將透過快取和離線功能安裝這個應用程式後,轉換率提升了 55%。
Zalando 如何運用 Lighthouse CI 將效能意見回饋從 1 天縮短至 15 分鐘
Zalando 的網路團隊發現,整合 Lighthouse CI 可主動改善效能,自動化狀態檢查功能則可比較目前的修訂版本與主要分支版本,避免發生效能迴歸問題。
Lowe's 網站是成效最好的電子商務網站之一
Lowe's 網站速度團隊建立了自動化效能測試與監控系統,根據效能預算測試提取要求,並避免將效能迴歸到實際工作環境中。
Vodafone:LCP 提升 31% 後,銷售量提升了 8%
Vodafone 進行 A/B 版本測試,著重於改善網站體驗指標,發現 LCP 提升 31% 之後,銷售量增加 8%、待開發客戶造訪率提升 15%,購物車造訪率也降低了 11%。
Wix 如何透過改善基礎架構來提升網站效能
透過個案研究,瞭解 Wix 導入了一些重大異動,以改善數百萬個網站的網站載入速度,並設法讓這些網站獲得良好的 PageSpeed Insights 和網站體驗核心指標分數。
CLS 最佳化功能如何提升 Yahoo!JAPAN News' 單次工作階段的網頁瀏覽量提高 15%
他們使用 Search Console 和 Lighthouse 監控網站體驗核心指標,發現 CLS 分數有改進的空間,讓單次工作階段網頁瀏覽量提高 15%、工作階段持續時間延長 13%,跳出率則降低 1.72 個百分點。
律動:LCP 提升 70% 與載入放棄次數降低 76% 有關
瞭解 Agrofy 如何運用網站體驗核心指標來提升負載放棄率。
淘汰 Excalidraw Electron,改用網頁版
Excalidraw 是虛擬的協作白板,可讓你透過手繪畫出圖表輕鬆素描。針對 Excalidraw 專案,我們決定淘汰 Excalidraw Desktop,這是適用於 Excalidraw 的 Electron 包裝函式,希望成為 excalidraw.com 能夠而且您能夠 (而且總是可以找到) 的網頁版本。經過仔細分析後,我們決定採用漸進式網頁應用程式 (PWA),做為未來的開發目標。
PWA 使用者購買 Gravit Designer PRO 的機率是 2.5 倍
此外,PWA 使用者的活躍使用人數比所有其他安裝類型高出 24%,新舊使用者的回訪者人數比所有其他平台高出 31%,更是如此。
Clipchamp';影片編輯器 PWA 安裝量每月成長 97%
PWA、WebAssembly 和 ChromeOS 如何協助網頁式影片編輯器,為 1,200 萬名使用者提供更出色的效能和更吸引人的體驗。
JD.ID 運用快取策略、安裝功能和推播通知,將行動裝置轉換率提高 53%
JD.ID 的整體行動轉換率 (mCVR) 提升了 53%,已安裝使用者的 mCVR 增加了 200%,每日活躍使用人數則增加了 26%。
Rakuten 24 在 PWA 上投入心力,讓使用者留存率提升 450%
讓客戶安裝網頁應用程式,可以提升流量、訪客留存率、每位客戶銷售量和轉換次數。
NDTV 針對網站體驗核心指標進行最佳化調整,使 LCP 提升了 55%
NDTV 團隊使用 PageSpeed Insights、web.dev/measure 和 WebPageTest 等工具分析可能的改善領域,並投入心力導入網站體驗核心指標,以便達成業務目標。
著重網站效能如何提升 Tokopedia' 的點閱率增加了 35%
建立網站效能資訊主頁,並最佳化 JavaScript、資源和首頁,為業務取得成功。
ZDF 如何運用離線模式和深色模式建立影片 PWA
瞭解 ZDF 如何利用離線支援、安裝性和深色模式等新型功能,打造漸進式網頁應用程式 (PWA)。
Goibibo's PWA 如何使轉換率提高 60%
瞭解印度知名線上旅遊公司 Goibibo 如何在 PWA 和 iOS/Android 應用程式之間打造可靠的使用者體驗,將轉換量提高 60%。
Mercado Libre 如何針對網站體驗指標進行最佳化調整 (TBT/FID)
Mercado Libre's 前端架構團隊完成 FID 最佳化作業的摘要,採用 TBT 做為 Proxy 指標。
毫秒創造百萬收益
4 速度指標提升 0.1 秒,可提高整個購物漏斗的進度率。
Wake Lock API 個案研究:BettyCrocker.com 上的購買意願指標提升了 300%
個案研究網站 BettyCrocker.com's 導入 Wake Lock API 的經驗。
Google 如何透過過時的重新驗證方式改善廣告成效
本個案研究說明 Google 如何運用過時的重新驗證功能,最佳化第三方廣告指令碼的成效,進而提高主要廣告業務指標。
在 eBay.com 上享受購物速度
本個案研究說明 eBay 如何最佳化網站和應用程式體驗的成效,進而提高主要業務指標。
OYO Lite:臺灣大哥大,提供最優質的網頁和 Android 應用程式
餐旅新創公司如何建構仰賴網頁內容的 Android 應用程式,大幅提高使用者參與度並降低檔案大小。
AirSHIFT 改善 React 應用程式' 執行階段效能的五種方法
AirSHIFT 團隊如何使用資料表虛擬化、RUM 資料、延遲載入、網路作業人員、效能預算和黑客松,將 React 應用程式最佳化和#39 的執行階段效能最佳化。
Truebil 如何透過網站成長茁壯
本個案研究說明 Truebil 團隊如何最佳化網頁應用程式的速度和穩定性,進而增加轉換次數和參與度。
OpenSooq 如何藉由投資網路提升參與度
瞭解 OpenSooq 團隊如何運用最佳做法,建立可靠、吸引人的 Marketplace 網頁應用程式。
我們如何將 Google 地球與網路搭配使用(')
使用 WebAssembly 改善 Google 地球的跨瀏覽器存取功能
為服務工作人員提供 Google 搜尋
您只需在 Google 上搜尋任何主題,即可在網頁中發掘有意義的相關結果。您可能不知道,
Nikkei 的多頁 PWA 提升了品質和成效
日經擁有超過 140 年的出版史,是日本最具公信力的媒體業者之一。為提供更優質的使用者體驗,並加快推動網路業務成長,Nikkei 在 2017 年 11 月成功推出漸進式網頁應用程式,結果也從這個新平台獲得了驚人的成效。
George.com 推出全新的漸進式網頁應用程式,改善行動客戶體驗
George.com 是英國首屈一指的服飾品牌,也是 ASDA Walmart 的一部分。將網站升級為漸進式網頁應用程式 (PWA) 後,該品牌的行動轉換率提高了 31%。 Asda George 對行動購物體驗的期望有望提高,因此 Asda George 認為他們必須改進過時的行動解決方案,為消費者提供更優質的服務。該團隊嘗試以行動裝置優先的做法 將重心放在設計、速度和功能上,以促成行動裝置轉換。 George.com 團隊發現,他們必須打造漸進式網頁應用程式,才能改善行動裝置體驗。他們與
BookMyShow 新推出的 Progressive Web App 轉換率提高了 80%
BookMyShow 是印度最大的售票公司,每月吸引 50% 到 430 萬人次造訪。他們運用漸進式網頁應用程式 (PWA) 開發出更完善的行動版網站、改善速度及消除資料限制,結果轉換量升幅達到 80+;%。
Ele.me 透過多頁漸進式網頁應用程式改善效能載入時間
Ele.me 是中國大陸最大的訂餐和外送公司。他們將漸進式網頁應用程式 (PWA) 建構為多頁應用程式,藉此改善行動版網站體驗,在網路不穩定時更快又可靠,同時配合營運需求來為客戶提供最佳服務。
在 WebVR 中運用舞池
Dance Tonite 與樂團 LCD Soundsystem 樂團及粉絲一起在 VR 領域不斷變化,本專案內建 WebVR 技術,不論使用或未使用 VR 平台,都能為使用者提供不同的體驗。專案創作者 Jonathan Puckey、Moniker 和 Google 的資料藝術團隊在廣告素材決策和進階最佳化技術,成功帶來出色成效。這些技術讓 3DoF 的 60 FPS 和 90FPS 達到 60 FPS,而 6DoF 的每秒要求數更是如此。此外,這些專案創作者還使用單一程式碼集,在所有平台上獲得極具吸引力的使用者體驗。
Lancôme 以 PWA 重新打造行動網站,轉換率提高了 17%
為了同時吸引流量和再參與客戶,奢華美妝品牌 Lancôme 推出了漸進式網頁應用程式 (PWA),在行動版網站上提供與應用程式類似的快速體驗
Infobae 推出漸進式網頁應用程式,讓使用者停留在行動版網站的時間超過一倍
Infobae 利用 Service Worker,在不穩定的網路中提供穩定效能。這家業界一流的 PWA 在 Lighthouse 上獲得 93/100 的成效分數,這項自動化工具可評估網頁品質。
MakeMyTrip.com 推出的全新 PWA 讓轉換率提升 3 倍
推出漸進式網頁應用程式後,MakeMyTrip.com's 行動版網站的轉換率提升了三倍,網頁載入速度則提升了 38%。
Jumia 的轉換率提高 33%,使用者安裝 PWA 的人數增加 12 倍
傳送至 Jumia' 的流量比其原生應用程式更驚人 12 倍,且仍在成長中。此外,Jumia 的跳出率也下降了 50%
Mynet 採用 AMP 型 PWA 後,行動版網站體驗速度加快 4 倍,收益也因此增加 25%
Mynet 每月為自家網站提供超過 3,400 萬名訪客,提供新聞、影片、遊戲、財務、資訊娛樂內容和娛樂內容。推出採用 Accelerated Mobile Pages (AMP) 的漸進式網頁應用程式 (PWA) 後,平均網頁載入時間縮短 4 倍。此外,Mynet 的使用者參與度大幅提升,平均停留時間增加了 43%。 由於有超過 85% 的行動流量來自行動版網站,Mynet 的行動版網站是他們策略不可或缺的一環。然而,該公司發現使用者在行動版網站上花的時間比原生應用程式少 2 倍。 Mynet
Twitter Lite PWA 大幅提升參與度並減少數據用量
Twitter Lite 漸進式網頁應用程式結合現代網頁和原生功能的優勢,提供更加完善的體驗,明確目標是立即載入、吸引使用者參與並降低數據用量
0 小時 1
0h h1 是一款適合行動裝置的趣味遊戲。 我向來非常喜歡網路技術的無窮可能,多年前能夠採納這項技術,我覺得很幸運,因為在電腦版和行動版上,近年來體驗到令人振奮的強化功能,讓網路蓬勃發展。 以及 JavaScript。天啊!對幼兒來說用 Play-Doh 吧!大致上來說,Play-Doh 和 JavaScript 都可讓你做小小的分頁;) 但這也讓它看起來很棒。 但其實您可以立即將規模從 0 降至 88 英里,在 Dropbox
OLX 運用漸進式網頁應用程式,讓行動版網站上的使用者再次互動率提升 250%
OLX 的漸進式網頁應用程式讓讀者參與度提升 250%,互動網頁互動時間也縮短了 23%
Ola 採用漸進式網頁應用程式,為十億名印度使用者提升機動性
Ola 是印度首屈一指的計程車集結網站,其使命是為數十億印度人推動行動性這間公司旗下擁有約 60 萬名司機合作夥伴,涵蓋超過 100 個印度城市。身為印度最具價值的新創公司之一,Ola 每天完成超過 100 萬趟行程,為贏得獅子在國內預估每日 3 億趟計程車的載客而奮鬥。 第 2 層和第 3 級城市 (人口有 20,000 到 99,000 的城市) 為 Ola
Voot 的漸進式網頁應用程式
Voot.com 在印度推出自家的媒體漸進式網頁應用程式。在導入後的幾天內,每位使用者的工作階段時間增加 39%,每位使用者的每日觀看次數則提升了 15%。 Voot 是印度最熱門的隨選影片產品之一,同時是原生應用程式和行動網路應用程式,提供近 35,000 小時的線上付費內容,包括來自 Colors 和 MTV 等聯播網的獨家節目、Voot Originals 內容,以及超過 8,000 部兒童影片。Voot 是由 Viacom18 經營,這是 Viacom 和 Network18 Group
PWA 設定聖誕老人追蹤器
查看網站 聖誕老人追蹤器,在 2016 年節慶季節順利升級至離線漸進式網頁應用程式, 這都要歸功於現有場景設計 聖誕老人追蹤器 是 Google 的節慶傳統。 每年 12 月都有遊戲和教育體驗,歡迎踴躍參加! 當聖誕老人休息片刻時,小精靈們努力將聖誕老人追蹤器 包括 網路 和 Android : 網路上的「聖誕老人追蹤器」是一個大型的互動式網站,擁有許多獨特的「場景」, 聚合物:支援大部分新式瀏覽器。 評估使用者的瀏覽器是否為「現代化」會經由特徵偵測決定: 聖誕老人需要 Set 和 Web
在 WebVR 中轉譯文字
「內部」平台可讓使用者在虛擬實境中述說故事,而且在 VR 環境中也沒問題,包括網路在內。使用 WebVR 後,觀眾只要造訪網站並點選連結,就能立即透過 VR 技術 (包括高階頭戴式螢幕) 觀賞內部影片。在開發過程中,我們的團隊發現在這個新環境中轉譯文字並不容易,他們利用著色器建立了範例,讓文字流程更順暢。
Bear 71 和 WebVR
觀看紀錄片 WebVR 是內建的 API ,結合立體轉譯與即時頭部追蹤功能,讓使用者可輕鬆快速地在線上觀看 VR 內容。內容創作者可使用 WebVR 製作身歷其境的 VR 內容,並在各種 VR 硬體上執行。 Bear 71 是加拿大國家電影委員會 (NFB) 製作的互動式紀錄片。最初內建於 Flash, Bear 71 最初是在 2011 年推出,廣受重大消費者青睞。此體驗的骨幹是 23
適用於 WebVR 的 Matterport VR
瀏覽網站 Matterport 支援 WebVR 支援功能,讓使用者在沉浸式虛擬實境中探索現實世界中的地點。WebVR 無須下載任何應用程式,就能降低訪客流失率,並讓合作夥伴能在自家網站中留住使用者。 WebVR 是 Matter 策略中重要的一環 ,能夠提高 VR 內容的使用率和曝光率。 Matterport VR 可讓您在互動式虛擬實境中體驗數千個真實地點。Matter 的 3D 媒體系統結合自動化 3D 室內對應技術和強大的視覺處理演算法,可讓任何人從實際地點建立沉浸式虛擬環境。與 360
WebVR Lab 的核心互動功能
查看研究室 網站設計人員很熟悉回應式設計的概念,也就是建立可在各種裝置上運作的網站,例如手機、平板電腦和電腦,以及不同的螢幕解析度和像素比例。 WebVR 針對回應式設計帶來更多挑戰。 我們可以根據兩項指標 (沉浸式程度和輸入程度) 將 WebVR 體驗分類。這些層級是依據「自由程度」(DOF) 區分。6 DOF 是指追蹤位置和方向,3 DOF 僅用於追蹤方向和 0 DOF 軌道,兩者都不會追蹤位置和方向。 如您所見,單一應用程式可能會支援非 VR
陸路
Land Lines 實驗功能可讓你透過手勢探索 Google 地球衛星影像。結合機器學習技術、最佳化演算法和顯示卡效能,在手機上不需使用後端伺服器,就能在手機上有效率地執行實驗。#39。這將檢視我們的開發程序,以及嘗試引領我們最終達到最終成果的各種方法。
氣象頻道
氣象公司 (IBM Business) 是 IBM,每天平均提供 400 億個預測要求,協助使用者規劃每天的生活,並根據天氣做出更明智的決定。
嘉年華遊輪公司
Carnival Cruise Line (嘉年華遊輪) 可透過推播通知為客戶提供具吸引力的個人化通訊服務。 下載 PDF 個案研究 嘉年華遊輪公司 (Carnival Cruise Line) 是全球最大的休閒旅遊公司之一,他們希望改善重新接觸顧客的方式。我們的目標是及時傳送自訂資訊,而無需在客戶的收件匣中爭奪消費者關注、使用所有裝置,也能輕鬆採取行動。與 Mobify 合作後,Carnival 採用了 Android 行動裝置和 Chrome
監護人專用 Smart Lock
下載 PDF 個案研究 Guardian News & Media (GNM) 發布了 theguardian.com ,這是全球規模最大的英語優質新聞網站之一。自 2011 年和 2013 年分別推出美國和澳洲的數位版本以來,來自英國境外的流量現在佔了監護人數位目標對象總數的三分之二以上。英國,GNM 每週都會發布《衛報》報紙,第六天,首次發布於 1821 年,《守護者》更是全球最古老的週日報紙。
AliExpress 專用 Smart Lock
下載 PDF 個案研究 AliExpress 於 2010 年 4 月推出,這個全球零售市場是以全球消費者為目標。這個平台可讓世界各地的消費者直接透過中國批發商和製造商購買,AliExpress 是阿里巴巴集團內的商家。 超過 200 個國家/地區的購物者已下載 AliExpress
Housing.com 採用新的 PWA 後,轉換次數提升了 40%,跳出率也降低了 40%
下載 PDF 個案研究 Housing.com 是印度的頂尖新創公司之一。今年可說是擁有 5, 000 萬次造訪,已成為印度首屈一指的線上房地產平台之一。建構 Housing Go 這個漸進式網頁應用程式 (PWA) 後,各瀏覽器的轉換總數提高了 38%。新的 PWA 還能為價值更高的使用者帶來價值,訪客單次工作階段的停留時間增加 10%,回訪者也更常回訪。 Housing.com
評估服務工作站的實際效能影響
評估服務工作站的實際效能影響
The Washington Post
AMP 讓《Washington Post》透過行動搜尋結果的回訪者增加 23% 下載 PDF 個案研究 根據近 55% 的流量來自行動裝置,《華盛頓郵報》瞭解在行動裝置上提供優質的閱讀體驗,是長期成功的關鍵。 請特別注意,這篇貼文的重點是盡可能加快行動版內容載入速度,因為資料顯示,如果內容載入速度不夠,使用者會在三秒後放棄網站。 2015 年 6 月,《華盛頓郵報》加入一群發布者與技術公司,共同建立 Accelerated Mobile Pagess 專案
打造 2016 年 Google I/O 大會漸進式網頁應用程式
使用網路元件建構 Google I/O 2016 PWA
eXtra 電子產品
United eXtra Electronics 運用網路推播通知使電子商務銷售量成長 100% 下載 PDF 個案研究 eXtra 是沙烏地阿拉伯境內成長速度最快的消費性電子產品和家電零售商。這家公司在沙烏地阿拉伯、阿曼和巴林共有 40 多家商店,為超過 1,200 萬名購物者提供服務。 沙烏地阿拉伯是全球最大的智慧型手機市場之一。eXtra 每個月透過 eXtra.com 探索、研究和購物的消費者已有超過 250 萬人,其中 100% 的行動成長率來自行動版網站。在 2016
朱米亞
推播通知可協助 Jumia 撤銷購物車放棄率,並讓轉換次數提高 9 倍 下載 PDF 個案研究 小賈是非洲首屈一指的電子商務網站,他們大多數客戶都使用行動裝置,而這類裝置帶來的流量和使用者成長也最為龐大。 在 Jumia 的行動版網站上,每天有將近四分之一的購物車放棄。為解決這個問題,客戶會透過電子郵件提醒客戶完成交易。然而,讓使用者提供電子郵件地址並不容易,而電子郵件開信率卻很低。由於有超過 65% 的行動瀏覽器網頁流量,Jumia
BaBe
BaBe 的跨瀏覽器漸進式網頁應用程式,與原生應用程式相比更卓越。 下載 PDF 個案研究 BaBe 於 2013 年推出,是印尼規模最大的新聞集結網站應用程式。目前已有超過一百萬人下載這部影片。這項純應用程式業務在 2016 年初首次遷移至網頁版,打造具備相同功能、外觀及風格與原生應用程式幾乎相同的跨瀏覽器漸進式網頁應用程式。
Konga
Konga 推出全新的漸進式網頁應用程式,讓數據用量降低 92% 下載 PDF 個案研究 香港於 2012 年推出,是奈及利亞首屈一指的電子商務網站,販售書籍、冰箱和手機等各種商品。行動裝置是帶來最多流量和使用者成長的來源。
5 英里
使用新的漸進式網頁應用程式後,跳出率降低 50%,轉換量則提高 60% 下載 PDF 個案研究 「銷售商品並購買您想要的產品!」這個總部位於達拉斯的新創公司,在北京,擁有研發中心,目前已下載超過七百萬個應用程式。 超過半數的新購物者透過行動版網站發現了 5
Suumo
日本的主要房地產網站利用網頁推播通知增加新的產品資訊,並使通知開啟率達 31%。 下載 PDF 個案研究 SUUMO 是日本的熱門房地產網站,服務是該國近 11% 的人口。每月都有 1400 萬名不重複使用者,其中許多人使用智慧型手機 搜尋了 SUUMO 的新住宅。 越來越多使用者仰賴搜尋引擎掌握越來越多的房產資訊。這表示 SUUMO
虛擬藝術課程
共有六位藝術家受邀使用 VR 繪製、設計及雕塑品。
Net-A-Porter
Net-A-Porter 透過 Google 的 Polymer 程式庫節省開發時間 NET-A-PORTER 使用 Google 的 Polymer 程式庫,在他們的線上屬性中實作以元件為基礎的設計。最終能大幅縮短開發時間,在網站上全面整合程式碼,而使用結構化資料也提升了 SEO 成效。 下載 PDF 個案研究 NET-A-PORTER 於 2000 年 6 月推出,是全球豪華時尚領域的全球領導品牌,匯集了來自全球 350 多個最美味的設計師系列。
Flipkart 使用漸進式網頁應用程式,使網站停留時間三倍
印度最大的電子商務網站 Flipkart 在 2015 年採用單純應用程式策略,並暫時關閉行動版網站。該公司發現,提供與行動應用程式一樣快速、互動性高的使用者體驗並不容易,但後來 Flipkart 決定重新思考他們的開發方式。因為他們問世後,行動網頁得以即時運作、離線運作及再次接觸使用者,因而回流於行動網路上。
使用 Polymer 建立光劍
如何使用 Polymer 設定高 FPS WebGL 專案。
Google+
我們的目標是隨時下載超過 6 萬的 HTML、6 萬的 JavaScript 以及 6 萬的 CSS!
超自然界
Beyond the Rack 運用推播通知重新接觸行動網頁的使用者,將單次造訪收益提高 26%。
AirHorner.com
AirHorner 是簡單但功能強大的漸進式網頁應用程式,不但可展現 Service Worker 的強大功能,還能透過 Web Audio API 提供你專屬的空氣槍。無論你在線上、離線或處於容易斷線的 2G 網路,都能使用這項服務引發好友或同事的困擾
實際工作環境中的 Service Worker
瞭解我們如何使用服務工作者程式庫,讓 Google I/O 2015 網頁應用程式快速且以離線為優先。 今年的 Google I/O 2015 網頁應用程式 是由 Google 的開發人員關係團隊撰寫,設計則是由 Instrument 的夥伴撰寫,他們曾撰寫實用的 音訊/視訊實驗 。我們的團隊致力於確保 I/O 網路應用程式 (我會以其代號 IOWA 稱之) 能展示現代網路的所有功能。完整的離線優先體驗是我們必備功能清單中的首要項目。 如果您最近曾閱讀本網站上的其他文章,那麼您肯定曾遇到
Madeon 冒險機器
Madeon Adventure Machine 是 Madeon 新專輯的 巧妙宣傳內容,是一款趣味鼓機。 Adventure Machine 是一款簡單的應用程式,但效能相當優異。 利用網路音訊和選用的 Web Midi (是的,您可以連接自己的合成器!),輕觸按鈕顯示的新建立的迴圈就能完美同步,而且介面在行動裝置上可正常運作,尤其是安裝在主畫面時。 如果所有節拍和迴圈的預先快取作業已經移除或採取更聰明的做法,則可大幅改善行動版 3G 的載入時間 (請參閱 WebPageTest
蜂鳥圖書館
Hummingbird Library :對 Hummingbird 是一個全新的前端,這是一款熱門的動漫手錶追蹤工具和探索網站。 動畫迷 (就像我一樣,螢幕截圖上的觀看次數確實很真實!)這個空間中的熱門網站包括 AniDB 和 MyAnimeList,但 Hummingbird 是其中最受歡迎的網站。 不過, Hummingbird 程式庫 位於現有的 Hummingbird API 上方,並進一步使用 Angular 和 Material Design 從頭開始建構。 主題顏色 和 資訊清單
Adsy.me
Adsy.me 可讓您以超快速的方式輕鬆建構行動裝置微網站。 Adsy.me 提供一項工具,讓任何人都能建立行動版 (微型) 網站,而他們會參加自己的 Dogfood 測試,立即贏得我的信任:整個工具都是一個速度飛快、回應直覺的行動網頁應用程式。 利用更多延遲載入技術,應用程式可以更快載入,並且利用全螢幕 API,以及 ServiceWorker 離線來提供的好處。 促使我們做出選擇的三大原因:提供開放性、跨平台支援,以及為使用者提供即時更新。 開放性 =
小艾爾切米
Little Alchem :這款遊戲以更大型的兄弟 Alchemy 為靈感,推出適合行動裝置的趣味組合遊戲。 Little Alchemy 是運用網路平台所有最新功能來完整優勢的典範。模擬器會使用 網頁應用程式資訊清單 ,在安裝後啟動全螢幕,並與 Android 的 主題顏色 混合。 第一次載入的速度極快,且會立即顯示預載器。此外,使用 AppCache 也能完全離線播放。太棒了! 在電腦上,封鎖右鍵通常會被視為否定 (但能讓我不慎輸入 Chrome
Hacker News 閱讀器
Hacker News Reader :適用於 Hacker News 最佳化的優質讀者。 這款應用程式提供精美、高度最佳化的 Hacker News 閱讀體驗,無論在行動裝置、平板電腦和電腦上都能順暢瀏覽。速度飛快,在行動裝置上測試時,您可能會看到流暢順暢的轉場效果。它使用了主題顏色來整合至 Android 中,並且使用 網頁應用程式資訊清單 ,因此可安裝。安裝完成後,看起來就像原生 HN 新聞閱讀器應用程式。
2014 年 Chrome 開發人員高峰會
2014 年 Chrome 開發人員高峰會網站是由 Google 自家的 Paul Lewis 公司內部製作,內容涵蓋了美國教育部 (CDS) 網站,向來說明如何為會議訪客打造優質的行動版網站體驗。
瑪麗.皮克斯 (Merry Pixmas)
Merry Pixmas :運用 3D CSS 變形服務歡慶聖誕佳節。 適合在電腦和行動裝置上順利運作的聖誕節主題示範。甚至提供全新的主題色彩支援,以及啟動全螢幕模式的主畫面體驗。 專家級提示:搖動手機即可下雪! 雖然我知道這是試用版,但針對資產和非算繪禁止 JavaScript 指定的快取標頭,或許可以改善感知的載入時間。 在 東京 ,我們長期以來一直致力於倡導回應式和行動版網站,而不是基於原生的理由。Pixmas 在專案之間停機期間的成果 來自 HTML5 和 CSS3
可擴充向量圖形
SVGOMG :可擴充的 Material Design 回應式前端,適用於 SVGO。 SVGOMG 以我們自己的 Jake Archibald 建構而成,是使用網路技術編寫而成的完善回應與功能最完美的範例。它擁有精美的質感設計外觀,ServiceWorker 可確保應用程式快速載入且可離線使用,並且在行動裝置上順暢轉換。 我們唯一必須提供的特殊功能,就是因為缺少主要 UI,初始使用者體驗令人困惑。除此之外,做得好! 太慢了。總延遲時間。我並非 Windows 原生應用程式的開發專家,我並非
網路篩選器
網路篩選器 :快速、快速又髒污的相機濾鏡。 是一款功能強大的網頁式相機應用程式,可讓您即時套用濾鏡。系統會自動將圖片儲存至本機裝置,這表示圖片通常會與選擇的雲端儲存空間供應商 (例如 G+) 保持同步,方便分享閉幕。 應用程式可以安裝在主畫面,但至少在 Android 上,應用程式每次啟動時,系統會要求使用者授予相機使用權限。這顯然不是開發人員端的問題,而是 Chrome/Android 上的問題,並向我們提供修正通知的備忘錄。 我自 Netscape 4
2014 年哈比人體驗
在《霍比特人》體驗中加入 WebRTC 遊戲 為了配合《霍比特人:五軍之戰》上映,我們延續去年的 Chrome 實驗,推出了 《霍比特人:五軍之戰》 的全新內容。隨著越來越多瀏覽器和裝置能查看內容,並支援 Chrome 和 Firefox 的 WebRTC 功能,這次的重點是擴大 WebGL 的使用範圍。今年的實驗共有三個目標:
透過 Chrome 建構內容
將 LEGO® 積木帶入跨裝置網頁 Build with Chrome 是針對 Chrome 電腦版使用者推出的有趣實驗, 最初在澳洲推出 ,2014 年重新推出後,已在全球推出,並與《LEGO® MOVIE™》合作,且新增支援行動裝置。本文將分享我們從這項專案中學到的幾點,特別是從僅限於電腦的體驗,轉移到同時支援滑鼠和觸控輸入的多螢幕解決方案。 第一版「用 Chrome 建構」計畫於 2012 年在澳洲推出。我們希望以全新方式展示網路的強大功能,並讓更多使用者認識 Chrome。
中土世界的前端
多裝置開發功能的逐步操作說明 在 第一篇文章 中,我們介紹了 Chrome 實驗「穿越中土世界」 的開發作業,並著重於行動裝置的 WebGL 開發作業。本文將討論在建立其他 HTML5 前端時遇到的挑戰、問題和解決方法。 首先,我們來談談如何從螢幕大小和裝置功能的角度,調整這項實驗,讓它同時適用於電腦和行動裝置。 整個專案採用非常「電影化」的風格,我們希望在設計上維持橫向固定框架,保留電影的魔幻效果。由於專案的大部分內容都包含互動式迷你「遊戲」,因此讓這些內容溢出畫面也不合理。
哈比人體驗
運用行動 WebGL 重現中土世界 以往,要將互動式、以網頁為基礎的多媒體體驗帶入行動裝置和平板電腦,一直是項挑戰。主要限制包括效能、API 可用性、裝置上的 HTML5 音訊限制,以及缺乏無縫內嵌影片播放功能。 今年稍早,我們與 Google 和華納兄弟的夥伴合作,為新版《魔戒世界:霍比特人》 The Hobbit: The Desolation of Smaug 建立行動版內容優先的網路體驗。建立多媒體重重的行動版 Chrome 實驗,是一項非常有趣且具有挑戰性的任務。 我們現在已針對新
個案研究 - 建築賽車
Racer 是 Active Theory 開發的行動版 Chrome 實驗,以網路為基礎。最多可邀請 5 位好友連線,在每部螢幕上進行比賽。我們運用 Google Creative Lab 提供的概念、設計和原型,以及 Plan8 提供的音效,在 8 週內進行重複建構,並在 2013 年 I/O 大會上推出。遊戲推出幾週後,我們有幸有機會回答開發人員社群提出的幾個有關遊戲運作方式的問題。以下是主要功能的詳細說明,以及常見問題的解答。
個案研究 - The Sounds of Racer
Racer 是一項多玩家、多裝置的 Chrome 實驗。復古風格的軌道賽車遊戲,可在多個螢幕上遊玩。在 Android 或 iOS 手機或平板電腦上。任何人皆可加入。沒有應用程式。沒有已下載的內容。僅限行動版網頁。 Plan8 與 14islands 合作,以喬吉歐莫洛德 (Giorgio Moroder) 的原創曲目為基礎,打造動態音樂和音效體驗。Racer
個案研究 -《Inside World Wide Maze》
World Wide Maze 是一款遊戲,玩家需要使用智慧型手機,透過由網站建立的 3D 迷宮,引導滾動球前往目標點。 遊戲大量使用 HTML5 功能。舉例來說, DeviceOrientation 事件會從智慧型手機擷取傾斜資料,然後透過 WebSocket 傳送至電腦,讓玩家在由 WebGL 和 Web Workers 建構的 3D 空間中找到方向。 本文將詳細說明這些功能的使用方式、整體開發程序,以及最佳化重點。 DeviceOrientation 事件 ( 範例 )
建立擲骰子
Roll It 是 Chrome 實驗 ,只需使用手機和電腦上的瀏覽器,即可重新體驗經典的木板人遊戲。手機上的瀏覽器可讓您輕鬆瞄準並滾動球,而電腦上的瀏覽器則可透過 WebGL 和 Canvas 即時算繪 Roll It 街道的圖形。兩部裝置會透過 Websockets 進行通訊。沒有應用程式。沒有已下載的內容。沒有符記。只要有新式瀏覽器即可使用。 在 Google Creative Lab 的指導下, Legwork 開發了使用者體驗、介面和遊戲環境,然後與開發合作夥伴 Mode Set
新一代網路版面配置 - 國家地理森林巨人
運用 CSS 和瀏覽器版面配置的工具,就能為網頁內容提供精彩的視覺效果。使用 CSS 濾鏡、WebGL、HTML5 影片、SVG、畫布等網路功能,以及 CSS 區域、CSS 形狀和 CSS 自訂濾鏡等新興技術,可大幅擴展創作空間。長久以來,Adobe 一直與熱愛版面配置和設計的內容創作者合作,因此積極將這項知識應用於網路,並為許多不斷演進的網路標準做出貢獻。 在 National Geographic
個案研究 - 2013 年 Google I/O 大會實驗
為了在 Google I/O 2013 大會註冊開放前,讓開發人員對該網站產生興趣,我們開發了一系列以行動裝置為優先的實驗和遊戲,重點是觸控互動、生成式音訊和探索樂趣。這類互動體驗的靈感來自程式碼的潛力和遊戲的力量,因此在輕觸新 I/O 標誌時,一開始會依序播放「I」和「O」的簡單音效。 我們決定以 HTML5 互動中不常見到的搖晃自然效果,實作 I 和 O 動畫。我們花了一些時間調整選項,讓使用者能感受到有趣的互動體驗。
個案研究 - 自動重新調整 HTML5 遊戲大小
2010 年夏天,我們製作了「Sand Trap」遊戲,並參加行動裝置 HTML5 遊戲競賽。但大多數手機都只顯示部分遊戲畫面,或是將遊戲縮小到無法操作的程度。因此,我們決定自行調整遊戲,讓遊戲能流暢地調整至任何解析度。經過一些重新編寫程式和運用本文所述的構想後,我們製作的遊戲便可在任何新式瀏覽器中執行,無論是桌上型電腦或行動裝置皆可。 這種方法在《Sand
個案研究 -《找出奧茲家》
「Find Your Way to Oz」 是 Disney 在網路上推出的全新 Google Chrome 實驗。你可以透過互動式旅程,在堪薩斯州馬戲團中展開冒險,並在遭到大風暴捲入後,來到奧茲國。 我們的目標是結合電影的豐富內容和瀏覽器的技術能力,打造有趣的沉浸式體驗,讓使用者能與內容建立強烈連結。 這項工作內容太龐大,無法在本篇文章中完整呈現,因此我們深入研究,並挑選出一些我們認為有趣的技術故事章節。我們也從中擷取了一些難度逐漸增加的專門教學課程。
個案研究 - 使用 Chrome 的 JAM
如何讓 UI 更出色 JAM with Chrome 是 Google 推出的網路音樂專案,透過 Chrome 進行 JAM 時,來自世界各地的使用者可以組成樂團,並在瀏覽器中即時進行 JAM。 DinahMoe 團隊突破了 Chrome 的 Web Audio API 的限制, Tool of North America 團隊打造了這個介面,讓使用者可以彈撥、敲打和演奏電腦,就像是樂器一樣。 在 Google Creative Lab 的創意指導下,插畫家 Rob Bailey 為 JAM
創下 100,000 顆星
你好!我是 Google 資料藝術團隊的 Michael Chang,我們最近完成了 100,000 Stars Chrome 實驗 ,以圖像呈現附近的星星。這個專案是使用 THREE.js 和 CSS3D 建構而成。在本個案研究中,我將概略說明發現過程、分享一些程式設計技巧,並在最後分享一些未來改善方向。 這裡討論的主題相當廣泛,而且需要具備一些 THREE.js
個案研究 - 使用 Chrome 的 JAM
如何製作出精彩的音訊 JAM with Chrome 是 Google 推出的網路音樂專案,透過 JAM with Chrome,來自世界各地的使用者可以組成樂團,並在瀏覽器中即時即興創作音樂。我們 DinahMoe 很榮幸參與這個專案。我們的角色是為應用程式製作音樂,以及設計及開發音樂元件。開發工作分為三個主要領域: 音樂工作站 ,包括 MIDI
Movi Kanti Revo - 第 1 部分 - 建置 3D 世界
Movi.Kanti.Revo 是 Cirque du Soleil 打造、Subatomic Systems 開發的新感官 Chrome 實驗,透過新式網路技術將 Cirque du Soleil 的奇幻世界帶到網路上。 實驗是使用 HTML5 建立的,環境則完全採用標記和 CSS 建構而成。就像舞台上的道具一樣, div 、 img 、小型 video 和其他元素會使用 CSS 定位在 3D 空間中。使用新的 getUserMedia API
個案研究 - SONAR,HTML5 遊戲開發
去年夏天,我擔任商業 WebGL 遊戲 SONAR 的技術主管。這個專案花了約三個月的時間完成,而且是從頭開始在 JavaScript 中完成。在開發 SONAR 的過程中,我們必須為許多問題找到創新的解決方案,以便在未經測試的 HTML5 新環境中運作。特別是,我們需要解決一個看似簡單的問題:如何在玩家啟動遊戲時,下載及快取超過 70 MB 的遊戲資料? 其他平台有現成的解決方案可解決這個問題。大多數的遊戲主機和電腦遊戲會從本機 CD/DVD 或硬碟載入資源。Flash
個案研究 - Building Technitone.com
Technitone.com 融合了 WebGL、Canvas、Web Sockets、CSS3、Javascript、Flash 和 Chrome 中的新 Web Audio API 。 本文將介紹製作過程的各個面向:企劃、伺服器、音效、視覺效果,以及我們用於互動式設計的部分工作流程。大部分的章節都包含程式碼片段、示範和下載項目。文章結尾處有下載連結,您可以將所有檔案下載為一個 ZIP 檔案。 我們絕非 gskinner.com 的音訊工程師,但如果有挑戰,我們會想辦法解決:
個案研究 - Bouncy Mouse
在去年年底在 iOS 和 Android 上發布 Bouncy Mouse 後,我學到了幾個非常重要的教訓。其中最重要的一點是,要打入成熟市場並不容易。在競爭激烈的 iPhone 市場,要吸引使用者並不容易;在競爭較不激烈的 Android 市集,雖然進展較順利,但仍不容易。有了這次經驗,我發現 Chrome 線上應用程式商店有個有趣的商機。雖然 Web 商店並非空無一物,但其高品質 HTML5
個案研究 - HTML5 MathBoard
MathBoard on iPad 是 PalaSoftware 應用程式,是一款經過精心設計的應用程式,內含許多細微但自然的動畫,以及獨特的逼真外觀和感受。目標是將 iPad 應用程式以最高保真度移植至 HTML5。 N2N-Apps 是一家軟體開發公司,專注於運用 HTML5 技術建構新一代的網頁和行動應用程式。該公司在 2010 年獲得 Jeremy Chone 的投資,他曾在 Netscape、Oracle 和 Adobe 累積 11
個案研究 - 打造 Stanisław Lem Google Doodle
Google 首頁是很引人入勝的環境,方便你在當中編寫程式碼。但其中包含許多具挑戰性的限制:我們特別重視速度與延遲時間,才能滿足各種瀏覽器的需求和各種情況,...沒錯,就是帶來驚喜與樂趣。 我正在討論 Google Doodle ,這是一種會不定期取代 Google 標誌的特殊插圖。 儘管我與筆和筆刷的關係長久以來 對重新訓練的定律產生了強烈的轉變 但我常常會促成互動才算互動 我和許多人共同編寫的互動式 Doodle ( Pac-Man 、 Jules Verne 、 World’s Fair
個案研究 - 串流會議的即時更新
開發人員可透過 WebSockets 和 EventSource ,建立能夠與伺服器即時通訊的網頁應用程式。 Stream Congress (可在 Chrome 線上應用程式商店 中取得) 會即時更新美國國會的運作情形。它能串流播放 House 和參議院的樓層更新、相關新聞快報、美國國會成員的推文,以及其他社群媒體動態。這個應用程式會記錄國會的業務,因此應全天開啟。 WebSockets 規格因其可在瀏覽器和伺服器之間建立穩定的雙向 TCP 套接字 ,而受到相當程度的關注。TCP
個案研究 - 將 Wordico 從 Flash 轉換為 HTML5
當我們將 Wordico 填字遊戲從 Flash 轉換為 HTML5 時,第一個任務就是忘掉所有關於在瀏覽器中打造豐富使用者體驗的知識。雖然 Flash 提供單一且全面的 API,可用於所有應用程式開發作業 (從向量繪圖到多邊形命中偵測,再到 XML 剖析),但 HTML5 則提供一堆規格,並支援各種瀏覽器。我們也想知道,HTML 這類文件專用語言,以及 CSS 這類以方塊為主的語言,是否適合用於建構遊戲。遊戲是否會在各瀏覽器中顯示一致的內容,就像在 Flash
個案研究 - Onslaught!運動場
我們在 2010 年 6 月得知,當地出版「雜誌」 Boing Boing 舉辦 遊戲開發競賽 。我們認為這是一個絕佳的理由,可以使用 JavaScript 和 <canvas> 快速製作簡單的遊戲,因此就開始著手製作。比賽結束後,我們仍有許多想法,希望能完成我們開始的計畫。以下是個案研究的結果,這是一款名為「Onslaught」的小遊戲! 競技場 。 由於 比賽主旨 是開發以 芯片音樂 為主題的遊戲,因此我們的遊戲必須具有復古 Nintendo Entertainment
個案研究 - 20thingsilearned.com 的《Page Flip Effect》
2010 年, F-i.com 與 Google Chrome 團隊合作,共同開發一款以 HTML5 為基礎的教育性網路應用程式,名為「20 Things I Learned about Browsers and the Web」( www.20thingsilearned.com )。這個專案的其中一個重要概念,就是最好以 書籍的形式 呈現。由於本書內容主要講述開放式網路技術,我們認為,讓容器本身成為這些技術可協助我們達成的現今成就範例,是保持一致性的關鍵。
個案研究 - 瞭解 HTML5 畫布
在 2010 年春季,我對 HTML5 和相關技術的支援快速增加感到興趣。當時,我和朋友在為期兩週的遊戲開發競賽中互相較勁,藉此磨練程式設計和開發技能,並將我們不斷拋出來討論的遊戲構想付諸實現。因此,我自然而然地開始在競賽作品中加入 HTML5 元素,以便進一步瞭解這些元素的運作方式,並執行先前 HTML 規格幾乎無法執行的操作。 在 HTML5 的眾多新功能中,對畫布標記的支援日益增加,讓我有機會使用 JavaScript 實作互動式藝術,進而嘗試實作現在稱為「Entanglement」
個案研究 - deviantART muro 中的 HTML5 使用
2010 年 8 月 7 日,deviantART 慶祝 10 週年。 慶祝生日,我們推出一款名為 deviantART muro 的 HTML5 繪圖工具。 這項工具可以當做獨立的網頁應用程式,也可提供用於在論壇留言中新增相片的簡易繪圖工具。 DeviantART 社群抱持著充滿熱忱的全新繪圖工具,而這項工具本身帶來的流量,現在與某些低廉的網站資源相比可觀。自推出以來,大約每 5 秒使用 deviantART muro 提交新繪圖。這些只是完成的繪圖數量,許多程式已經開始而尚未儲存。
個案研究 - 在 Chrome 中使用拖曳功能進行下載
拖曳放置 (DnD) 是 HTML 5 的眾多優異功能之一,並且受到 Firefox 3.5、Safari、Chrome 和 IE 的支援。Google 最近推出了 新功能 ,讓 Google Chrome 使用者可以將檔案從瀏覽器拖曳至電腦桌面。這項功能非常方便,但直到 Ryan Seddon 發布一篇文章,說明他對這項新功能的 發現 ,這項功能才廣為人知。 在 Box.net,我們很高興這些新功能可協助我們改善雲端內容管理解決方案,並為開發人員社群做出更多貢獻。很高興在此宣布,我們已將
How Ray-Ban doubled conversion rate and reduced exit rate by 13% through prerendering using the Speculation Rules API
Learn how Ray-Ban improved LCP by using the Speculation Rules API, and how it improved Ray-Ban's ecommerce platform's business performance.
How QuintoAndar reduced INP by 80%, increasing conversions by 36%
QuintoAndar significantly improved its web performance by reducing its Interaction to Next Paint (INP) by 80%, leading to a 36% increase in conversions year-over-year.
How YouTube improved video performance with the Media Capabilities API
Using the Media Capabilities API lets you better target video codecs, frame rates, and resolutions based on the capabilities of your users' devices.
Forbes
Forbes is re-defining modern web development with Progressive Web App technology.
Wego
There's a new way to deliver amazing user experiences on the web. Travel company Wego has built a successful AMP based Progressive Web App (PWA).
Alibaba
Alibaba.com is the world’s largest online business-to-business (B2B) trading platform, serving 200+ countries and regions. After upgrading their site to a Progressive Web App (PWA), they saw a 76 percent increase in total conversions across browsers.
AliExpress
AliExpress increases conversion rate for new users by 104% with new Progressive Web App Download PDF Case study "Smarter shopping, better living!" is the motto of AliExpress, a website where shoppers can buy everything from baby clothes to