用HTML5开发的WebApp怎么实现消息推送

2023-02-18 23:24:01html-css019

用HTML5开发的WebApp怎么实现消息推送,第1张

通过后台服务的支持来实现消息推送。实现消息推送的原理是：

1、首先，需要在应用程序进行注册一个消息推送。

2、然后，IOS跟APNS Server要deviceToken。这样子应用程序才能接受deviceToken。

3、紧接着，应用程序将deviceToken发送给PUSH服务端程序。

4、服务端会向程序向APNS服务发送消息。

5、最后，APNS服务将消息发送给iPhone应用程序Push service方案评价标准这样就行了。

消息推送可以使用深圳极光家的消息推送软件。极光联赋能企业流量变现，一站式流量接入运营解决方案，提供优质广告资源，多维度用户标签，丰富的广告形式，发挥流量的最大价值。

1、HTML + CSS 这部分建议在线教程上学习，边学边练。

之后可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《Head First HTML 与 CSS 中文版》，这本书讲的太细了，我没能拿出耐心细读。你可以根据情况斟酌。

2、Javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，可以先在W3school学习一下，之后再建议看看《Javascript语言精粹》，JS是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。

有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。

1、CSS。必看《精通CSS》，看完这本书你应该对：盒子模型，流动，Block，inline，层叠，样式优先级，等概念非常了解了。作为练习可以看下《CSS艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。

2、Javascript。上面提到内容还不足以让你胜任JS编程。在有了基础之后，进一步学习内容包括：

a）框架。

推荐jQuery，简单易用，上手jQuery即可完成一些简单的项目。学习方法也很简单，照着产品文档做

几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与Web开发学习的精髓部分。补充：可以使用

Codecademy 学习 Javascript，jQuery，用户体验真的很好。

b） Javascript 语言范式

。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。Javascript不完全是一个面向对象的语言，它的很多

设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。

Javascript的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要

理解，维基百科，百度百科会是你的帮手，另外推荐《Object Oriented

Javascript》，应该有中文版。对与函数式编程我了解的也不系统，不好多说，可以自己百度一下。

c） Javascript 语言内部机制。必须弄清如下概念：JS

中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式

下，‘this’指向的是谁。这部分内容你会在《Javascript语言精粹》中详细了解。另外，你必须理解 json。

d） dom编程，这个Web前端工程师的核心技能之一。必读《Dom编程艺术》，另外《高性能 Javascript》这本书中关于dom编程的部分讲的也很好。

e） Ajax编程，这是另一核心技术。Ajax建议在网上查些资料，了解这个概念的来龙去脉，百度百科，维基百科上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对Ajax有良好的封装，编程并不复杂。

f）了解浏览器差异性。这部分包括CSS和js两部分，浏览器差异内容很多，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。

3、HTML5和CSS3 。HTML5规范已经于2014年10月28日发布了，移动端HTML5和CSS3已经得到了非常广泛的使用，必知必会呀。

H5edu教育html5开发为您解答：

移动web在当今的发展速度是一日千里，作为移动领域的门外汉，在这段时间的接触后，发现前端开发这一块做一个小小的总结。

1.四大浏览器内核

1.Trident (IE浏览器) :因为在早期IE占有大量的市场份额，所以以前有很多网页是根据这个Trident的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好，同时存在许多安全Bug。

2.Gecko:( FireFox )优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，缺点是消耗很多的资源，比如内存。

3.Webkit: ( Chrome/ Safari / UC )优点就是Webkit拥有清晰的源码结构、极快的渲染速度，缺点是对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。

4.Presto: ( 欧朋 ) Presto内核被称为公认的浏览网页速度最快的内核，同时也是处理JS脚本最兼容的内核，能在Windows、Mac及Linux操作系统下完美运行。

移动端开发主要对象是手持设备，其中绝大部分是IOS和Android系统，基于Webkit内核，可使用Chrome浏览器调试即可。

2.手机浏览器

浏览器已经逐渐从传统桌面转向手机端，竞争也越来越激烈。目前国内市场主流的手机浏览器：UC、百度、欧朋、QQ、海豚、safari、Chrome，这些浏览器都是基于webkit内核的，兼容性方面不存在问题，同时对html5和css3的支持很好，所以，大胆地应用html5和css3技术吧。

在开始编写webapp时，前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。

3.终端分辨率

手机分辨率比PC分辨率要庞杂得多，各种分辨率有木有？大小差距那么大有木有？这在一定程度上给页面制作带来了不小的麻烦。所以针对这样的因素，必须有充分的考虑。考虑到浏览器自适应，需要设计和制作完成各种不同的方法。

1) 市场上主流手机生产商的产品分辨率。经过调研发现，目前主流的手机分辨率为：480*800像素、320*480像素，而1280*720像素（720P）会是接下来的趋势。这些都是很粗略的统计，要有精确的数据需要花费不少的精力，那是数据分析人员的工作。

2) 项目目标群所持设备的分辨率。项目目标群即用户，用户拥有什么样的手机分辨率，从一定程度上来说比第一点来得更加重要，它决定着项目开发的方向。

4.响应式web开发

在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。

响应式web开发不是一项开创性的技术变革，简单地说，响应式web设计采用了媒体查询、流式布局、液态图片三项技术，把它们组合在一起来制作页面，使得页面不只在传统桌面，在平板电脑和手机上，各种不同的分辨率都能够完美显示。而要做到这点，我觉得不难，请继续往下：

1) 准备工作：

a) 插件安装：window resize。您可以通过下载安装谷歌浏览器插件，安装成功后，当您调整浏览器窗口时，在浏览器右下角会有灰度提示当前窗口和类似于手机视图的大小提示。

b) 编辑器安装：Hbulder或Webstorm

c) 弄清视图和屏幕的区别。视图是浏览器的内容显示区域，屏幕是设备的物理显示区域。比如视图宽度我们一般用width表示，而屏幕宽度是用device-width来表示。相信做过手机页面的童鞋都经常见过这段代码：

其中width=device-width就是说把页面宽度设置成和屏幕宽度一样。

d) 响应式设计创意网站收集。这里有很多响应式Web设计的网站，供您参考和学习。

2) 征途ING：

e) 响应式web设计之媒体查询：

为了减少http请求，我想在css样式表里进行媒体查询会是个不错的选择，而不是在页面head部分使用link进行加载。样式表里的媒体查询格式为：

@media screen and (max-width:960px){}

大括号内部书写样式。该语句相当于判断语句，有两个条件，一个是视口宽度最大不超过960px，screen代表显示屏，这两个条件都具备了，就调用大括号内的样式。