2757com 17

将整个网站打包到一个文件中2757com,并具有后台同步和内容索引之类的功能技术

在迈向“渐进式 Web 应用”(WPA)的持续努力下,谷歌已经使 Web Apps
向着原生应用迈进了重要的一步。在新版 Chrome 工具中,其引入了 Web
Bundles 技术,以完全弥合两者之间的差距。

●通过蓝牙或Wi-Fi Direct向好友分享一个Web App或一段内容;

PWA 只能通过现代 Web
浏览器访问,传统浏览器无法访问它。这可能会给仍在使用旧版软件的公司带来问题。

  1. Google Chart Tools

安装了的 web app 启动时会带自定义的闪屏画面

在旧版本的 Android Chrome 上,点击主屏幕上的 app 图标通常会花费 200
毫秒(一些慢的网站甚至要数秒)以到达文档的第一帧被渲染到屏幕上。

在这段时间内,用户会看到一个白屏,减少对你网站的感知到的性能。Chrome 47
和以上版本
支持自定义闪屏(基于来自
Web App manifest
的背景颜色,名字和图标)会在浏览器准备绘制一些东西前给屏幕一些颜色。这使得你的
webapp 感受上更接近 “原生”。

2757com 1

Realfavicongenerator.net
现在还支持根据你的清单(manifest)预览并自定义闪屏,很方便地节约时间。

注意:Firefox for Android 和 Opera for Android 也支持 Web
应用程序清单,闪屏和添加到主屏幕的体验。在 iOS 上,Safari
也支持自定义添加到
主屏幕的图标
并曾经支持一个 专有的闪屏
实现,然而这个在 iOS9 上显得不能用了。我已经填了一个特性请求给
Webkit,以支持 Web App manifest,所以…希望一切顺利吧。

(题图 via MSPU)

●与MHTML不同的是,它能够启用可执行的JavaScript;

AliExpress
(阿里全球速卖通)是最好的电子商务网站,拥有来自世界各地的大量客户。在添加
PWA 之后,该策略使 iOS 转换率提高了82%,同时页面访问量翻了一番。

  1. Google Ajax Libraries API

设计是移动友好的

为多种设备所优化的 Apps 必须在他们的 document 里面包括一个
meta-viewport。这看上去非常明显,但是我看到过很多的
React 项目中,人们忘了加上这个。好在
create-react-app
有默认加上有效的 meta-viewport,而且如果缺失的话 Lighthouse 会标记上:

尽管我们非常重视渐进式 Web 应用程序在移动 web 的体验,这
并不意味着桌面应该被忘记。一个精心设计的
PWA 应该可以在各种 viewport 尺寸、浏览器以及设备上良好运作,正如
Housing.com 所展示的:

2757com 2

在系列第 2 部分,我们将会看看那 使用 React 和 Webpack
的页面加载性能
。我们会深入
code-splitting(代码分割),基于路由的 chunking(分块)以及
达到更快交互性 PRPL 模式。

如果你不熟悉 React,我发现 Wes Bos 写的 给新手的
React 很棒。

感谢 Gray Norton, Sean Larkin, Sunil Pai, Max Stoiber, Simon Boudrias,
Kyle Mathews 和 Owen Campbell-Moore 的校对

打赏支持我翻译更多好文章,谢谢!

打赏译者

来源:cnBeta 原文:engadget.com

●支持多页面封装,将整个网站打包到一个文件中;

Google 已宣布正在开发支持 PWA
的浏览器,该浏览器将很快发布。从现在开始,你可以随时在浏览器中查看此类内容。

Google 现在已经将网站加载速度算到搜索排名算法中,Page Speed
可以帮助你分析你的网站性能,基于 Google Web 性能最佳实践。

HTTPS 的工具和建议

2757com 3

HTTPS
防止坏人篡改你的 app 和你的用户使用的浏览器之间的通信,你可能读过 Google
正在推动
羞辱
那些没有加密的网站。强大的新型 web 平台 APIs,像 Service
Worker,require
通过 HTTPS 保护来源,但是好消息是像是
LetsEncrypt 这样的服务商提供了免费的 SSL
证书,便宜的选择像是
Cloudflare 可以使端到端流量
完全
加密,从来没有如此简单直接地能做到现在这样。

作为我的个人项目,我通常会部署到 Google App
Engine,它支持通过 appspot.com
域名的 SSL 通信服务,只需要你加上
‘secure’
参数到你的 app.yaml 文件。对于需要 Node.js 支持 Universal 渲染的 React
apps,我使用 Node on App
Engine。Github
Pages 和
Zeit.co 现在也支持 HTTPS。

2757com 4

这个 Chrome DevTools Security
面板

允许你印证安全证书和混合内容错误的问题。

