SlideShare ist ein Scribd-Unternehmen logo
1 von 53
Downloaden Sie, um offline zu lesen
#insiderDevTour
使用最新 Edge 瀏覽器來進行開發
Poy Chang
Developer / Blogger / Father
#insiderDevTour
Poy Chang
目前任職于全美 100 大私人企業,負責企業內部 IT 解決方案設計
與開發,專注於 Azure、.NET Core、Angular 等技術研究
✓ Angular Taiwan 社群核心成員
✓ Microsoft MVP Developer Technologies
✓ 2019 廣州 Global Azure Bootcamp 講師
✓ 2018 臺北 Angular TW Conf 講師
✓ 2018 臺北 Azure Tech Day Party 講師
✓ 2018 台中 .NET Conf 講師
✓ 2018 北京 Global Azure Bootcamp 講師
#insiderDevTour
#insiderDevTour
#insiderDevTour
瀏覽器的 Web 功能不一致,導致相容性問題
Web 開發人員告訴我們什麼?
#insiderDevTour
2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019
#insiderDevTour
瀏覽器的 Web 功能不一致,導致相容性問題
跨操作系統的瀏覽器版本,增加測試和開發成本
Web 開發人員告訴我們什麼?
#insiderDevTour
#insiderDevTour
#insiderDevTour
#insiderDevTour
瀏覽器的 Web 功能不一致,導致相容性問題
跨操作系統的瀏覽器版本,增加測試和開發成本
更新週期長,造成跟不上主流 Web 功能,無法快速錯誤修正
Web 開發人員告訴我們什麼?
#insiderDevTour
#insiderDevTour
Updated daily
#insiderDevTour
瀏覽器的 Web 功能不一致,導致相容性問題
跨操作系統的瀏覽器版本,增加測試和開發成本
較長的更新間隔,造成跟不上主流 Web 功能,又無法快速錯誤修正
Web 應用程式需要靈活性,使用 Web 標準或將 Web 與本機混合使用
Web 開發人員告訴我們什麼?
#insiderDevTour
❌
Windows Web
Applications
Hosted Web
Applications
Progressive Web
Applications
Capabilities via WinRT
1
2
3
✔
#insiderDevTour
Web Standards
Windows Web
Applications
Hosted Web
Applications
Progressive Web
Applications
Capabilities via WinRT
1
2
3
#insiderDevTour
Demo
A preview of Progressive Web Apps in Edge
#insiderDevTour
跨平台的 Web 應用程式
Progressive Web Apps
Preview available
via Dev & Canary Channel
100% web standards based
Discovered and installed via browser
Available across all versions of Windows
Available cross-platform
#insiderDevTour
瀏覽器的 Web 功能不一致,導致相容性問題
跨操作系統的瀏覽器版本,增加測試和開發成本
較長的更新間隔,造成跟不上主流 Web 功能,又無法快速錯誤修正
Web 應用程式需要靈活性,僅使用 Web 標准或將 Web 與本機混合使用
WebViews 需要使用最新的 Web 功能,並提供相容版本的選項
Web 開發人員告訴我們什麼?
#insiderDevTour
使用 WebViews 的原生 App
#insiderDevTour
全新 WebView 控制項
Always up-to-date
Consistent with the browser version
Consistent across all Windows versions
Available across Win32 and UWP apps
#insiderDevTour
全新 WebView 控制項
Bring your own version
Packaged and updated with the app
Consistent across all Windows versions
Available across Win32 and UWP apps
Always up-to-date
Consistent with the browser version
Consistent across all Windows versions
Available across Win32 and UWP apps
(default) (optional)
#insiderDevTour
對於現有的應用程式…
Windows Store based
Web Applications
(WWA, HWA, PWA)
EdgeHTML or MSHTML
based WebView
Other hybrid app types
(Electron, CEF etc.)
…continue to work as-is 🙂
#insiderDevTour
瀏覽器的 Web 功能不一致,導致相容性問題
跨操作系統的瀏覽器版本,增加測試和開發成本
較長的更新間隔,造成跟不上主流 Web 功能,又無法快速錯誤修正
Web 應用程式需要靈活性,僅使用 Web 標准或將 Web 與本機混合使用
WebViews 需要使用最新的 Web 功能,並提供相容版本的選項
開發人員工具應該在所有 Web 內容和平台上保持一致
Web 開發人員告訴我們什麼?
#insiderDevTour
#insiderDevTour
We believe the
evolution of the web
is best served through
standards bodies
1 2 3 4
We will respect the
architectural
requirements and
engineering
approaches used in
Chromium
3
When seeking
improvements in the
web platform, our
default position will be
to contribute
2
We are making this
decision for the long
term
1
#insiderDevTour
#insiderDevTour
微軟自 2018 年 12 月宣布貢獻 Chromium 專案以來,已提交 400 次以上的程式碼貢獻
#insiderDevTour
Working in the open
https://github.com/MicrosoftEdge/
MSEdgeExplainers
#insiderDevTour
讓網路更適合
每一個人
Accessibility Windows Evolving web
#insiderDevTour
讓網路更適合
每一個人 改善 Windows 體驗
跟著網路持續進化
Accessibility Windows Evolving web
#insiderDevTour
讓網路更適合
每一個人
Windows Evolving web
#insiderDevTour
Chromium 62
on Windows 10
Edge 16
on Windows 10
Windows Evolving web
#insiderDevTour
將操作系統級別的高對比度設置,
應用於標準的 Web 內容
Windows Evolving web
https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/Accessibility/HighContrast/explainer.md
#insiderDevTour
Windows Evolving web
#insiderDevTour
Windows Evolving web
#insiderDevTour
讓網路更適合
每一個人
Windows Evolving web
#insiderDevTour
讓網路更適合
每一個人 改善 Windows 體驗
跟著網路持續進化
Windows Evolving web
#insiderDevTour
讓網路更適合
每一個人
對無障礙的承諾
改善 Windows 體驗
跟著網路持續進化
Accessibility Windows Evolving web
#insiderDevTour
讓網路更適合
每一個人
對無障礙的承諾
改善 Windows 體驗
Accessibility Windows Evolving web
#insiderDevTour
生物識別的身份驗證技術,引入
Web 以實現無密碼和雙因素身份
驗證
Accessibility Windows Evolving web
#insiderDevTour
Demo
Web Authentication
#insiderDevTour
改進網頁的觸摸板,觸控,鼠標
滾輪,鍵盤和滾動條滾動
Accessibility Windows Evolving web
#insiderDevTour
Accessibility Windows Evolving web
#insiderDevTour
Demo
Scrollbar scrolling
#insiderDevTour
讓網路更適合
每一個人
對無障礙的承諾
改善 Windows 體驗
Accessibility Windows Evolving web
#insiderDevTour
#insiderDevTour
讓網路更適合
每一個人
對無障礙的承諾
改善 Windows 體驗
跟著網路持續進化
Accessibility Windows Evolving web
#insiderDevTour
讓網路更適合
每一個人
對無障礙的承諾
改善 Windows 體驗
跟著網路持續進化
Accessibility Windows Evolving web
#insiderDevTour
與我們分享您在網絡上未滿足的需求的反饋
Windows Evolving webAccessibility
#insiderDevTour
我們的新焦點
一致的平台和工具
使網絡更好
#insiderDevTour
Learn more!
Check out the labs and resources!
aka.ms/insiderdevtour-labs
#insiderDevTour
Insider Dev Tour

