在 Twitter 上看到 Addy Osmani 发的视频被狂转, 最先注重
https://twitter.com/addyosmani/status/734753297274306561
https://speakerdeck.com/addyosmani/progressive-web-apps-across-all-frameworks
之前险些对这个词语没有印象, 看到是在 IO 的演讲还以为是新技术
在 Youtube 上找一下, 此次好多个视频是关于 Progressive Web Apps 的
视频的内容主如果讲网站优化, 分别用 React, Angular, Ember 做例子
惋惜没有 Vue, 也许要等小右补… 计划应当没有题目
从视频看, 优化的效果异常明显, 原本好几秒的运用能优化到一秒内.. 很夸大
所以细致相识了一下怎样回事, 如今也许相识
视频里给的优化计划也许分红几个步骤(细节还要看视频确认):
增加
manifest.json文件, 天生 Android 主屏翻开的网页加载页面编写 Service Worker 剧本处置惩罚缓存, 更快读取缓存
服务端衬着, 用 App Shell 带来效果, 然后动态加载
启动历程 JavaScript 代码的机能优化
虽然是新技术, 但文档能够追溯到一年前以至一年半之前
Service Worker 在 2014 岁尾就在 HTML5 Rocks 上引见了manifest.json 的辨认功用在 Chrome 39 已到场
App Shell 仅仅是模板衬着略过动态内容的一个优化
前两个 API 团体上是 Chrome 支撑, 所以兼容性题目较大
那末 Google 既然在大会上推, 申明计划已比较成熟值得深切了
Progressive Web Apps(PWA)
简称 PWA 吧, 名字是从 Android Chrome 的”增加到主屏幕”最先的
Progressive Web Apps: Escaping Tabs Without Losing Our Soul https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
2015 年六月份的文章, 第一次有了这个提法, 针对这类运用
网页运用在如许的场景下和挪动运用很相似了, 能够从主屏翻开
而且, 能疾速地加载, 能够跑背景历程, 加密的衔接, 离线运用等等
Instant Loading Web Apps With An Application Shell Architecture https://medium.com/google-developers/instant-loading-web-apps-with-an-application-shell-architecture-7c0c2f10c73
到了岁尾的时刻 Addy Osmani 发了文章, 大致上已是前面演讲的内容了
首先是衬着 App Shell 也就是页面的框架, 给用户更好的加载体验
而且能够经由过程 Service Worker 来做 App Shell 衬着, 去掉收集请求的时候
然后再动态地请求更多内容, 添补数据. 团体上看的加载速率会变快
2015 岁尾另有个 Google Developer Summit, 我之前都没注重到
听说大会上 PWA 已名声很大了, Medium 上特地引见了一下
Chrome Developer Summit Recap https://medium.com/@davideast/chrome-developer-summit-recap-1137b022b2dc
Getting started with Progressive Web Apps https://addyosmani.com/blog/getting-started-with-progressive-web-apps/
演讲视频的话, YouTube 上几个大会录的演讲都挺雄厚的:
https://www.youtube.com/results?search_query=progressive+web+apps
如今已有做了不少的 PWA 的 Demo 了, 比方第一个 washingtonpost
Washington Post https://washingtonpost.com/pwa
List of Progressive Web Apps Build status https://github.com/operasoftware/pwa-list
Progressive Web Apps collection https://github.com/ljinkai/pwa-collection
Hacker news demo https://progressive-web-application.herokuapp.com/
Web App Manifest
manifest.json 前面说了, 加进来挺久了, 主如果为了增加 Splash Screen
依据 manifest.json 能够自动天生一个网页(主屏幕按钮翻开)的启动界面
如许看上去就很像一个 Native App 了, 包括图片, 笔墨, 背景
Splashscreen https://developers.google.com/web/updates/2015/10/splashscreen
Add to Homescreen https://developer.chrome.com/multidevice/android/installtohomescreen
我尝试的时刻主如果图片碰到了题目, 128dp 对应最小请求 192px
我当时图片太小了效果很久没显示出来, 到文档上才发明
细致的 manifest.json 内容能够在下面一些界面找到
The W3C App Manifest specification http://html5doctor.com/web-manifest-specification/
Web app manifest https://developer.mozilla.org/en-US/docs/Web/Manifest
Web App Manifest, Living Document http://manifest.sysapps.org/
Manifest Generator http://brucelawson.github.io/manifest/
Web Manifest Validator https://manifest-validator.appspot.com/
Service Worker
Service Worker 能够简朴明白成跑在收集请求的拦截器
或许当作是 Nginx, 它能够监听页面的请求, 推断返回什么内容
它能够经由过程 Cache 处置惩罚当地的缓存, 也能够用 fetch 抓线上的资本
别的演讲视频另有引见处置惩罚音讯推送功用, 相似离线收发音讯, 还没细看.
关于 API 运用须要深切看文档, 已有很细致的引见了:
[译]我的第一个 Service Worker http://www.w3ctech.com/topic/1593
Introduction to Service Worker http://www.html5rocks.com/en/tutorials/service-worker/introduction/
The offline cookbook https://jakearchibald.com/2014/offline-cookbook/
Google 供应了一些类库, 能完成 Express.js 作风的简化写法:
sw-precache https://github.com/GoogleChrome/sw-precache/
sw-toolbox https://github.com/GoogleChrome/sw-toolbox
详细的浏览器兼容性能够看:
is service worker ready? https://jakearchibald.github.io/isserviceworkerready/
can I use http://caniuse.com/#feat=serviceworkers
关于调试, Google Chrome 实验版本已更新了 Application Tab
个中 Service Worker 被放到了显眼的位置, 不过, 功用多了照样挺庞杂的
别的下面这些链接会有协助:
Service Worker Debugging https://www.chromium.org/blink/serviceworker/service-worker-faq
chrome://inspect/#service-workers
chrome://serviceworker-internals
其他
别的相识和尝试 Demo 的时刻我也想到一些跟本身项目比较相干的内容
React Native 对照
很 RN 一样这套计划能让网页运用在效果上更靠近原生运用
PWA 主如果处置惩罚运用加载部份, 让运用能离线翻开, 启动历程跟 App 一样变快
因而本来寄托在 RN 的功用已能做到了, 离线, App 启动界面
我正在斟酌把我之前某个 Demo 重写, 看下能有多像 App 的体验
React 相干的尝试
夙昔简聊优化运用启动用过当地存储全部 Store 数据的方法
一般页面 App Shell 不错了, 而 React 应当能做全部页面放 Service Worker
或许说, Store 放进 Service Worker 里, Virtual DOM 也放进去
那末网页主线程实在只要 DOM 操纵部份的代码, 能够启动速率能提拔异常大
而且 React 已有把 DOM Diff 放进 Worker 的尝试, 还能够延伸下
全部如许想, 对 React 运用的团体架构转变将会挺大的
而 Angular, Vue 之类的框架应当也会做相似的架构调解
Service Worker 代码打包题目
文档里的 Demo 对应的 sw.js 代码都是的直接用链接加载的
我们搭配 CDN 运用当有打包以及 revision 轻易的斟酌
这就请求打包东西要对 service worker 的语法做优越的支撑
Webpack 有看到相干的 PR 提交对应的功用, 其他东西不相识:
https://github.com/webpack/worker-loader/pull/14
项目代码援用 sw.js 的写法:
navigator.serviceWorker.register('/sw.js')sw.js 内部再引入其他代码的写法:
importScripts('serviceworker-cache-polyfill.js');能够的话还须要把 CommonJS ES6 模块打包进去, 会挺庞杂的
以及部分更新, 热替代之类的开辟环境的打包计划革新等等
HTTPS
有点不测, 好像之前 iOS 有做过强迫 HTTPS? 我第一次碰到
Service Worker 运转请求网站是 HTTPS 或许 localhost
如许的话当地开辟, Android 上做 remote debugging 会有些不方便
我找的方法是直接在当地 Nginx 设置不安全的证书来轻易开辟的:
https://serversforhackers.com/video/self-signed-ssl-certificates-for-development
比较直接的方法当然是找个有域名的服务器然后用 HTTPS 开辟
fraserxu教了我一招, 转头尝尝, 能够用 https://ngrok.com/
把当地的端口监听转化成一个在线的 HTTPS 地点…
小结
斟酌缓存处置惩罚上带来的速率提拔, 我对 PWA 整套计划很看好
而且之前的 HTML5 运用缓存来讲, PWA 的自由度和体验都革新了许多
所以会逐步最先斟酌实际往这方面做迁徙的思绪:
兼容性: 现在重要 Safari 不支撑, 而 Chrome 方面已比较成熟, 国产浏览器就…
东西链: 调试东西已不错, 打包和部分更新还要守候技术支撑
缓存计划: API 和语法糖都有了, 虽然代码比较烦琐然则抄代码能够比较快
动态数据计划: 动态的数据怎样抓取和推送, 还不大相识, 不过 Google 有演示过一些
做到这些基本上已能够对页面的加载历程做不小的优化了
守候出更多的 Demo 以及大网站宣布实验的数据怎样…
将来的更多代码被放进 Service Worker 以后, 带来的转变会更大一些
末了贴一张图片敬拜一下前端的庞杂度:
