Chrome Web App开发小结

前言

这篇文章主要分享下自己在开发Web App遇到的问题和过程，以及一些很已经（如何）填平的坑。如果您想要“如何开发Web App”或《30分钟学会开发Web App》，请移步官方的开发手册（文档）。（下有链接）。

背景

感觉现在大家都在争论（讨论）两件事情，Web App和Native App。前不久参加的HTML5守望者活动，各方大佬都在针对这二者之间的优劣，差异，兼容，普及等进行探讨。当然，有争议的才说明有价值嘛。

Chrome Web App

前不久Chrome又一次因超过了什么什么登上了各大新闻媒体的首页，是的这已经不是第一次了。Chrome自身有强大的插件市场，和最近（也不算最近了）推出的Chrome Web App。之前也一直有进行过Chrome拓展的开发，被Chrome自身的API搞的晕头转向，不过在转晕的同时也深深感受到了Web App的强大潜力。

制作Web App

刚刚试图把一个简单的“网页项目”移植成Chrome Web App，说是移植，其实基本上就是重建，哦不，是新建……。现在的网页项目是一个使用PHP、MySQL做后端，很常见的一个PHP网站，使用了Slim做为PHP框架。
那么如何新建成Chrome Web App呢。显而易见，使用PHP不大可能了。之前使用过Google自家的AngularJS做开发，所以还算熟悉，而且官方开发手册也把AngularJS做首选的推荐开发框架。而且得益于Slim框架（PHP），全部都是RESTful的。
大概思路就是这样：
一切都配合AngularJS和RESTful，这样本地应用只存静态页面，然后通过叭叭叭发送请求数据返回就可以了……。

感受

使用Google自家的AngularJS，几乎大部分浏览器特性都可以使用，兼容性非常好，而且与桌面软件几乎无差，最重要的是了却了我多年学不会软件开发(尝试过delphi未果)的心愿……Web App太强大了！

资源 （需梯子）

Chrome Web App中文开发手册
Google Plus中文社群
官方英文论坛

问题

在开发过程中遇到了几个问题：

permissions不仅仅可以调用功能，如果使用外部资源也要加进去;
你可以放心大胆的使用类似-webkit，甚至V8的API;
-webkit-app-region: drag 可以控制应用拖动;
如果你执意要frame: 'none'的话，别忘记加上关闭按钮;

期待与大家交流

赞 (0)