Weitere ähnliche Inhalte

Was ist angesagt?

2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定
2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定
2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定
Kyle Shen
 
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
Will Huang
 

Was ist angesagt? (20)

twMVC#42 Azure DevOps Service Pipeline設計與非正常應用
twMVC#42 Azure DevOps Service Pipeline設計與非正常應用twMVC#42 Azure DevOps Service Pipeline設計與非正常應用
twMVC#42 Azure DevOps Service Pipeline設計與非正常應用
 
Developing Serverless application with Microsoft Azure and Cognitive Services
Developing Serverless application with Microsoft Azure and Cognitive ServicesDeveloping Serverless application with Microsoft Azure and Cognitive Services
Developing Serverless application with Microsoft Azure and Cognitive Services
 
2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定
2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定
2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定
 
twMVC#23 | 快速上手 Azure Functions
twMVC#23 | 快速上手 Azure FunctionstwMVC#23 | 快速上手 Azure Functions
twMVC#23 | 快速上手 Azure Functions
 
不會 Javascript 沒關係,用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020...
不會 Javascript 沒關係,用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020...不會 Javascript 沒關係,用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020...
不會 Javascript 沒關係,用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020...
 
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
 
領域驅動設計 (Domain Driven Design)
領域驅動設計 (Domain Driven Design)領域驅動設計 (Domain Driven Design)
領域驅動設計 (Domain Driven Design)
 
@Connect(); microsoft visual studio vnext & azure
@Connect(); microsoft visual studio vnext & azure@Connect(); microsoft visual studio vnext & azure
@Connect(); microsoft visual studio vnext & azure
 