一些更多的小贴士可以使你的网站更加安全:

  • 根据需要重定向用户,升级非安全请求(“HTTP” 连接)到
    “HTTPS”。可以一看
    内容安全策略 和
    升级非安全请求。
  • 更新所有引用 “http://” 的链接到
    “https://”。如果你依赖第三方的脚本或者内容,跟他们商量一下让他们也支持一下
    HTTPS 资源。
  • 提供页面的时候,使用 HTTP
    严格传输安全
    (HSTS) 头。这是一个强制浏览器只通过 HTTPS 和你的网站交流的指令。

我建议去看看 Deploying HTTPS: The Green Lock and
Beyond
和 Mythbusting HTTPS: Squashing security’s urban
legends
来了解更多。

该工具包允许开发者将整个网站打包成一个脱机文件,甚至包含用于身份验证的短信接收、联系人选择、文件系统访问等功能。

用户可在Chrome浏览器中激活该实验性功能进行尝试。

Google 开发的 Polymer 包含大量的 Web 组件、工具和模板,使你的 PWA
开发变得非常简单。聚合物包含纯HTML/CSS/JS,使其成为完全独立的框架。这就是它适用于
PWA 的原因。

  1. Webmaster Tools

Lighthouse

让我们从一个 PWA manifest 开始。为此我们会使用
Lighthouse — 一个评审
app 面向 PWA
特性
的工具,并且检查你的 app 在模拟移动场景下是否做的足够好。Lighthouse
可以通过 Chrome
插件
(我大部分时候都用这个) 以及
CLI
来使用,两者都会展示一个类似这样的报告:

2757com 5

来自 Lighthouse Chrome 插件的结果

顶级评审工具 Lighthouse 会高效地运行一系列为移动世界精炼的现代 web
最佳实践:

  • 网络连接是安全的
  • 用户会被提醒将 app 添加到 Homescreen
  • 安装了的 web app 启动时会带自定义的闪屏画面
  • App 可以在离线/断断续续的连接下加载
  • 页面加载性能快速
  • 设计是移动友好的
  • 网页是渐进式增强的
  • 地址栏符合品牌颜色

顺便一提,有一个 Lighthouse 的
快速入门指南,而且它还能通过
远程调试
工作。超级酷炫。

无论在你的技术栈中使用了什么库,我想要强调的是在上面列出的一切,在今天都只需要一点小小的工作量就能完成。然而也有一些警告。

我们知道移动 web 是
慢的

web
从一个以文档为中心的平台演变为了头等的应用平台。同时我们主要的计算能力也从强大的,拥有快速可靠的网络连接的强大桌面机器移动到了相对不给力的,连接通常慢,断断续续或者两者都存在的移动设备上。这在下一个
10 亿用户即将上网的世界尤其真实。为了解锁更快的移动 web:

  • 我们需要全体转移到在真实移动设备,现实的网络连接下进行测试 (e.g
    在 DevTools 的常规
    3G)。
    chrome://inspect
    和 WebPageTest
    (视频)
    是你的好帮手。Lighthouse 模拟一台有触摸事件的 Nexus 5X 设备,以及
    viewport 仿真 和 被限制的网络连接 (150毫秒延迟,1.6Mbps 吞吐量)。
  • 如果你使用的是设计开发时没有考虑移动设备的 JS
    库,你可能会为了可交互性能打一场硬仗
    。我们的理想化目标是在一台响应式设备上
    5 秒内变得可交互,所以我们应用代码的预算会更多是 ❤

2757com 6

通过一些工作,可以写出 如 Housing.com
所展示的
在有限网络环境下,真机上依然表现良好的使用 React 开发的
PWAs。我们在接下来的系列中讨论如何实现的详尽 细节

话虽如此,这是一个很多库都在尽力提高的领域,你可能需要知道他们是否会继续提高在物理设备上的性能。只需要看看
Preact 所做的超级棒的
真实世界设备的性能。

开源 React 渐进式 Web App 示例

2757com 7

如果你想要看更复杂的使用 React 开发,并使用 Lighthouse 优化的 PWAs
例子,你可能会感兴趣于:

ReactHN— 一个使用服务端渲染并支持离线的
HackerNews 客户端 或者
iFixit — 一个使用
React 开发,但使用了 Redux 进行状态管理的硬件修复指南 app。

现在让我们梳理一遍在 Lighthouse 报告中需要清点的每一项,并在系列中继续
React.js 专用的小贴士。

  • 支持多页面封装,将整个网站打包到一个文件中;
  • 与 MHTML 不同的是,它能够启用可执行的 JavaScript;
  • 使用 HTTP Variants 进行内容协商,若离线使用,可在标头中启用
    Accept-Language 国际语言支持;
  • 支持发布者加密签名,在其来源的上下文中加载;
  • 本地即时加载。