相关推荐

  • 微信小程序 在Chrome浏览器上运行以及WebStorm的使用

    微信小程序 在Chrome浏览器上运行以及WebStorm的使用

    「微信小程序」的开发框架体验起来,还不错--自带了UI框架.但是问题是他的IDE,表现起来相当的糟糕--其实主要是因为,我当时买WebStorm License买了好多年.所以,我觉得他的IDE真不如我这个付费好用. 而且,作为一个拥护自由和开源的 「GitHub 中国区首席Markdown程序员」.微信在「微信小程序」引导着Web开向封闭,我们再也不能愉快地分享我们的代码了. 如果我们放任下去,未来的Web世界令人堪忧. 好了,废话说完了: 文章太长不想看,可以直接看Demo哈哈: GitHu

  • 使用Chrome浏览器调试Android App详解

    使用Chrome浏览器调试Android App详解

    个人一直对Chrome情有独钟,Chrome除了更快之外,对开发者的支持更友好.内置强大的Developer Tools,相信Web开发简直爱不释手!而且Chrome Store里提供各种各样的插件,没有你用不到,只有你想不到.现在任何事基本Chrome全部办的到,有时候就在想,如果可以用Chrome调试Android App该多方便,而如今Facebook刚刚开源了一个工具Stetho,从此Chrome调试Android不再是梦. 调试工具 在Android开发中除了一些官方自带的一些调试工具

  • 微信小程序 开发指南详解

    微信小程序 开发指南详解

    编写代码 创建小程序实例 点击开发者工具左侧导航的"编辑",我们可以看到这个项目,已经初始化并包含了一些简单的代码文件.最关键也是必不可少的,是 app.js.app.json.app.wxss 这三个.其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件.微信小程序会读取这些文件,并生成小程序实例. 下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序. ​ app.js是小程序的脚本代码.我们可以在这个文件中监听并处理小程序的

  • 微信小程序（应用号）简单实例应用及实例详解

    微信小程序（应用号）简单实例应用及实例详解

    Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正

  • 从Chrome App看微信小程序的发展前景

    关于微信小程序的消息算是这几天互联网新闻中的一个热点话题,各种推想猜测也是层出不穷.小程序只是处于一个内测阶段,但是,2010年谷歌公司也曾经开发过基于Chrome浏览器的Chrome App,两者虽然是两款不同的产品,但是在很多地方都有很多的相似之处,对Chrome App的了解也许对我们对小程序的发张和前景的分析带来一定的帮助. 关于微信和Chrome 首先就是关于微信和Chrome两个平台的状况,微信给的月活跃用户为7亿而Chrome仅仅移动版就有10亿的用户数量,两者都拥有巨大的群众基础

  • Chrome Web App开发小结

    前言 这篇文章主要分享下自己在开发Web App遇到的问题和过程,以及一些很已经(如何)填平的坑.如果您想要"如何开发Web App"或<30分钟学会开发Web App>,请移步官方的开发手册(文档).(下有链接). 背景 感觉现在大家都在争论(讨论)两件事情,Web App和Native App.前不久参加的HTML5守望者活动,各方大佬都在针对这二者之间的优劣,差异,兼容,普及等进行探讨.当然,有争议的才说明有价值嘛. Chrome Web App 前不久Chrome又

  • Python Web App开发Dockerfiles编写示例

    目录 TL;DR 内容 1. 简单的 Dockerfile 样例 2. 使用 Gunicorn 实现热更新 3. 运行一个单文件 python 脚本 4. 部署静态文件 5. 生产环境中的直接构建 6. 生产环境中的多级构建 原文地址:How to write Dockerfiles for Python Web Apps 原文作者:Praveen Durairaj 译文出自:https://github.com/xitu/gold-miner 本文永久链接:https://github.com

  • Node.js成为Web应用开发最佳选择的原因

    Node.js成为Web应用开发最佳选择的原因

    一项颠覆性的技术进入技术市场总会带来一阵震惊,但随之而来往往是被放弃.然而,Node.js 当然不是这样的情况,它是一个开源的.跨平台的基于 Chrome 的 JavaScript 运行时.Node.js 由 Ryan Dahl 于 2009 年开发,该平台现在已成为实时 Web 应用开发的独特选择,通过提供高度交互的用户体验来提高 ROI. 使用 Node.js 的最大优点是开发人员可以在客户端和服务器端编写 JavaScript.值得一提的是,像 PayPal, Yahoo, eBay, N

  • H5混合开发手机Web App入门：概念篇

    如果你开始学习手机 App 开发,就一定会听到 H5 这个词.它是目前的主流开发技术之一,容易上手,开发周期短.成本低.兼容传统 Web 开发.但是,很少有文章详细介绍,H5 到底是什么技术,有什么原理,跟其他技术的差异在哪里. 一.H5 的含义 表面上看,手机 App 都是同样的东西,就是手机上的应用程序,点击图标就能运行,但是它们的底层技术不一样.按照开发技术,App 可以分成三大类. 原生应用(native application,简称 native App) Web 应用(web app

  • 使用jQuery Mobile框架开发移动端Web App的入门教程

    使用jQuery Mobile框架开发移动端Web App的入门教程

    一.jQuery Mobile 的渐进增强设计与浏览器支持 根据维基百科( Wikipedia ) 的解释,渐进增强的设计主要包括以下几点 basic content should be accessible to all web browsers (所有浏览器都应能访问全部基础的内容) basic functionality should be accessible to all web browsers (所有浏览器都应能访问全部基础的功能) sparse, semantic markup

  • JavaEE开发基于Eclipse的环境搭建以及Maven Web App的创建

    JavaEE开发基于Eclipse的环境搭建以及Maven Web App的创建

    本篇博客就完整的来聊一下如何在Eclipse中创建的Maven Project.本篇博客是JavaEE开发的开篇,也是基础.本篇博客的内容干货还是比较多的,而且比较实用,并且都是采用目前最新版本的工具来配置的环境.下方内容主要包括了JDK1.8的安装.JavaEE版本的Eclipse的安装.Maven的安装.Tomcat 9.0的配置.Eclipse上的M2Eclipse插件以及STS插件的安装.当然本篇博客是在Mac OS X下完成的.当然本篇所涉及的工具都有Windows版的,而且Eclip

  • Android开发使用WebView打造web app示例代码

    目录 前言 代码如下 前言 博主最近想做一款app,因为内容已经有了,故想到了使用WebView来做 ,现将代码贴出如下,供有同样需求的人参考,少走弯路 代码如下 public class MainActivity extends Activity{ private WebView webview; private Handler handler; private ProgressDialog pd; @Override public void onCreate(Bundle savedInst

  • 基于豆瓣API+Angular开发的web App

    基于豆瓣API+Angular开发的web App

    一.扯淡的说 name:[豆瓣搜索] 最近关注了下豆瓣的API,发现豆瓣开放平台需要加强API文档撰写啊....但是有个可喜的发现豆瓣V2接口提供了搜索接口.最近在用phantom弄些爬虫,想想,真是美丽极了!有个豆瓣的接口,我都不用去爬数据,不用数据存储,丢给github page直接完事.豆瓣,Nice!最近也在看angular,于是就萌生了使用Angular + 豆瓣API 做一个web app.于是...网上回家就折腾了. 体验地址:http://vczero.github.io/t/h

  • Chrome插件(扩展)开发全攻略(完整demo)

    Chrome插件(扩展)开发全攻略(完整demo)

    写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github.com/sxei/chrome-plugin-demo ,大家可以直接下载下来运行. 另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕. 本文目录: demo部分截图: 前言 什么是Chrome插件 严格来讲,我们正在说的东

  • 手机Web APP如何实现分享多平台功能

    手机Web APP如何实现分享多平台功能

    话说App一般都带有分享到社交平台的入口,web网页的分享也有很不错的框架,但是随着HTML5的不断发展,手机web页面越来越多的进入到我们的生活中,那如何在我们的手机上完成分享呢?话说各大分享平台都有针对Android.Ios的SDK,作为开发者,我们只需要将SDK集成的我们的项目中即可,通过提供的外部接口,我们可以很容易的完成分享的功能:web网页呢,网上也存在很多优秀的分享框架,例如:bShare分享 .JiaThis分享:我们可以很方便的集成到我们的项目中:但是手机web页面实现分享就需

随机推荐