首页 > 建站资源 > 建站教程 > PWA教程:手把手教你制作自己的网页“小程序”

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

时间:2017-07-20    来源:36kr

编者按:在一般互联网用户看来,PWA就是网页小程序(如下图)。PWA即“渐进式网页应用”(Progressive Web App)。我们可以说,PWA是介于“网页”和“APP”之间的小程序,它基于页面运作,可以被拖拽到手机主页(如下图),功能有点像APP,甚至能与APP“一较高下”,但又有别于APP。medium.com上的一位开发人员uve发表了名为“A beginner’s guide to making Progressive Web Apps”的PWA制作的新手教程,让一般用户也可以制定属于自己的“小程序”,体验一把“程序猿”的乐趣。

>

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

准备工作

PWA以网页为载体,因此我们首先需要创建自己的网页。 HTML5 UP和Start Bootstrap就是两个很好的HTML模板资源站点。我们可以从中挑选并下载自己喜爱的主题包。下载完毕后,打开主题包,找到index.html文件点开,把里面所有内容都换成自己想要的样子。有经验的朋友们也不妨尝试运用CSS语言改变页面中的各种颜色布局。

第一步:测试PWA

Lighthouse是Chrome浏览器上的拓展程序,能够帮助我们测试PWA,并提供相关的改善方案。

在浏览器上安装好Lighthouse以后,在浏览器右上方找到这个拓展程序,点击 Generate report 按钮(如下图)以针对当前打开的页面运行 Lighthouse 测试。

>

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

在完成审查后,Lighthouse 将打开一个新标签,并在页面的结果上显示一个报告(如下图)。

>

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

如果感觉信息量太大,看着麻烦,可以直接关注页面顶部的四个主要指标(如下图)。现在我们的PWA基本上还什么都没有,所以得个36分也很正常。

>

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

第二步:制作PWA的图标

PWA可以拖拽到手机主屏幕,因此需要一个像APP那样的图标。这个图标的比例必须是1:1,也就是正方形。

大家可以登陆the noun project(如下图),这是一个强大的图标制作网站,里面几乎囊括了“世间万物”的图标。

>

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

做好图标以后,就要把图标放到页面上去了。大家可以采用Favicon & App Icon Generator。把新做的图标上传到这个网站,它就会生成几个不同大小的图标以及一些HTML代码。然后,我们需要进行以下操作:

下载该网站提供的文件并解压

把图标放进WPA页面当中的一个文件夹

把该网站提供的代码添加到index.html文件的

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

>

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

第三步:创建WPA的manifest文件

manifest文件包含了一个网站的名字、主要颜色以及图标等数据。我们在Favicon & App Icon Generator上也可以生成manifest文件,但我们还要对manifest文件做一些额外的改动。

登陆Web App Manifest Generator,输入我们创建的PWA的各种信息。如果有不确定的,可以不填,系统会自动选择默认项。

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

>

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

重启Lighthouse,就可以知道manifest文件是否创建成功。

>

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

第四步:添加service worker

什么是service worker呢?有了它,网站就可以在离线状态下运行。它是一段运行在浏览器后台进程里的脚本,可独立于当前页面,提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。在将来,基于它可以实现消息推送,静默更新以及地理围栏等服务,但是目前它首先要具备的功能是拦截和处理网络请求的功能,包括可编程的消息缓存管理能力。

service worker的作用主要有:1)网络代理,转发请求,伪造响应;2)离线缓存;3)消息推送;4)后台消息传递

创建service worker的过程主要分三步:

(1)把以下代码添加到index.html文件的当中:

(2)把sw-toolbox添加到我们的项目。我们只需要把这个文件添加到根目录中。

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

‘use strict’;

importScripts(‘sw-toolbox.js’); toolbox.precache([“index.html”,”style/style.css”]); toolbox.router.get(‘/images/*’, toolbox.cacheFirst); toolbox.router.get(‘/*’, toolbox.networkFirst, { networkTimeoutSeconds: 5});

这三步都完成以后,我们需要确认文件的路径、编辑预缓存(precache )并列出所有我们想要在离线状态下储存的文件。本文作者uve在他的页面仅仅使用了index.html和style.css两个文件,而我们也考可以另外添加别的文件或页面。

然后,我们就可以再次打开Lighthouse,进行测试。以下是添加了service worker以后在本地主机(localhost)的测试结果:

>

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

除了保存页面之外,如果想让service worker实现别的功能(比如在没有网络的情况下,显示特定离线页面),我们可以登录pwabuilder,这里有一些不同的service worker脚本(script)可供使用。

第五步:交给GitHub Pages托管

PWA创建成功后,是时候与全世界分享你的作品了!根据本文作者uve解释,发布PWA页面最简单的方法就是登录 GitHub Pages。

>

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

GitHub Pages是一个面向开源及私有软件项目的托管平台,完全免费,因为只支持Git作为唯一的版本库格式进行托管,故名 GitHub。

通过使用GitHub的GUI(图形用户界面),我们可以轻松地把我们的代码交给GitHub管理,创建一个库(repository),把我们的代码放进去。

这一步完成以后,我们就要在Github上找到我们的PWA网站,进入设定页面,向下滚动鼠标,滑至页面下方,选择主分支(master branch),从而激活GitHub页面。

这样,你的PWA页面就有了一个有效的(live)URL。

这时候再打开Lighthouse,就会发现测试结果大大不同了。

>

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

现在,你终于可以把自己的PWA页面和朋友们分享啦!或者,你也可以下载这个PWA页面,添加到你的手机主页。

作者uve本人的作品实例

>

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

上图就是作者的PWA页面在手机上的效果。(查看作者的代码,请戳这里)

这是作者为了写这个科普贴子而特地制作的PWA页面,名为“Web Community Leads UK and IE”,是一个促进人们互相交流web技术的平台。

(关于该平台的详情,可关注Daniel的贴子,也可以直接浏览该页面。)

虽然这个和作者刚开始建立PWA的时候看起来一样,但是在Samsung Internet(三星自带的浏览器)上浏览它的时候,地址栏会变成主题色(淡紫)。而且,页面上还会出现“+”的符号,点击它,我们就可以把这个PWA页面添加到手机主屏幕。点击主屏幕当中的PWA图标,就可以使它全屏显示,并且我们还可以在离线状态下使用。

相关推荐
从 HTTP 到 HTTPS:IIS 8 部署免费 HTTPS教程
网页制作教程:无需写一行代码也能完成网页设计

精彩推荐

热门教程