官方给出的一些特性总括:

在将 PWA 纳入其营销策略后,顶级电子商务网站 Flipkart 的转换率提高了
70%。此外,该网站记录到了 40% 的新访客。

Google 的使命是 Web,在 Google 眼中,未来的一切应用都将 Web
化,一直以来,Google 为
Web开发与设计者推出了大量免费工具,让他们更好地创建,维护,改善他们的
Web站点,这些工具包含了开发,分析,维护,修补等等用途,本文将介绍15款这样的工具。

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

2757com 8
2757com 9

1 赞 收藏
评论

2757com 10

●创建自己的内容,并以各种方式去分发,而不受网络的限制;

你只需在移动浏览器中打开支持 PWA
的网站,就会立即在你的手机中列出该应用。此外 Chrome 正在研究 PWA
的许多可能性,例如将 PWA 添加到 play store。

Google Web Tootlkit 是一个 Web
开发基础框架,为开发者提供了一些基础类库,GWT 同 Google 的其它产品,如
AdWords,FeedBurner,Google Ajax 类库等紧密集成,这里有一个 Google Docs
教程。

在 渐进式 Web
应用程序
(PWAs) 的世界中有很多新东西,你可能会想知道它们和现有架构是如何兼容的 ——
比如 React 和 JS 模块化打包工具如
Webpack 之间的兼容性如何。PWA
是否需要大量的重写?你需要关注哪个 Web
性能度量工具?在这系列的文章中,我将会分享将基于 React 的 web apps
转化为 PWAs
的经验。我们还将包括为什么加载用户路由所需要的,并抛开其他所有脚本是提高性能的好方式。

感兴趣的朋友,可在 Chrome 浏览器中激活这项实验性功能(Web
Bundle)。不过随着 Web Apps 功能的不断增强,可能迟早会闹出 HTML
病毒啥的。

IT之家11月12日消息据外媒报道,谷歌在新版Chrome工具中加入了全新的Web
Bundles技术,在新技术加入后Chrome实现了Web
Apps脱机工作功能,同时还拥有了后台同步和内容索引之类的功能,当用户的互联网中断时上述功能可保障Chrome得以继续无缝运行。

PWA 对于必须构建原生应用的企业非常重要。如果人们倾向于使用
PWA,那么他们将为此增加收益。所以为什么不立即启用你的网站 PWA?

这是 Google Chrome 中类似 Firefox Firebug 以及 Web Developer Toolbar
的一个扩展,用于调试你的网页,包含一个 DOM 探测器,一个 JavaScript
调试台,可以设置执行断点和跟踪,一个类似 YSlow 的执行分析器。

渐进式 Web
应用程序利用新技术的优势带给了用户最佳的移动网站和原生应用。它们是可靠的,迅捷的,迷人的。它们来自可靠的源,而且无论网络状态如何都能加载。

2757com 11

●将整个站点装在一个USB驱动器里,甚至将其托管在本地网络中。

此外,手机中的应用数量会影响其内存和存储空间,因此很所用户都无法下载原生应用。

  1. Google Code Search

2757com 12

据悉,该框架不仅可以使 Web Apps 脱机工作,甚至能够从 USB
等驱动器介质进行安装,并具有后台同步和内容索引之类的功能技术,可在互联网中断时继续无缝运行。

●支持发布者加密签名,在其来源的上下文中加载;

除此之外,还有其他框架和库,可以帮助你开发 PWA。

顾名思义,Google Sites 可以帮你创建一个托管的网站,可以将包括
YouTube,幻灯,Gmail 日历,Google Gear 小程序,Google Docs
一类的应用集成其中。如果将站点设置为不公开,你可以将这个工具用于个人文档工具。

本文由 伯乐在线 –
markzhai
翻译。未经许可,禁止转载!
英文出处:Addy
Osmani。欢迎加入翻译组。

  • 创建自己的内容,并以各种方式去分发,而不受网络的限制;
  • 通过蓝牙或 Wi-Fi Direct 向好友分享一个 Web App 或一段内容;
  • 将整个站点装在一个 USB 驱动器里,甚至将其托管在本地网络中。

●使用HTTP
Variants进行内容协商,若离线使用,可在标头中启用Accept-Language国际语言支持;

你可以使用此功能与其他用户共享你的内容或该应用。

经典的 Google 流量分析统计工具。

用户会被提醒将 app 添加到 Homescreen

下一个要讲的是自定义你的 app 的
“添加到主屏幕”
体验(favicons,显示的应用名字,方向和更多)。这是通过添加一个 Web 应用
manifest
来做的。我经常会找定制的跨浏览器(以及系统)的图标来完成这部分工作,但是像是
realfavicongenerator.net
这样的工具能解决不少麻烦的事情。