[Agile Tour Hsinchu 2019] Our practice in the DevOps Process for Manufacture ...
[Agile Tour Hsinchu 2019] Our practice in the DevOps Process for Manufacture ...[Agile Tour Hsinchu 2019] Our practice in the DevOps Process for Manufacture ...
[Agile Tour Hsinchu 2019] Our practice in the DevOps Process for Manufacture ...
 
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
 
ASP.NET Core 3.0 新功能
ASP.NET Core 3.0 新功能ASP.NET Core 3.0 新功能
ASP.NET Core 3.0 新功能
 
VSCode Remote Development
VSCode Remote DevelopmentVSCode Remote Development
VSCode Remote Development
 
Reactive application with akka.NET & .NET Core
Reactive application with akka.NET & .NET CoreReactive application with akka.NET & .NET Core
Reactive application with akka.NET & .NET Core
 
twMVC#33聊聊如何自建 Facebook {廣告} 服務 with API
twMVC#33聊聊如何自建 Facebook {廣告} 服務 with API twMVC#33聊聊如何自建 Facebook {廣告} 服務 with API
twMVC#33聊聊如何自建 Facebook {廣告} 服務 with API
 
twMVC#29 | 當.Net Core 遇到AWS Lambda
twMVC#29 | 當.Net Core 遇到AWS LambdatwMVC#29 | 當.Net Core 遇到AWS Lambda
twMVC#29 | 當.Net Core 遇到AWS Lambda
 
以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計
 
Rancher 快速打造叢集的解決方案
Rancher 快速打造叢集的解決方案Rancher 快速打造叢集的解決方案
Rancher 快速打造叢集的解決方案
 
twMVC#23 | 一個Mobile App開發、維護與改版的愛恨之路
twMVC#23 | 一個Mobile App開發、維護與改版的愛恨之路twMVC#23 | 一個Mobile App開發、維護與改版的愛恨之路
twMVC#23 | 一個Mobile App開發、維護與改版的愛恨之路
 
Angular js twmvc#17
Angular js twmvc#17Angular js twmvc#17
Angular js twmvc#17
 
twMVC#28 | visual studio 2017 新功能介紹
twMVC#28 | visual studio 2017 新功能介紹twMVC#28 | visual studio 2017 新功能介紹
twMVC#28 | visual studio 2017 新功能介紹
 

Ähnlich wie 使用最新 Edge 瀏覽器來進行開發​

HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型
Tom Fan
 
zhuwenlongChinese
zhuwenlongChinesezhuwenlongChinese
zhuwenlongChinese
Wenlong Zhu
 
App Developer Team Learning Map
App Developer Team Learning MapApp Developer Team Learning Map
App Developer Team Learning Map
Ryan Chung
 
Appcan介绍自己的应用开发平台
Appcan介绍自己的应用开发平台Appcan介绍自己的应用开发平台
Appcan介绍自己的应用开发平台
MOBINODE
 
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日
twMVC
 
Take Advantage of UIWebView for iOS Native App Developers
Take Advantage of UIWebView for iOS Native App DevelopersTake Advantage of UIWebView for iOS Native App Developers
Take Advantage of UIWebView for iOS Native App Developers
Ryan Chung
 
深入研究雲端應用程式平台-AppFabric
深入研究雲端應用程式平台-AppFabric深入研究雲端應用程式平台-AppFabric
深入研究雲端應用程式平台-AppFabric
John Chang
 
Web App or Native App
Web App or Native AppWeb App or Native App
Web App or Native App
Yu Wei Shang
 
Appcan移动应用开发平台介绍120409
Appcan移动应用开发平台介绍120409Appcan移动应用开发平台介绍120409
Appcan移动应用开发平台介绍120409
zhengyiwuxian
 

Ähnlich wie 使用最新 Edge 瀏覽器來進行開發​ (20)

行動技術開發概論
行動技術開發概論行動技術開發概論
行動技術開發概論
 
2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试
2014 Hpocon 周辉   大众点评 - 大众点评混合开发模式下的加速尝试2014 Hpocon 周辉   大众点评 - 大众点评混合开发模式下的加速尝试
2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试
 
HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型
 
zhuwenlongChinese
zhuwenlongChinesezhuwenlongChinese
zhuwenlongChinese
 
App Developer Team Learning Map
App Developer Team Learning MapApp Developer Team Learning Map
App Developer Team Learning Map
 
20141212 html5 及微軟跨平台佈局 long
20141212 html5 及微軟跨平台佈局   long20141212 html5 及微軟跨平台佈局   long
20141212 html5 及微軟跨平台佈局 long
 
Appcan介绍自己的应用开发平台
Appcan介绍自己的应用开发平台Appcan介绍自己的应用开发平台
Appcan介绍自己的应用开发平台
 
