北京pk10投注平台,我们不求千篇一律,我们追求创新,哪怕形式上的创新。服务热线:400-088-9998

PWA新手教程:手把手教你制作自己的网页“小程序”

作者:admin浏览次数:发布时间:2018-10-15 20:03
【内容提要】下图)(如。gressive Web App)PWA即渐进式网页使用(Pro。能够说咱们,APP之间的小法式PWA是介于网页和,页面运作它基于,机主页(如下图)能够被拖拽得手,像APP功效有点,P一较高下以至能与AP,于APP但又有别。making Progressive WebApps的PWA制造的新

  下图)(如。gressive Web App)PWA即“渐进式网页使用”(Pro。能够说咱们,“APP”之间的小法式PWA是介于“网页”和,页面运作它基于,机主页(如下图)能够被拖拽得手,像APP功效有点,P“一较高下”以至能与AP,于APP但又有别。making Progressive WebApps”的PWA制造的新手教程的一位开辟职员uve颁发了名为“A beginner’s guide to ,属于本人的“小法式”让正常用户也能够制订,序猿”的兴趣体验一把“程。

  网页为载体PWA以,要建立本人的网页因而咱们起首需。rap就是两个很好的HTML模板资本站点HTML5 UPStart Bootst。下载本人喜爱的主题包咱们能够从中挑选并。完毕后下载,主题包翻开,html文件点开找到index。,换本钱人想要的样子把内里所有内容都。SS言语转变页面中的各类颜色结构有经验的伴侣们也没关系测验测验使用C。

  rome浏览器上的拓展法式Lighthouse是Ch,们测试PWA可以大概协助我,的改善方案并供给有关。

  ghthouse当前在浏览器上装置好Li,找到这个拓展法式在浏览器右上方,针对以后翻开的页面运转 Lighthouse 测试点击Generate report按钮(如下图)以。

  审查后在完成,e 将翻开一个新标签Lighthous,示一个演讲(如下图)并在页面的成果上显。

  消息量太大若是感受,贫苦看着,四个次要目标(如下图)能够间接关心页面顶部的。根基上还什么都没有此刻咱们的PWA,6分也很一般所以得个3。

  拽得手机主屏幕PWA能够拖,APP那样的图标因而必要一个像。例必需是1!1这个图标的比,正方形也就是。

  n project(如下图)大师能够登岸the nou,的图标制造网站这是一个壮大,世间万物”的图标内里险些囊括了“。

  标当前做好图,到页面上去了就要把图标放。pp Icon Generator大师能够采用Favicon & A。上传到这个网站把新做的图标,图标以及一些HTML代码它就会天生几个分歧巨细的。后然,行以下操作咱们必要进:

  路径不犯错确保图标的。在了子文件夹若是把图标放,icons/”(如下图则必要在每一行都加上“)

  站的名字、次要颜色以及图标等数据manifest文件蕴含了一个网。enerator上也能够天生manifest文件咱们在Favicon & App Icon G,st文件做一些分外的改动但咱们还要对manife。

  fest Generator登岸Web App Mani,PWA的各类消息输入咱们建立的。不确定的若是有,不填能够,取舍默认项体系会主动。

  粘贴到manifest。json文件傍边的顶部复制页面右手边的JSON数据(如下图)并将其。打乱格局要留意别,逗号或删除一个括弧有时候会必要加个。t文件是如许的:仅供参考最终完成的manifes。

  worker呢?有了它什么是service ,离线形态下运转网站就能够在。器后台历程里的剧本它是一段运转在浏览,以后页面可独立于,互的功效在网页背后悄然施行的威力供给了那些不必要与web页面交。未来在,实现动静推送基于它能够,地舆围栏等办事寂静更新以及,是拦截和处置收集请求的功效可是目前它起首要具备的功效,息缓存办理威力包罗可编程的消。

  r的感化次要有:1)收集代办署理service worke,请求转发,相应伪造;后台动静传2)离线)递

  box增添到咱们的项目(2)把sw-tool。文件增添到根目次中咱们只要要把这个。

  建一个文件(3)新,下内容复制、粘贴到该文件内将其定名为sw。js并把以。

  完成当前这三步都,che)并列出所有咱们想要在离线形态下贮存的文件咱们必要确认文件的路径、编纂预缓存(preca。ex。html和style。css两个文件本文作者uve在他的页面仅仅利用了ind,增添此外文件或页面而咱们也考能够别的。

  后然,Lighthouse咱们就能够再次翻开,测试进行。后在本田主机(localhost)的测试成果以下是增添了service worker以:

  页面之外除了保留,实现此外功效(好比在没有收集的环境下若是想让service worker,离线页面)显示特定,abuilder咱们能够登录pw,rker剧本(script)可供利用这里有一些分歧的service wo。

  建顺利后PWA创,分享你的作品了是时候与全世界!者uve注释按照本文作,是登录GitHub Pages公布PWA页面最简略的方式就。

  面向开源及私有软件项目标托管平台GitHub Pages是一个,免费彻底,一的版本库格局进行托管由于只支撑Git作为唯,itHub故名 G。

  GUI(图形用户界面)通过利用GitHub的,代码交给GitHub办理咱们能够轻松地把咱们的,pository)建立一个库(re,代码放进去把咱们的。

  完成当前这一步,上找到咱们的PWA网站咱们就要在Github,定页面进入设,动鼠标向下滚,面下方滑至页,er branch)取舍主分支(mast,tHub页面从而激活Gi。

  在现,WA页面和伴侣们分享啦你终究能够把本人的P!者或,这个PWA页面你也能够下载,的手机主页增添到你。

  子而特意制造的PWA页面这是作者为了写这个科普贴, Leads UK and IE”名为“Web Community,交换web手艺的平台是一个推进人们互相。




回到顶部