2757com 13

有很多关于一个网站只需要在大部分场合能工作的 “最少” favicons
的讨论。Lighthouse
提议 提供一个
192px 的图标给主屏幕,一个 512px 的图标给你的闪屏。我个人坚持从
realfavicongenerator 得到的输出,除了它包含更多的 metatags,
我也更倾向于它能涵盖我的所有基数。

一些网站可能更倾向于为每个平台提供高度定制化的 favicon。我推荐去看看
设计一个渐进式 Web App
图标
以获得更多关于这个主题的指导。

2757com 14

通过 Web App manifest 安装,你还能获得 app
安装器横幅,让你有方法可以原生地提示用户来安装你的
PWA,如果他们觉得会经常使用它的话。还可以
延迟
提示,直到用户和你的 app 进行了有意义的交互。Flipkart
找到
最佳时间来显示这个提示是在他们的订单确认页。

Chrome DevTools Application
面板

支持通过 Application > Manifest 来查看你的 Web App manifest:

2757com 15

它会解析出列在你的 manifest 清单文件的
favicons(网站头像),还能预览像是 start URL 和 theme colors
这样的属性。顺带一提,如果感兴趣的话,这里有一个完整的关于 Web App
Manfests 的工具小贴士
片段
😉

相关视频点此查看:Web Bundles – user-to-user sharing
demo

该工具包可使开发者将整个网站捆绑为脱机文件,同时还允许开发者保留用于身份验证的短信接收、联系人选择、文件系统访问等功能。

PWA
对用户和服务提供商都很有帮助。正如我们前面提到的那样,有些没有原生应用的企业可以通过定位移动用户的大量受众来获得
PWA 的最大优势。

  1. Browser Size

网络连接是安全的

下面是 Google 给出的一些用例:

2) Web和硬件之间的冲突

Google Ajax Libraries API 包含多种流行的 JavaScript 库,并可以从
Google 高性能的 CDN
网络中加载,既节省了你的服务器带宽,同时,由于用户可能已经在别的网站加载过这个库,因此可以显著加快这些库的加载速度。

关于作者:markzhai

2757com 16

Software Engineer, Android,
JavaScript, Data Mining, Security。曾就职Google HK,腾讯,阿里。

个人主页 ·
我的文章 ·
26 ·
     

下面是 Google 讲述的 Web bundles 的一些特性:

“添加到主屏幕”允许你随时安装并使用“精简版” 的 PWA 网站。

该工具帮你分析,你的网页在不同浏览器,不同浏览尺寸下的显示状况,非常适合看看自己的网页在不滚动的情况下,在各种浏览尺寸下显示到哪里。

离线支持

帮助开发者搜索代码,支持正则表达式搜索,或在一个高级搜索界面中,很直观地搜索那些可能会让你事半功倍的公共代码。

但是,由于预算或其他原因而没有开发原生应用的小公司马上就要笑了,因为本机应用很快就会被
PWA(Progressive Web Apps)所取代。

  1. Page Speed

结论

本文国际来源:Six Revisions The Top 15 Google Products for People Who
Build Websites (原文作者 Jacob Gube)

你是否正处于选择 App 开发技术的两难境地?如今,渐进式 Web
应用程序需求旺盛。知道这是为什么吗 ?

  1. Speed Tracer

随着它的发展可以预期,到2020年我们将看到现代 Web 技术的新时代。

  1. Google Chrome Developer Tools

原生体验

  1. Google Web Toolkit

PWA 高效且经济

2757com 17

让我们来看一下……

这是 Google Code 项目的一部分,可以帮你托管你的开源项目,Web
开发与设计者还可以在这里找到大量现成的项目以供借鉴或套用。

让我们了解一下 PWA 在营销领域的其他方面。

这是一个可用来托管自己的 Web
程序的地方,甚至可以使用自己的域名。这里有一个教程,讲解如何使用 Google
App Engine 来创建一个留言本。Google App Engine 中已经托管了大量的 Web
程序。

连通性

  1. Google Website Optimizer

3) Ionic

Closure Tools 是 Google Labs
的一个开发套件,包含3个工具,闭包编译器,闭包函数库以及一个用于动态生成
HTML 的闭包模板。

PWA 可以用于所有的浏览器,但必须是现代浏览器并合乎 PWA 的规则。

一个对网站拥有者来说非常有用的程序,可以帮助你从各个角度改善自己的站点。可以发现站点中的恶意程序,发现搜索引擎爬虫遇到的错误,可以发现你的
HTML
代码中需要改进的部分。还可以帮你发现你的站点中最热门的网页,并发现你站点中的错误链接。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章