以 Photoshop 直接在瀏覽器中執行軟體的概念，很多年前很難想像。不過，Adobe 透過使用多種新的網路技術，將 Photoshop 的公開測試版導入網路上。
過去三年來，Chrome 持續致力於改善網頁應用程式，力求讓瀏覽器能發揮無限可能。這類網頁應用程式就是 Photoshop，以 Photoshop 直接在瀏覽器中執行軟體的概念，很多年前很難想像。不過，Adobe 透過使用多種新的網路技術，將 Photoshop 的公開測試版導入網路上。
(如果您偏好看完整部影片，也可以參閱這篇文章，觀看這篇文章)。
我們將在這篇文章中，首次分享詳細說明 Google 相簿如何擴展到網頁版的相片。您可以在自己的應用程式中使用 Adobe 的所有 API，以及其他項目。請務必詳閱與網路功能相關的網誌文章，從中汲取靈感，並觀看 API 追蹤工具，瞭解我們目前推出的優質服務。
為什麼要使用 Photoshop
隨著網路發展，網站及網頁應用程式與平台專屬應用程式相較之下的主要優勢，至今不曾改變。這些優勢包括許多獨特功能，例如可連結、暫時和通用，但其基礎提供了簡易存取、輕鬆共用和出色的協作能力。
網址的簡單功能，就是任何人都可以點選網址並立即開啟。只要有瀏覽器，不必安裝應用程式或擔心裝置搭載的是哪種作業系統。如果是網頁應用程式，表示使用者可以存取應用程式及其文件和註解。因此，網路成為理想的協作平台，而創意和行銷團隊將更是如此。
Google 文件就是這種簡化存取方式的先驅。我們大多都知道要開始建立文件、將連結傳送給其他人，還能立即跳到應用程式、特定文件或註解。從那時起，數項令人驚豔的應用程式 (如我們過去介紹過的產品) 都開始採用這個模型，而現在的 Photoshop 也同樣有所助益。
Photoshop 如何進到網路？
網路一開始是只適合文件的平台，但它的發展至今已大幅成長。Gmail 等早期應用程式顯示出更複雜的互動功能和應用程式，從那時起，我們目睹了網路應用程式的共同開發成果，在網路應用程式領域突破極限，瀏覽器廠商也進一步擴充網路功能，做出了亮眼的表現。而此情人迴圈的最新疊代作業，就是已啟用 Photoshop 的相關服務。
Adobe 先前將 Spark 和 Lightroom 帶入網路世界，多年來一直是想將 Photoshop 引進網路，然而，這些瀏覽器因為 JavaScript 的效能限制、程式碼缺少完善的編譯目標，以及缺少網路功能等因素而遭到封鎖。請繼續閱讀，瞭解 Chrome 內建的功能來解決這些問題。
使用 Emscripten 進行 WebAssembly 移植作業
WebAssembly 和其 C++ 工具鍊 Emscripten 是解鎖 Photoshop 網路技術的關鍵，而 Adobe 不必從頭開始，但可以利用現有的 Photoshop 程式碼集。WebAssembly 是可攜式二進位檔指示組，可在所有已設計為程式設計語言的編譯目標瀏覽器中運送。這表示，以 C++ 撰寫的 Photoshop 等應用程式可以直接移植到網路，而無需使用 JavaScript 重新編寫。如要開始攜碼轉移，請參閱完整的 Emscripten 說明文件，或參考這個如何移植程式庫的指南。
Emscripten 是功能齊全的工具鍊，不僅可協助您將 C++ 編譯為 Wasm，還提供可將 POSIX API 呼叫轉換為網路 API 呼叫的翻譯層，甚至將 OpenGL 轉換為 WebGL。舉例來說，您可以移植參照本機檔案系統的應用程式，Emscripten 會提供模擬的檔案系統來維持功能。
Emscripten 已經有一段時間將 Photoshop 的大部分部分轉移到網路，但速度未必足夠。我們持續與 Adobe 合作，找出瓶頸發生的位置，並改善 Emscripten。Photoshop 依附於多執行緒，讓 WebAssembly 導入動態多執行緒技術是相當重要的必要條件。
此外，在 C++ 中非常常見以例外狀況為基礎的錯誤處理機制，但不適用於 Emscripten 和 WebAssembly。我們與 W3C 中的 WebAssembly Community Group 合作，共同改善 WebAssembly 標準和相關工具，讓 WebAssembly 能出現 C++ 例外狀況。
Emscripten 不僅可用於大型應用程式，也能讓你移植程式庫或小型專案！舉例來說，您可以查看如何使用 Emscripten 將熱門的 OpenCV 程式庫編譯網路。
最後，WebAssembly 提供進階效能基本功能，例如 SIMD 指令，可大幅提升網頁應用程式效能。舉例來說，Halide 是 Adobe 的效能關鍵。這裡的 SIMD 可提供平均 3 到 4 倍的快轉速度，在某些情況下，加快速度是 80 至 160 倍。
WebAssembly 偵錯
如果沒有合適的工作工具，就無法順利完成大型專案。這是因為 Chrome 團隊開發了功能完整的 WebAssembly 偵錯支援。這項服務支援逐步瀏覽原始碼、設定中斷點、暫停例外狀況、支援多種類型的變數檢查，甚至支援開發人員工具控制台中的評估基本支援！
請務必查看有關如何使用 WebAssembly Debugging 的授權指南。
高效能儲存空間
由於 Photoshop 文件數量龐大，因此 Photoshop 的重點是能夠在使用者平移裝置時，以動態方式將磁碟中的資料移至記憶體內。在其他平台上，通常需要透過 mmap 進行記憶體對應完成，但在網站上無法實際執行，也就是直到原始私人檔案系統存取控制代碼開發完成並實作作為來源試用為止！您可以參閱說明文件，瞭解如何運用這個全新 API。
畫布的 P3 色域
過去，網路色彩早已在 sRGB 色域中指定，這是 990 年代中期的標準，以日光環狀管控的功能為基礎。在交替的八十世紀中，攝影機和螢幕已取得長足進步，而且許多更大且功能更強大的色彩空間都已標準化。Display P3 是最熱門的現代色域之一。Photoshop 使用 Display P3 畫布，在瀏覽器中更準確顯示圖片。尤其是，在支援 Display P3 資料的新型螢幕上，會盡可能顯示亮白色、明亮的色彩和陰影細節的圖片。我們進一步建構 Display P3 Canvas API 來啟用高動態範圍顯示功能。
網頁元件和連結
Photoshop 是知名的大型應用程式，提供數百個 UI 元素，支援數十種工作流程。這款應用程式是由多個團隊運用各種工具和開發做法所打造，但不同的部分必須整合成一致、高成效的團隊。
為達成這項挑戰，Adobe 決定採用網頁元件和 Lit 程式庫，Photoshop 的 UI 元素來自 Adobe 的 Spectrum Web 元件程式庫，這是輕量且高效能的 Adobe 設計系統，適用於任何架構，甚至完全沒有架構。
更棒的是，整個 Photoshop 應用程式是使用以 Lit 為基礎的網頁元件建構而成。該團隊運用瀏覽器的內建元件模型和 Shadow DOM 封裝，輕鬆整合其他 Adobe 團隊提供的一些 React 程式碼「獨立」。
透過 Workbox 使用 Service Worker 快取
服務工作處理程序可做為可程式設定的本機 Proxy、攔截網路要求並運用網路、長效快取或兩者混用的資料。
V8 團隊努力提升效能時，服務工作人員首次使用快取的 WebAssembly 回應時，Chrome 會產生並儲存最佳化版本的程式碼，即使是數 MB 的 WebAssembly 指令碼，通常在 Photoshop 程式碼集中都很常見。服務工作站在 install 步驟期間快取 JavaScript 時，系統會進行類似的預先編譯作業。無論是哪種情況，Chrome 都能以最短的執行階段負擔，載入並執行快取指令碼的最佳化版本。
但網路上的 Photoshop 必須部署服務工作處理程序，預先載入其許多 JavaScript 和 WebAssembly 指令碼，才能善用這項優勢。由於這些指令碼的網址是在建構期間產生，而且快取快取的邏輯可能相當複雜，因此他們決定改用由 Google 維護的一組程式庫 (稱為 Workbox)，在建構程序中產生 Service Worker。
在以 Workbox 為基礎的 Service Worker 與 V8 引擎的指令碼快取，效能大幅提升。具體數據因執行程式碼的裝置而異，但該團隊估計這些最佳化作業將程式碼初始化作業耗費的時間減少 75%。
Adobe 的後續發展
Photoshop Beta 版才剛推出，經過我們改善，在 Photoshop 此 Beta 版推出後，我們已進行多項效能和功能改善。Adobe 並未停止使用 Photoshop，而打算積極將 Creative Cloud 拓展至網路，讓 Adobe 成為創意內容創作及協同合作的主要平台。這項功能可讓數百萬名首次創作者分享自身經歷，並受惠於創新的網路工作流程。
Adobe 不斷致力突破極限，Chrome 團隊也將繼續合作，推動 Adobe 和充滿活力的網頁程式開發人員生態系統，共同推動網路發展。當其他瀏覽器能跟上這些新型瀏覽器的功能，我們很高興 Adobe 也能夠提供他們自己的產品。我們會持續拓展網站版圖，請密切留意日後的最新動態！
如要進一步瞭解如何使用網頁版 Photoshop (Beta 版)，請前往 Adobe 說明中心。