twMVC#31網站上線了然後呢
twMVC#31網站上線了然後呢twMVC#31網站上線了然後呢
twMVC#31網站上線了然後呢
 
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日
 
初窺 Flutter 開發.pdf
初窺 Flutter 開發.pdf初窺 Flutter 開發.pdf
初窺 Flutter 開發.pdf
 
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
 
第一科大Chatbot LUIS
第一科大Chatbot LUIS第一科大Chatbot LUIS
第一科大Chatbot LUIS
 
[2021 DevDays]Microsoft Teams 整合 Azure DevOps之實務應用
[2021 DevDays]Microsoft Teams 整合 Azure DevOps之實務應用[2021 DevDays]Microsoft Teams 整合 Azure DevOps之實務應用
[2021 DevDays]Microsoft Teams 整合 Azure DevOps之實務應用
 
Take Advantage of UIWebView for iOS Native App Developers
Take Advantage of UIWebView for iOS Native App DevelopersTake Advantage of UIWebView for iOS Native App Developers
Take Advantage of UIWebView for iOS Native App Developers
 
深入研究雲端應用程式平台-AppFabric
深入研究雲端應用程式平台-AppFabric深入研究雲端應用程式平台-AppFabric
深入研究雲端應用程式平台-AppFabric
 
Web App or Native App
Web App or Native AppWeb App or Native App
Web App or Native App
 
Bootstrap 導入分享
Bootstrap 導入分享Bootstrap 導入分享
Bootstrap 導入分享
 
Appcan移动应用开发平台介绍120409
Appcan移动应用开发平台介绍120409Appcan移动应用开发平台介绍120409
Appcan移动应用开发平台介绍120409
 
移动互联网的机遇与挑战
移动互联网的机遇与挑战移动互联网的机遇与挑战
移动互联网的机遇与挑战
 
Let's talk about Web Design
Let's talk about Web DesignLet's talk about Web Design
Let's talk about Web Design
 

Mehr von Poy Chang

智慧型校園Ip網路監控系統
智慧型校園Ip網路監控系統智慧型校園Ip網路監控系統
智慧型校園Ip網路監控系統
Poy Chang
 

Mehr von Poy Chang (9)

我的 DevOps 故事
我的 DevOps 故事我的 DevOps 故事
我的 DevOps 故事
 
打造 AIoT 智慧物聯網時代解決方案
打造 AIoT 智慧物聯網時代解決方案打造 AIoT 智慧物聯網時代解決方案
打造 AIoT 智慧物聯網時代解決方案
 
#19 Azure with Build 2019 - Windows Terminal
#19 Azure with Build 2019 - Windows Terminal#19 Azure with Build 2019 - Windows Terminal
#19 Azure with Build 2019 - Windows Terminal
 
Global Azure Bootcamp @ 廣州 - 智能聊天機器人四代目
Global Azure Bootcamp @ 廣州 - 智能聊天機器人四代目Global Azure Bootcamp @ 廣州 - 智能聊天機器人四代目
Global Azure Bootcamp @ 廣州 - 智能聊天機器人四代目
 
那個 Code 不是我弄壞的! 持續整合與版本控制策略
那個 Code 不是我弄壞的!持續整合與版本控制策略那個 Code 不是我弄壞的!持續整合與版本控制策略
那個 Code 不是我弄壞的! 持續整合與版本控制策略
 
Azure TechDay Party - AIoT 智慧物聯網時代
Azure TechDay Party - AIoT 智慧物聯網時代Azure TechDay Party - AIoT 智慧物聯網時代
Azure TechDay Party - AIoT 智慧物聯網時代
 
從雲端到邊緣 Azure IoT Edge 幫工廠設備長智慧
從雲端到邊緣 Azure IoT Edge 幫工廠設備長智慧從雲端到邊緣 Azure IoT Edge 幫工廠設備長智慧
從雲端到邊緣 Azure IoT Edge 幫工廠設備長智慧
 
Global Azure Bootcamp @ 北京 - Azure Bot Servic 快速打造你的機器人
Global Azure Bootcamp @ 北京 - Azure Bot Servic  快速打造你的機器人Global Azure Bootcamp @ 北京 - Azure Bot Servic  快速打造你的機器人
Global Azure Bootcamp @ 北京 - Azure Bot Servic 快速打造你的機器人
 
智慧型校園Ip網路監控系統
智慧型校園Ip網路監控系統智慧型校園Ip網路監控系統
智慧型校園Ip網路監控系統
 

使用最新 Edge 瀏覽器來進行開發​