文档章节

PWA初探

sunshinewyf
 sunshinewyf
发布于 2017/04/26 18:28
字数 966
阅读 21
收藏 1
点赞 0
评论 0

什么是PWA

PWA是Progressive Web App的简称,主要有下面几个特点:

  • 渐进式 - 适用于选用任何浏览器的所有用户,因为它是以渐进式增强作为核心宗旨来开发的。
  • 适合任何机型:桌面设备、移动设备、平板电脑或任何未来设备。
  • 连接无关性 - 能够借助于服务工作线程在离线或低质量网络状况下工作。
  • 类似应用 - 由于是在 App Shell 模型基础上开发,因此具有应用风格的交互和导航,给用户以应用般的熟悉感。
  • 持续更新 - 在服务工作线程更新进程的作用下时刻保持最新状态。
  • 安全 - 通过 HTTPS 提供,以防止窥探和确保内容不被篡改。
  • 可发现 - W3C 清单和服务工作线程注册作用域能够让搜索引擎找到它们,从而将其识别为“应用”。
  • 可再互动 - 通过推送通知之类的功能简化了再互动。
  • 可安装 - 用户可免去使用应用商店的麻烦,直接将对其最有用的应用“保留”在主屏幕上。
  • 可链接 - 可通过网址轻松分享,无需复杂的安装。 看上面这么多特性,感觉很高大上,其实真正深入进去,还是依托于前端最基础的html,css,js这些技术,还有manifest以及Service Worker。

PWA在中国的现状

  • 国内较重视 iOS,而 iOS 目前还不支持 PWA。
  • 国内的 Android 实为「安卓」,不自带 Chrome 是一,可能还会有其他兼容问题。
  • 国内厂商可能并不会像三星那样对推动自家浏览器支持 PWA 那么感兴趣。
  • 依赖 GCM 推送的通知不可用,Web Push Protocol 还没有国内的推送服务实现。
  • 国内 webview 环境较为复杂(比如微信),黑科技比较多。

下面是一张service Worker在各个浏览器中兼容的图片:

template

从上图可以看出,Chrome和Firefox,Opera都已经支持Service Worker,Safari2015年也提过会在5年计划中提供支持

PWA中使用的技术

Web App Manifest

web App Manifest是指通过一个清单文件像浏览器暴露web应用的元数据,其中包括名字,要缓存的icons信息以及一些页面的主题颜色等。 下面附上一个例子:


{
  "name": "pp android",
  "short_name": "pp",
  "icons":[{
     "src":"public/images/1.jpg",
     "type":"image/jpg"
  }],
  "start_url": "/index.html",
  "description": "the pp android of pwa version",
  "display": "standalone",
  "background_color": "#FFF",
  "theme_color": "#2F3BA2",
  "lang":"en"
}

这里解释一下比较生疏的字段含义:

  • scope:定义了 web 应用的浏览作用域.
  • start_url:定义了一个 PWA 的入口页面。
  • orientation:屏幕旋转
  • theme_color/background_color:主题色与背景色

manifest还有一些其他的字段,具体信息可移步这里

Service Worker

Service Workers 是谷歌 chrome 团队提出并大力推广的一项 web 技术,可以充当应用通服务器之间的代理服务器,可以用于拦截请求

Service Workers有几点需要注意的地方:

  • Service Workers 基于 Https,这是硬性条件
  • 每个 Service Worker 都有自己的作用域,它只会处理自己作用域下的请求,而 Service Worker 的存放位置就是它的最大作用域
  • Service WorkderWeb Worker 的一种,它不能够直接操作 DOM

Service Worker有一个生命周期,如下图所示:

template

关于Service Worker的一些api和用法,可以异步这里这里

下面收录一些关于PWA的文章

© 著作权归作者所有

共有 人打赏支持
sunshinewyf
粉丝 15
博文 97
码字总数 64205
作品 0
武汉
程序员
pwa+webpack,初探与踩坑

0.前言 我们都知道pwa是一个新技术.,依靠缓存,离线了还能正常跑,而且秒开。我把以前原生写的小游戏迁移到react,再迁移到webpack+react,最后再升级到pwa。具体介绍不多说,我们开始撸吧。...

lhyt
05/21
0
0
ELSE 技术周刊(2017.12.11期)

业界动态 Angular 5.1 & More Now Available Angular发布5.1版本,同时发布了Angular CLI 1.6版本以及首个稳定版本的Angular Material。CLI支持了Service Worker,以及带来对AppShell更好的支...

风清洋ELSE
2017/12/16
0
0
iOS 终于支持了 PWA,一起来认识一下这个强化版「小程序」 | 科普

iOS 终于支持了 PWA,一起来认识一下这个强化版「小程序」 | 科普 发布于 2018-04-13 文章被以下专栏收录

少数派
07/06
0
0
前端每周清单半年盘点之 PWA 篇

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公...

王下邀月熊
2017/08/29
0
0
是的,Safari 支持 Service Worker 了

12月 20日,Apple 发布的 Safari 46 技术预览版里,Mac 端的 Safari 将默认打开 Service Worker, 是的,Safari 支持 Service Worker 了,PWA 时代不远了。 其实回顾一下, 2017 年 7 月 14...

2017/12/21
0
0
腾讯Web前端大会 企鹅电竞PWA实战(MR_LP)

1.前言 在听了很多内容之后,接下来是一个非常实在的干货分享。 来自腾讯的渠宏伟来给我们一起分享一下,腾讯在前端页面中,是如何利用 PWA 技术来提高用户的转化率的。 声明: 本文是由 李鹏...

mr_lp
2017/06/27
0
0
不可不读,渐进式Web应用程序经典之作!

  【IT168 评论】据国际电信联盟的预估,2015年底全球上网人口到达32亿,也就是说全球将近一半的人口都在上网。 32亿人口是什么样的概念?大约32000个足球场才装得下这么多人!除了人口数量巨...

it168网站
2017/11/30
0
0
Progressive web APPs 谷歌I/O大会第一日

Progressive web application这一次在谷歌I/O大会也是非常重要的一个环节。本文就谷歌I/O大会的keynote--Progressive Web Apps: Great Experiences Everywhere (Google I/O '17)(观看需要翻墙...

neal
2017/05/18
0
0
Chrome Dev Summit 2017参会笔记

作者 | 高磊 编辑 | 尾尾 为期两天的 Chrome Dev Summit 2017 于 10月23日~24日在美国旧金山举办。由于我们近期和Google的合作较多,对Google的动作也比较关注,所以受邀参加了这次的Chrome ...

BrilliantOpenWeb
2017/10/27
0
0
3分钟告诉你什么是渐进式Web应用程序!

  【IT168 评论】随着移动设备使用的大幅增长,建立一款适合移动设备的商业网站至关重要。根据Statista最新的一项研究显示,截止到2019年,手机互联网用户渗透率将达到63.4%。显然,如何在...

it168网站
2017/11/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java8新特性之接口

在JDK8以前,我们定义接口类中,方法都是抽象的,并且不能存在静态方法。所有的方法命名规则基本上都是 public [返回类型] [方法名](参数params) throws [异常类型] {}。 JDK8为接口的定义带...

developlee的潇洒人生
26分钟前
0
0
aop + annotation 实现统一日志记录

aop + annotation 实现统一日志记录 在开发中,我们可能需要记录异常日志。由于异常比较分散,每个 service 方法都可能发生异常,如果我们都去做处理,会出现很多重复编码,也不好维护。这种...

长安一梦
37分钟前
1
0
将博客搬至CSDN

AHUSKY
48分钟前
1
0
Python web框架Django学习(1)

1.Django简介 (1)Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。Django是一个开放源代码的Web应用框架,由Python写成。 (2...

十年磨一剑3344
今天
0
0
Databook-数据之书

Databook-数据之书 用于数据分析的Jupyter Notebooks。 不需购买服务器,快速开始自己的数据分析过程。 源码:https://github.com/openthings/databook 作者:openthings,https://github.co...

openthings
今天
5
0
Python PIPEs

https://www.python-course.eu/pipes.php https://www.tutorialspoint.com/python/os_pipe.htm

zungyiu
今天
1
0
gRPC学习笔记

gRPC编程流程 1. proto文件定义 proto文件用于定义需要通过gRPC生成的接口,可以理解为接口定义文档 2. 通过构建工具生成服务基类代码-Maven或Gradle 3. 服务端开发 服务端实现类须实现通过构...

OSC_fly
今天
0
0
Docker Mac (三) Dockerfile 及命令

Dockerfile 最近学习docker的时候,遇到一件怪事,关于docker镜像可能会被破坏,还不知道它会有此措施 所以需要了解构建Dockerfile的正确方法 Dockerfile是由一系列命令和参数构成的脚本,这些命...

___大侠
今天
0
0
Android Studio+NDK+Cmake 移植FFmpeg-4.0.2命令行工具

一、编译 参考大神的帖子,亲测一次编译成功:https://blog.csdn.net/bobcat_kay/article/details/80889398 鉴于以前查文档的经验,这里附上编写例子的时间:2018年7月22日 我用的是ubantu,...

她叫我小渝
今天
0
0
mysql创建数据库

登录MYSQL mysql -u root -p 脚本创建数据库WeChat,并制定默认的字符集是utf8mb4。 CREATE DATABASE Wechat DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_general_ci; 授权 grant all......

niithub
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部