您的位置:奥门新浦京网址 > Wed前段 > 应用要知道的那些事,入门教程

应用要知道的那些事,入门教程

发布时间:2019-10-17 03:40编辑:Wed前段浏览(153)

    渐进式Web应用(PWA)入门教程(上)

    2018/05/23 · 基础技术 · PWA

    原文出处: Craig Buckler   译文出处:葡萄城控件   

    最近关于渐进式Web应用有好多讨论,有一些人还在质疑渐进式Web应用是否就是移动端未来。

    但在这篇文章中我并不会将渐进式APP和原生的APP进行比较,但有一点是可以肯定的,这两种APP的目标都是使用户体验变得更好。

    移动端Web应用有很多优秀的概念让人应接不暇,但好在编写一个渐进式Web应用不是一个很困难的事情。在这篇文章里将向你介绍如何把一个普通的网站转换成渐进式Web应用。你可以按照这篇文章一步一步地做,做完之后你的网站将可以实现离线访问,并且可以在桌面上创建该网站的图标。那么下面即将开始入门教程。

    做 Web 应用要知道的那些事

    2015/07/21 · HTML5 · Web应用

    本文由 伯乐在线 - 刘健超-J.c 翻译,黄利民 校稿。未经许可,禁止转载!
    英文出处:blog.venanti.us。欢迎加入翻译组。

    在过去一年里,我从零开始开发一直在我的首个重要的 Web 应用程序。这次经历教会了我许多之前不知道的东西,特别在安全和用户体验方面。

    我最后一次尝试开发足够复杂的应用是在 2005 年,所以就我的立场来说,有很多东西需要补充。

    除了我所知所见外,要记住本文清单里的内容。因为在开发 Web 应用时,尤其是刚开始做的时候,容易忘记一些重要的事情。

    这个检查清单并不是面面俱到,如果你是一个经验丰富的开发者,这里可能没有让你感到惊喜的东西,但我希望能证明它是有助于让你回忆起一些错过的东西。

    React 同构应用 PWA 升级指南

    2018/05/25 · JavaScript · PWA, React

    原文出处: 林东洲   

    什么是渐进式Web应用?

    渐进式Web应用是一种全新的Web技术,让Web应用和原生APP的体验相近或一致。

    渐进式Web应用它可以横跨Web技术及Native APP开发的解决方案,对于开发者的优势如下:

    1. 你只需要关心W3C的Web标准,不用关心各种Native APP的代码。
    2. 用户可以在安装应用之前先试用。
    3. 在渐进式Web应用中,你不需要使用各种应用商店来分发应用,也不用关心应用发布时奇怪的审核标准以及应用内购的平台抽成。另外,应用程序更新是自动进行的,无需用户交互,所以整体的使用体验对于用户来讲更为的平滑。
    4. 渐进式Web应用的“安装”过程很快,只需要在主屏幕上添加一个图标即可。
    5. 渐进式Web应用启动时可以显示一个好看的启动画面。
    6. 你可以在渐进式Web应用中提供具有全屏体验的应用。
    7. 通过系统通知等形式提高用户的粘性。
    8. 渐进式Web应用将会在本地缓存必要的文件,所以渐进式Web应用会比普通的Web应用的性能更好。
    9. 轻量级安装——你只需要缓存几百KB的数据即可。
    10. 所有的数据传输必须使用安全的HTTPS连接
    11. 渐进式Web应用可以离线缓存数据,并且会在重新连接互联网时重新同步数据。

    安全性

    确认邮件:当用户注册时,应向他们发送带有点击确认邮箱的链接的邮件。如果用户更新他们的邮箱地址,则要再次重复这个工作流程。

    身份管理:当存储密码时,首先对它们进行加盐和散列操作,然后再用现在广泛使用的 crypto 库。如果你不这样做的话,把身份管理转由给 Facebook / GitHub /  Twitter / 等,用 OAuth 就能做到。

    加密:所有证书问题,还有什么比 SSL 更好。使用它吧。还可以使用 HSTS。

    凭证:不要把服务器身份信息(API 密钥、数据库密码等)放到版本控制里,否则就泄密了。

    前言

    最近在给我的博客网站 PWA 升级,顺便就记录下 React 同构应用在使用 PWA 时遇到的问题,这里不会从头开始介绍什么是 PWA,如果你想学习 PWA 相关知识,可以看下下面我收藏的一些文章:

    • 您的第一个 Progressive Web App
    • 【Service Worker】生命周期那些事儿
    • 【PWA学习与实践】(1) 2018,开始你的PWA学习之旅
    • Progressive Web Apps (PWA) 中文版

    渐进式Web应用发展的现状

    渐进式Web应用才刚刚开始发展,但实际上在国内,有些网站已经实际开始PWA的实践了,例如:微博、豆瓣、淘宝等平台。可能这时候聪明的你可能就会产生疑问,那这个PWA不就是和微信小程序一样吗,对是这样,二者的目的是一致的,就是在移动端为用户提供足够轻量且与原生应用使用体验相近的“轻”应用。

    但就目前来讲,PWA是Google主推的一项技术标准,FireFox,Chrome以及一些基于Blink的浏览器已经支持渐进式Web应用了,Edge上对渐进式Web应用的支持还在开发。Apple公司也表示会考虑在自己Safari支持PWA。然而这项功能已经进入了WebKit内核的五年计划中。长期来看,对浏览器兼容性的支持方面应该已经不算太大问题了。况且在现阶段,在不支持渐进式Web应用的浏览器中,你的应用也只是无法使用渐进式Web应用的离线功能而已,除此之外的功能均可以正常使用。

    而在微信这边,凭借庞大的用户基数和体量能否与PWA分庭抗礼乃至笑到最后目前还不得而知。

    工程:动画

    所有的爱,都是神圣的。但别为应用里的所有元素添加动画。因为大多数 CSS 动画都会触发布局重绘;最好尽可能地限制自己使用 transform 和 opacity。

    避免进行缓慢的过渡运算,如果非要使用,那么确保它是针对某个属性的(如,”transition: opacity 250ms ease-in” ,而不是 “transition: all 250ms ease-in”)。

    PWA 特性

    PWA 不是单纯的某项技术,而是一堆技术的集合,比如:Service Worker,manifest 添加到桌面,push、notification api 等。

    而就在前不久时间,IOS 11.3 刚刚支持 Service worker 和类似 manifest 添加到桌面的特性,所以这次 PWA 改造主要还是实现这两部分功能,至于其它的特性,等 iphone 支持了再升级吧。

    示例代码

    大多数教程都讲述的是如何在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),然后在地址栏中输入 或者 Cmd/Ctrl + Shift + I)来查看控制台信息。

    图片 1图片 2

    查看首页,也可以在页面上点击一下,然后使用以下方法进入离线模式:

    选中Network标签或者Application -> Service Workers 标签下的“离线”选项。重新访问之前访问过的网页,之前网页仍然会加载:

    图片 3图片 4

    用户体验(UX)

    表单:当提交一个表单后,用户应收到提交后的反馈。如果提交后不向用户发送一个不同的页面,那么就应该有弹框或 alert 一些信息,以便让用户知道这次提交是否成功。

    登录重定向:如果用户打算在你的网站打开一个页面,但并没有登录,那么他们应该首先接收到一个能登录的页面,并在登录后重定向到一个他们原本想打开的一个页面(当然,前提是已得到授权)。

    如果他们尝试登录,但提供了一个错误的密码,这时,用户有可能是忘记了密码,那我们就应该提供一个视觉线索来提醒他们,要有一个重置密码的选项。

    Service Worker

    service worker 在我看来,类似于一个跑在浏览器后台的线程,页面第一次加载的时候会加载这个线程,在线程激活之后,通过对 fetch 事件,可以对每个获取的资源进行控制缓存等。

    连接移动端安装

    除了在PC浏览器访问外,你也可以在移动设备上访问该示例。使用USB线缆将你的移动设备连接到电脑上,然后从右上角三个点菜单中打开More tools – Remote devices标签

    图片 5图片 6

    点击左侧的Settings菜单,然后添加一条端口映射(Port Forwarding)的规则,将8888映射为localhost:8888,现在你可以直接在手机打开Chrome然后访问http://localhost:8888 。

    你可以使用浏览器的“添加到主屏幕”功能将当前网页添加到主屏幕,在你访问了几个页面之后,浏览器会将这个Web应用“安装”到你的设备上。浏览几个页面,关闭Chrome并将设备与电脑断开连接,点击桌面上生成的图标,你会看到一个Splash页面,并且你可以继续浏览之前浏览过的页面。

    图片 7图片 8

    电子邮件

    订阅设置:任何发送到用户的 email ,都应该至少包含一个链接,能链接到修改他们的邮箱设置的应用程序页面,并且最好每个邮件都有一个单独的链接,能取消订阅。

    千万别让用户为了取消订阅而向你发送邮件。

    明确哪些资源需要被缓存?

    那么在开始使用 service worker 之前,首先需要清楚哪些资源需要被缓存?

    小结

    通过本节对渐进式Web应用的介绍,相信大家对PWA是什么已经有了基本的认识。PWA有无需担心有无网络的特点,并具有独立入口与独立的保护机制。新标准的推出很可能会带着 Web 应用在移动设备上浴火重生。所以满足 PWA 模型的前端控件,如纯前端表格控件SpreadJS,将逐渐成为移动操作系统的一等公民,并将向Native APP发起挑战。

    在下节中我们将带你一起去看看,PWA的原理是什么,以及它究竟是如何工作的,敬请期待。

    1 赞 1 收藏 评论

    图片 9

    移动端

    虽然你不必开发移动端…但不管你是否做,你都应该确保这是一个积极的决定,因为这会对你的应用程序设计和工程有实质性影响。

    下面的注意事项是假设你已选择移动端作为你的平台之一。我碰巧选用 Grunt 作为我的构建工具,所以我得使用一些 Grunt-specific 插件,但你可能使用类似的 JavaScript 构建工具。

    缓存静态资源

    首先是像 CSS、JS 这些静态资源,因为我的博客里引用的脚本样式都是通过 hash 做持久化缓存,类似于:main.ac62dexx.js 这样,然后开启强缓存,这样下次用户下次再访问我的网站的时候就不用重新请求资源。直接从浏览器缓存中读取。对于这部分资源,service worker 没必要再去处理,直接放行让它去读取浏览器缓存即可。

    我认为如果你的站点加载静态资源的时候本身没有开启强缓存,并且你只想通过前端去实现缓存,而不需要后端在介入进行调整,那可以使用 service worker 来缓存静态资源,否则就有点画蛇添足了。

    工程

    单页面应用:现今单页面(SPA)是王道。它的主要优势是很少加载整个页面 – 只需加载所需资源,并且无须反复重载相同的资源。如果你才刚刚开始开发一个新的 web 应用,那它很可能是 SPA。

    缓存页面

    缓存页面显然是必要的,这是最核心的部分,当你在离线的状态下加载页面会之后出现:

    图片 10

    究其原因就是因为你在离线状态下没办法加载页面,现在有了 service worker,即使你在没网络的情况下,也可以加载之前缓存好的页面了。

    本文由奥门新浦京网址发布于Wed前段,转载请注明出处:应用要知道的那些事,入门教程

    关键词: