pwa简介

2018-09-14 admin

PWA 能做到原生应用的体验不是靠特指某一项技术,而是经过应用一些新技术进行改进,在安全、性能和体验三个方面都有很大提升,PWA 本质上是 Web App,借助一些新技术也具备了 Native App 的一些特性,兼具 Web App 和 Native App 的优点。

PWA 的主要特点包括下面三点:

  1. 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现
  2. 体验 - 快速响应,并且有平滑的动画响应用户的操作
  3. 粘性 - 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面

可靠

通过 Service Worker 能够让用户在网络条件很差或离线的情况下也能瞬间加载并且展现。

介绍个sw的简便实现方法 offline-plugin

  // webpack.config.js
  var OfflinePlugin = require('offline-plugin');
  module.exports = {
    plugins: [
      new OfflinePlugin({
        Caches: 'all'
      })
    ]
  }
  //index.js
  import * as OfflinePluginRuntime from 'offline-plugin/runtime';
  OfflinePluginRuntime.install();

体验

首屏加载优化 App Shell

粘性

  1. 借助 Web App Manifest 提供给用户和 Native App 一样的沉浸式体验
  2. 可以通过给用户发送离线通知,让用户回流

坑:

  1. ios桌面icon 实现依然使用link标签
  2. 全站必须使用https, 免费证书
  3. manifest.json配置的start-url必须在sw.js缓存列表中,否则无法离线使用

推荐阅读文章:

  1. 下一代 Web 应用模型 —— Progressive Web App
  2. 饿了么的 PWA 升级实践
  3. Your first service worker

原文链接:https://segmentfault.com/a/1190000016403317

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-40289.html

文章标题:pwa简介

相关文章
简介JavaScript中的getSeconds()方法的使用
javascript Date.getSeconds()方法按照本地时间在指定日期返回秒。通过getSeconds返回的值是0到59之间的一个整数。 语法 下面是参数的详细信息: 返回值: 按照本地时间返回在指定的日期的秒数。 例子: &l...
2017-03-24
简介可以自动完成UI的AngularJS工具angular-smarty
我们最近为我们的论坛增加了一个自动完成功能(称为Smarty),在要求专业人员简介的主页上。这是一个超有用的功能,因为它有助于我们将用户导航到他们真正想去的地方。它很有意思,也是用AngularJS构建的! 我们希望Smarty能够: ...
2017-03-24
简介AngularJS的视图功能应用
AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供ng-view 和 ng-template指令,以及 $routeProvider 服务。 ng-view ng-view 标记只是简单地创建一个...
2017-03-24
简介JavaScript中Boolean.toSource()方法的使用
JavaScript Boolean.toSource()方法返回表示对象的源代码的字符串。 注意:此方法不会在Internet Explorer中运行。 语法 下面是参数的详细信息: 返回值 返回表示对象的源代码的字符串。 例子: &lt...
2017-03-24
JavaScript中使用指数方法Math.exp()的简介
此方法返回 Ex, 其中x是参数,E是欧拉不变,自然对数的底数。 语法 下面是参数的详细信息: 返回值: 例子: <html> <head> <title>JavaScript Math exp() Me...
2017-03-24
JavaScript中的toLocaleDateString()方法使用简介
JavaScript Date.toLocaleDateString()方法的日期转换为字符串,使用操作系统的语言环境的约定返回“日期”部分。 语法 Date.toLocaleDateString() 下面是参数的详细信息: 返回值: 返...
2017-03-24
JavaScript中setUTCFullYear()方法的使用简介
javascript Date.setUTCFullYear()方法按照通用时间将全年为指定的日期。 语法 Date.setUTCFullYear(yearValue[, monthValue[, dayValue]]) 注:括号内外的数据...
2017-03-24
Nodejs高扩展性的模板引擎 functmpl简介
关于functmpl functmpl 是一个基于JavaScript/Nodejs的高扩展性的模板引擎 模板格式 <#包含/> 如果想在一个模板中插入另一个模板,可以使用<#包含/> 比如插入模板 a.ftl : ...
2017-03-17
举例简介AngularJS的内部语言环境
AngularJS支持内置的国际化三种类型的过滤器货币,日期和数字。只需要根据国家的区域纳入相应的JS。默认情况下它处理浏览器的语言环境。例如,要使用丹麦语的语言环境,使用下面的脚本 <script src="https:&...
2017-03-24
简介JavaScript中的setHours()方法的使用
javascript Date.setHours()方法按照本地时间设置小时在指定的日期。 语法 Date.setHours(hoursValue[, minutesValue[, secondsValu...
2017-03-24
回到顶部