从网站web到APP:使用 WAT (Web App Template)

WAT (">Web App Template) 是微软所开发,专门设计将既有的网站转成 App 的免费 Visual Studio 扩充组件,此前的文章已有简介: WAT- 将既有网站快速转为 Windows 8.1 App 或 Windows Phone App 的免费工具。上个月也刚推出了 Universal Apps v2.0 的版本 (http://wat.codeplex.com/)。

WAT 的目标定义明确,即是要让企业能完全延用在既有网站上的投资、同时还能以直觉简易的 config 方式让 App 实作出平台功能 (如 Windows Live Tile、App Bar 等)、而且无需每次网站改版即需重新编译。

WAT 实作

在 Visual Studio 2013 中开启 Web App Template for Universal Apps- JavaScript 范本

可以看到此方案已预设包含 Windows 8.1 及 Windows Phone 8.1 的 Universal Apps 项目

要快速将 Web 转为 App,需要 config 的地方只有一个,就是 Shared 中的 config.json 檔。

将其中的 homeURL 改为 Bill Gates 的网址 (http://www.gatesnotes.com/) 之后,同时以 Windows Phone 及 Windows 8.1 仿真器执行的画面如下,可见到已符合 Responsive Web Design (RWD) 规范的网站转为 App 之后,即能因应不同尺寸屏幕大小作适当的版面配置:

透过 config.json 客制化 App

所有 App 功能面的实作,全部是透过修改这个 config.json 档来完成的,包含最重要的无因特网时的脱机 Offline 支持、给定 RSS Feed 即能达到 Live Tile 的效果、给定 Search URL 即实作出 Search Charm Bar、给定外部连结即可实作 App Bar 及 Navigation Bar 等等。

完整的说明文件可见: http://wat-docs.azurewebsites.net/JsonWindows

目前能透过 config 方式即能实现的 App 功能如以下,未来能实现的功能还会不断增加。

除了功能面外,WAT 也提供了让您修改 CSS 档以改变 App 呈现时的版型 (但不影响原有网站的版型)

实际案例

有愈来愈多的国外网站在维护网站的同时、经由 WAT 建置 App 以因应行动化的需求,除了前文中介绍的 Low’s 及 Zoopla Property 之外,我们再以著名旅游规划网站 Expedia.com 为例。

以下可看到其网站及在 Windows Phone App 上各自的呈现:

1 of 3 2 of 3 3 of 3

回馈及讨论

利用 WAT 将既有网站转为 App 的过程可说是最简单的,config 的方式易于操作、维护及侦错门坎也低。

但最最重要的一点是,网站作了任何更新或变动,其 App 即能立即反应最新的内容;也就是企业本来即正常运行的网站维运流程几乎不用作调整,在最大化既有投资的同时还能以 App 打开另一个市场。

当然,为了因应各种不同尺寸的行动装置,亦强烈建议实行此方法的网站符合 Responsive Web Design (RWD) 的设计准则,以达到最好的使用者经验。

WAT 的未来

微软设计 WAT 的原始精神是将 Web Experience 作优化的运用,短期目标即是让各客户能延用在人力、技术及维护上的既有投资、同时能满足市场行动化的需求;长远而言微软会在 Web Experience 上作更进一步的投资!

由 Web 到 App 之路小结

简单来说,无论是否要走向 App 化,建议各网站可先行实作「钉选」的功能,毕竟简单又容易测试。

往 App 发展之路,若跨平台是现阶段的急迫性需求,可走 Apache Cordova 的方式,但其客制化及维运成本就相对高些;若无跨平台的急迫需求,建议可先走 WAT 的方式,对未来整体维运考虑上应能达到最好的 ROI 成效。

时间: 2024-09-26 10:23:37

从网站web到APP:使用 WAT (Web App Template)的相关文章

Web app设计细节:web app互动设计技巧

文章描述:Web app设计浅谈 . HTML5技术的强势发展,为互联网带来的最大改变就是: web从"已死"的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中.Google .微软.苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的"云"服务平台,企图在web app时代到来的时候充当霸主.本文将围绕web app的设计,与大家讨论几点设计技巧. 什么是web

App设计VS Web设计:互相学习到了什么

我们通常将http://www.aliyun.com/zixun/aggregation/9086.html">App设计和Web设计看作两个完全不同的领域. 由于Web App的出现,彼此之间的界限似乎变得模糊了,不过我们依旧尝试对比App设计和Web设计.即使是同时工作于这两方面的设计师也常常将它们区别对待. 其实这两方面可以互通互补.每类设计都有自己的优点和缺点,往往也需要在其它方面进行补充. 下面是App设计和Web设计间可相互借鉴的六点. 1.避免功能泛滥 App设计师们清楚,额

选择原生 APP 还是自适应 web?三步搞定!

确定网站的移动策略并非什么高深的学问,但需要认真的研究和规划.设计公司Entropy近日将企业选择移动路线的决策简化为三步. 一年半以前,Facebook首席执行官马克扎克伯格一句"豪赌HTML5是Facebook犯下的最大错误"引发了业界关于原生APP和移动(自适应)web两条技术路线的大争论. 如今这个争论似乎已经有了结论,正如Entropy首席执行官指出的: 用户经常会问,应当开发面向移动设备的自适应移动web站点还是将所有预算投入原生APP?我们的答案很简单:两个都重要! 如今

java-请问app接口或者web接口怎么防止重放攻击或者重复提交?

问题描述 请问app接口或者web接口怎么防止重放攻击或者重复提交? 例如有些接口是提取信息的,如果有人抓包重复请求,估计server会崩溃.还有一些涉及到金额交易的接口,必须保证不能重复提交,请问有什么比较好的解决方案? 解决方案 稍微专业一点的防火墙都有硬防ddos的.至于防止重复提交,你可以用二段提交,客户端发请求,服务器产生一个唯一id,客户端用这个id提交数据,服务器收到数据作废id.如果重复提交,那么因为客户端只有一个id,后面的请求就没用了.

web页上在android手机app里点不动上传图片按钮

问题描述 web页上在android手机app里点不动上传图片按钮 web页上在android手机app里点不动上传图片按钮 web页上在android手机app里点不动上传图片按钮 解决方案 看看事件有没有执行,服务器有没有响应? 解决方案二: 看版本,如果是5.0前,用file方式的话,除非自己重写WebChromeClient,拦截后改后原生执行如果是5.0开始,看官方说法是支持file方式的文件选择上传 解决方案三: 如果是webview的话,看看也没中是否加了点击事件,然后看看你是否拦

如何设计多个城市app公用一个web后台架构

问题描述 如何设计多个城市app公用一个web后台架构 现在公司有一个新的APP项目,要求是每个城市1个单独的APP,有很多个城市,但是后台要求只用一个.之前没有遇到过这样的系统设计.我想后台用springMVC+mybatis不知道如何去设计.请大侠们帮帮小弟,如果有经验的朋友帮忙做技术支持小弟愿意提供报酬! 谢谢大家 解决方案 这个叫多租户架构,自己google下 http://www.ibm.com/developerworks/cn/java/j-lo-dataMultitenant/h

黑客利用此漏洞可盗走网站用于加密在线交易和 web 连接的密钥

本月初,一家叫做Codenomicon的安全公司在全世界最大的开源加密服务 OpenSSL 中找到了一个严重漏洞,黑客利用此漏洞可盗走网站用于加密在线交易和 web 连接的密钥,受影响的服务器数量可能多达几十万,在圈子里造成了严重恐慌.幸好,Codenomicon在公布漏洞消息的同时也发布了补丁.不过比起亡羊补牢,更好的做法是防患于未然. 近日,包括Google.微软.Facebook在内的十二家科技巨头就发起了一个叫做 the Core Infrastructure Initiative的项目

jquery ajax-關於android app端 跟 web端的幻燈片功能+嵌入音樂功能

问题描述 關於android app端 跟 web端的幻燈片功能+嵌入音樂功能 想問一下 我想做一個類似 很多app第一次下載會出現的可能四到五個自己app的介紹(全屏的) 的樣式 但是我想做成是自動跑的(使用者可以選擇"暫停" 或者 "忽略") 但重點是"我可以插入音樂"=> 使用者沒法關掉音樂 除非他點擊"忽略"直接進入到app裡面 但我音樂系統會強制配合那四到五個app全屏頁面的介紹時間長度 (就是可能展示時間只有

app用户咨询+web专家服务的即时通信场景

问题描述 需求场景用户在app端向特定专家咨询问题,专家在web端回复用户,应该怎么做? 解决方案 环信可以移动端和web通讯的,就集成app和web就行.