改造你的网站,变身 PWA
渐进式Web应用(PWA)入门教程(上)
原文出处: Craig Buckler 译文出处:葡萄城控件
最近关于渐进式Web应用有好多讨论,有一些人还在质疑渐进式Web应用是否就是移动端未来。
但在这篇文章中我并不会将渐进式APP和原生的APP进行比较,但有一点是可以肯定的,这两种APP的目标都是使用户体验变得更好。
移动端Web应用有很多优秀的概念让人应接不暇,但好在编写一个渐进式Web应用不是一个很困难的事情。在这篇文章里将向你介绍如何把一个普通的网站转换成渐进式Web应用。你可以按照这篇文章一步一步地做,做完之后你的网站将可以实现离线访问,并且可以在桌面上创建该网站的图标。那么下面即将开始入门教程。
什么是渐进式Web应用?
渐进式Web应用是一种全新的Web技术,让Web应用和原生APP的体验相近或一致。
渐进式Web应用它可以横跨Web技术及Native APP开发的解决方案,对于开发者的优势如下:
- 你只需要关心W3C的Web标准,不用关心各种Native APP的代码。
- 用户可以在安装应用之前先试用。
- 在渐进式Web应用中,你不需要使用各种应用商店来分发应用,也不用关心应用发布时奇怪的审核标准以及应用内购的平台抽成。另外,应用程序更新是自动进行的,无需用户交互,所以整体的使用体验对于用户来讲更为的平滑。
- 渐进式Web应用的“安装”过程很快,只需要在主屏幕上添加一个图标即可。
- 渐进式Web应用启动时可以显示一个好看的启动画面。
- 你可以在渐进式Web应用中提供具有全屏体验的应用。
- 通过系统通知等形式提高用户的粘性。
- 渐进式Web应用将会在本地缓存必要的文件,所以渐进式Web应用会比普通的Web应用的性能更好。
- 轻量级安装——你只需要缓存几百KB的数据即可。
- 所有的数据传输必须使用安全的HTTPS连接
- 渐进式Web应用可以离线缓存数据,并且会在重新连接互联网时重新同步数据。
pwa
渐进式Web应用发展的现状
渐进式Web应用才刚刚开始发展,但实际上在国内,有些网站已经实际开始PWA的实践了,例如:微博、豆瓣、淘宝等平台。可能这时候聪明的你可能就会产生疑问,那这个PWA不就是和微信小程序一样吗,对是这样,二者的目的是一致的,就是在移动端为用户提供足够轻量且与原生应用使用体验相近的“轻”应用。
但就目前来讲,PWA是Google主推的一项技术标准,FireFox,Chrome以及一些基于Blink的浏览器已经支持渐进式Web应用了,Edge上对渐进式Web应用的支持还在开发。Apple公司也表示会考虑在自己Safari支持PWA。然而这项功能已经进入了WebKit内核的五年计划中。长期来看,对浏览器兼容性的支持方面应该已经不算太大问题了。况且在现阶段,在不支持渐进式Web应用的浏览器中,你的应用也只是无法使用渐进式Web应用的离线功能而已,除此之外的功能均可以正常使用。
而在微信这边,凭借庞大的用户基数和体量能否与PWA分庭抗礼乃至笑到最后目前还不得而知。
最近有很多关于 Progressive Web Apps(PWAs)的消息,很多人都在问这是不是(移动)web 的未来。我不想陷入native app 和 PWA 的纷争,但是有一件事是确定的 --- PWA极大的提升了移动端表现,改善了用户体验。
示例代码
大多数教程都讲述的是如何在Chrome上从零开始制作一个类似原生界面的应用。然而在这篇教程中,我们并不打算做一个单页面应用程序,所以在这我们也不必了解诸如Material Design等知识。那么下面我们就直接看示例吧。
你可以从GitHub中获取本教程对应的示例代码。
本示例中提供了一个有四个网页的网站,一个CSS文件和一个JavaScript文件。这个网站可以在所有的现代浏览器上正常工作(IE10 )。如果你的浏览器支持渐进式Web应用,用户可以在离线状态下将会直接访问缓存中的页面。
要想运行此示例,请确保你已经安装了Node.js。并请打开命令行,使用以下命令来运行该示例:
node ./server.js [port]
1
|
node ./server.js [port]
|
以上命令中,[port]是可选部分,默认为8888。使用 Ctrl C 即可停止Web服务器。
打开基于Blink内核的浏览器(Opera,Vivaldi,Chrome),然后在地址栏中输入http://localhost:8888/(注意端口号是否正确),即可访问该示例。你可以打开开发者工具(F12 或者 Cmd/Ctrl Shift I)来查看控制台信息。
查看首页,也可以在页面上点击一下,然后使用以下方法进入离线模式:
选中Network标签或者Application -> Service Workers 标签下的“离线”选项。重新访问之前访问过的网页,之前网页仍然会加载:
好消息是开发一个 PWA 并不难。事实上,我们可以将现存的网站进行改进,使之成为PWA。这也是我这篇文章要讲的 -- 当你读完这篇文章,你可以将你的网站改进,让他看起来就像是一个 native web app。他可以离线工作并且拥有自己的主屏图标。
连接移动端安装
除了在PC浏览器访问外,你也可以在移动设备上访问该示例。使用USB线缆将你的移动设备连接到电脑上,然后从右上角三个点菜单中打开More tools – Remote devices标签
点击左侧的Settings菜单,然后添加一条端口映射(Port Forwarding)的规则,将8888映射为localhost:8888,现在你可以直接在手机打开Chrome然后访问http://localhost:8888 。
你可以使用浏览器的“添加到主屏幕”功能将当前网页添加到主屏幕,在你访问了几个页面之后,浏览器会将这个Web应用“安装”到你的设备上。浏览几个页面,关闭Chrome并将设备与电脑断开连接,点击桌面上生成的图标,你会看到一个Splash页面,并且你可以继续浏览之前浏览过的页面。
Progressive Web Apps 是什么?
Progressive Web Apps (下文以“PWAs”代指) 是一个令人兴奋的前端技术的革新。PWAs综合了一系列技术使你的 web app表现得就像是 native mobile app。相比于纯 web 解决方案和纯 native 解决方案,PWAs对于开发者和用户有以下优点:
你只需要基于开放的 W3C 标准的 web 开发技术来开发一个app。不需要多客户端开发。
用户可以在安装前就体验你的 app。
不需要通过 AppStore 下载 app。app 会自动升级不需要用户升级。
用户会受到‘安装’的提示,点击安装会增加一个图标到用户首屏。
被打开时,PWA 会展示一个有吸引力的闪屏。
chrome 提供了可选选项,可以使 PWA 得到全屏体验。
必要的文件会被本地缓存,因此会比标准的web app 响应更快(也许也会比native app响应快)
安装及其轻量 -- 或许会有几百 kb 的缓存数据。
网站的数据传输必须是 https 连接。
PWAs 可以离线工作,并且在网络恢复时可以同步最新数据。
现在还处在 PWA 的早期,但已经有 很多成功案例 。
PWA 技术目前被 Firefox,Chrome 和其他基于Blink内核的浏览器支持。微软正在努力在Edge浏览器上实现。Apple没有动作 although there are promising comments in the WebKit five-year plan。幸运的是,浏览器支持对于 PWA 似乎不太重要...
小结
通过本节对渐进式Web应用的介绍,相信大家对PWA是什么已经有了基本的认识。PWA有无需担心有无网络的特点,并具有独立入口与独立的保护机制。新标准的推出很可能会带着 Web 应用在移动设备上浴火重生。所以满足 PWA 模型的前端控件,如纯前端表格控件SpreadJS,将逐渐成为移动操作系统的一等公民,并将向Native APP发起挑战。
在下节中我们将带你一起去看看,PWA的原理是什么,以及它究竟是如何工作的,敬请期待。
1 赞 1 收藏 评论
PWAs 是渐进增强的
你的app仍然可以运行在不支持 PWA 技术的浏览器里。用户不能离线访问,不过其他功能都像原来一样没有影响。综合利弊得失,没有理由不把你的 app 改进为 PWA。
不只是 Apps
Google 引领了 PWA 的一系列动作,所以大多数教程都在说如何从零开始构建一个基于 Chrome,native-looking mobile app。然而并不是只有特殊的单页应用可以PWA化,也不需要一定遵循 material interface design guidelines。大多数网站都可以在数小时内实现 PWA 化。这包括你的 WordPress站点或者静态站点。
示例代码
示例代码可以在https://github.com/sitepoint-editors/pwa-retrofit找到。
代码提供了一个简单的四个页面的网站。其中包含一些图片,一个样式表和一个main javascript 文件。这个网站可以运行在所有现代浏览器上(IE10 )。如果浏览器支持 PWA 技术,当离线时用户可以浏览他们之前看过的页面。
运行代码前,确保 Node.js 已经安装,然后再命令行里启动服务:
node ./server.js [port]
[port]
是可配置的,默认为 8888。打开 Chrome
或者其他基于Blink内核的浏览器,比如 Opera 或者 Vivaldi,然后输入链接
http://localhost:8888/(或者你指定的某个端口)。你也可以打开开发者工具看一下各个console信息。
浏览主页,或者其他页面,然后用以下任一方法使页面离线:
按下 Cmd/Ctrl C ,停止 node 服务器,或者
在开发者工具的 Network 或者 Application - Service Workers 栏里点击 offline 选项。
重新浏览任意之前浏览过的页面,它们仍然可以浏览到。浏览一个之前没有看过的页面,你会看到一个专门的离线页面,标识“you’re offline”,还有一个你可以浏览的页面列表:
连接手机
你也可以通过 USB 连接你的安卓手机来预览示例网页。在开发者工具中打开 Remote devices 菜单。
在左边选择 Settings ,点击 Add Rule 输入 8888 端口。你可以在你的手机上打开Chrome,打开 http://localhost:8888/。
你可以点击浏览器菜单里的 “Add to Home screen”。浏览几个页面,浏览器会提醒你去安装。这两种方式都可以创建一个新的图标在你的主屏上。浏览几个页面后关掉Chrome,断开设备连接。你依然可以打开 PWA Website app -- 你会看到一个启动页,并且可以离线访问之前你访问过的页面。
将你的网站改进为一个 Progressive Web App 总共有三个必要步骤:
第一步:开启 HTTPS
由于一些显而易见的原因,PWAs 需要 HTTPS 连接。
澳门娱乐场网址,HTTPS 在示例代码中并不是必须的,因为 Chrome 允许使用 localhost 或者任何 127.x.x.x 的地址来测试。你也可以在 HTTP 连接下测试你的 PWA,你需要使用 Chrome ,并且输入以下命令行参数:
--user-data-dir
--unsafety-treat-insecure-origin-as-secure
第二步:创建一个 Web App Manifest
manifest 文件提供了一些我们网站的信息,例如 name,description 和需要在主屏使用的图标的图片,启动屏的图片等。
manifest文件是一个 JSON
格式的文件,位于你项目的根目录。它必须用Content-Type: application/manifest json
或者 Content-Type: application/json
这样的 HTTP
头来请求。这个文件可以被命名为任何名字,在示例代码中他被命名为
/manifest.json
:
{
"name" : "PWA Website",
"short_name" : "PWA",
"description" : "An example PWA website",
"start_url" : "/",
"display" : "standalone",
"orientation" : "any",
"background_color" : "#ACE",
"theme_color" : "#ACE",
"icons": [
{
"src" : "logo/logo072.png",
"sizes" : "72x72",
"type" : "image/png"
},
{
"src" : "logo/logo152.png",
"sizes" : "152x152",
"type" : "image/png"
},
{
"src" : "logo/logo192.png",
"sizes" : "192x192",
"type" : "image/png"
},
{
"src" : "logo/logo256.png",
"sizes" : "256x256",
"type" : "image/png"
},
{
"src" : "logo/logo512.png",
"sizes" : "512x512",
"type" : "image/png"
}
]
}
在页面的<head>
中引入:
<link rel="manifest" href="/manifest.json">
manifest 中主要属性有:
- name —— 网页显示给用户的完整名称
- short_name —— 当空间不足以显示全名时的网站缩写名称
- description —— 关于网站的详细描述
- start_url —— 网页的初始 相对 URL(比如
/
) - scope —— 导航范围。比如,
/app/
的scope就限制 app 在这个文件夹里。 - background-color —— 启动屏和浏览器的背景颜色
- theme_color —— 网站的主题颜色,一般都与背景颜色相同,它可以影响网站的显示
- orientation —— 首选的显示方向:
any
,natural
,landscape
,landscape-primary
,landscape-secondary
,portrait
,portrait-primary
, 和portrait-secondary
。 - display —— 首选的显示方式:
fullscreen
,standalone
(看起来像是native app),minimal-ui
(有简化的浏览器控制选项) 和browser
(常规的浏览器 tab) - icons —— 定义了
src
URL,sizes
和type
的图片对象数组。
MDN提供了完整的manifest属性列表:Web App Manifest properties
在开发者工具中的 Application tab 左边有 Manifest 选项,你可以验证你的 manifest JSON 文件,并提供了 “Add to homescreen”。
本文由澳门娱乐场网址发布于计算机教程,转载请注明出处:改造你的网站,变身 PWA
关键词:
上一篇:干货 | 10分钟玩转PWA
下一篇:没有了