使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍

使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍

来自译者 markzhai:大家也知道最近 Web 越来越火了,如果你还以为 Web 就是 jQuery、Ajax、CSS 什么的,那你就 out 了。给大家几个链接看一看吧:

部分可能需要自备梯子,另外建议在 Chrome 下查看,毕竟该死的 X5,大家都懂得。

使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍

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

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

Lighthouse

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

来自 Lighthouse Chrome 插件的结果

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

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

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

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

我们知道移动 web 是 慢的

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

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

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

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

开源 React 渐进式 Web App 示例

如果你想要看更复杂的使用 React 开发,并使用 Lighthouse 优化的 PWAs 例子,你可能会感兴趣于: ReactHN— 一个使用服务端渲染并支持离线的 HackerNews 客户端 或者 iFixit — 一个使用 React 开发,但使用了 Redux 进行状态管理的硬件修复指南 app。

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

网络连接是安全的

HTTPS 的工具和建议

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

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

这个 Chrome DevTools Security 面板 允许你印证安全证书和混合内容错误的问题。

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

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

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

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

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

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

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

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

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

使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍的更多相关文章

  1. 创建一个离线优先,数据驱动的渐进式 Web 应用程序

    原文地址:Build an offline-first, data-driven PWA 译文出自:我的个人博客 概述 在本文中,您将学习如何使用 Workbox 和 IndexedDB 创建离线优先 ...

  2. 渐进式Web应用程序的深入概述

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://www.grapecity.com.cn/blogs/wijmo-depth-ove ...

  3. 开发一个渐进式Web应用程序(PWA)前都需要了解什么?

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://dzone.com/articles/how-to-build-a-progres ...

  4. Blazor WebAssembly 渐进式 Web 应用程序 (PWA) 使用 LocalStorage 离线处理数据

    原文链接:https://www.cnblogs.com/densen2014/p/16133343.html Window.localStorage 只读的localStorage 属性允许你访问一 ...

  5. PWA 渐进式Web应用程序 - 解释

    想象一下,如果一个网站上所有的功能都能够作为一个移动应用程序为用户所用——任何设备上都可以使用.可接收所有的通知.离线模式可用,为了实现这个愿景,2015年,谷歌创造了渐进式Web应用程序(PWA). ...

  6. (转)PWA(Progressive Web App)渐进式Web应用程序

    PWA 编辑 讨论 PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送.在移动端利用标准化 ...

  7. react.js 从零开始(三)JSX 语法及特点介绍

    什么是jsx? jsx = JavaScript + xml jsx 是一种 Ecmascript 的一种新标准. jsx 是一种 带有结构性的语法. jsx 的特点: 1.类xml语法易于理解. 2 ...

  8. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

  9. 28个漂亮的React.js后台管理模板

    React管理模板 为您的React Web应用程序开发一个管理区域可能非常耗时.它与设计所有前端页面一样重要. 这是2020年设计出色的顶级React.js后台管理模板的列表. 这些模板确实有价值, ...

随机推荐

  1. HTTP与HTTPS握手的那些事

    今天我总结了什么是HTTP三次握手,还有HTTPS握手的过程以及为什么HTTPS是安全的. 前提 在讲述这两个握手时候,有一些东西需要提前说明. HTTP与TCP/IP区别? TPC/IP协议是传输层 ...

  2. SAP打印机配置

    SAP打印机配置 一.SAP打印原理 SAP的打印过程分两个步骤: 1.创建假脱机请求: 2.创建输出请求: 在点击打印按钮后,系统会提示创建假脱机请求后,你可以选择直接生成输出请求,或者手动生成输出 ...

  3. SharePoint 2013 PowerShell命令备份还原报错

    错误截图: 文字描述: Restore-SPSite : <nativehr>0x80070003</nativehr><nativestack></nati ...

  4. 关于web软件信息安全问题防护资料的整理(三)

    了解了web系统的安全威胁,那么我们应该怎样防范这些安全威胁呢? 1.时刻准备应战 Web应用系统所面临的威胁是非常严峻的.不管攻击的一方是采用单一形式的攻击,还是采用混合多种手段的混合攻击,作为防护 ...

  5. Atitit jOrgChart的使用  组织架构图css html

    Atitit jOrgChart的使用  组织架构图css html 1. 项目要做组织架构图,要把它做成自上而下的树形结构,于是决定1 2. Html导入 以来的css js1 2.1. 数据来源 ...

  6. Android压力测试工具——Monkey

    Android压力测试工具——Monkey Monkey是运行在模拟器上和真机设备上的一段程序,它会产生用户事件的一系列伪随机流,比如点击.触摸.手势,还有很多系统级别的事件.Monkey通常是用来做 ...

  7. 实现微信浏览器内打开App Store链接(已被和谐,失效了)

    微信浏览器是不支持打开App Store 页面的,不知道微信为什么这么做.比如你页面写 <a href=”http://itunes.apple.com/us/app/id399608199″& ...

  8. jQuery导航切换功能

    Css ------------------------------------------------------------------------------------------------ ...

  9. static和extern对函数的作用

  10. iOS block从零开始

    iOS block从零开始 在iOS4.0之后,block横空出世,它本身封装了一段代码并将这段代码当做变量,通过block()的方式进行回调. block的结构 先来一段简单的代码看看: void ...