2017上海谷歌开发者大会PWA & AMP部分笔记

hellox

2017-12-21

AMP, PWA, 前端

点这里看完整视频（不过只有主会场）：谷歌开发者大会—在线播放—优酷网，视频高清在线观看

Progressive Web Apps | Web | Google Developers：PWA其实是google这几年一直在推的一个东西，国内其实是不太看好的。但是从官方的数据来看，其实PWA在国外的表现还是很漂亮的，对于出海应用来说，是一个很好的选择。而google推这个技术也不是口头说说，在国内这种特殊的环境下，他们跟进各大奇葩浏览器的兼容性，还是能感受到他们的真诚的。
现在servise worker也不是非常新的东西了，兼容性上来以后用的人也非常多。尤其是今年（2017），已经能看到许多相关的中文文档或者博客了。

Accelerated Mobile Pages Project – AMP：相比之下，AMP在国内行走其实更加方便。虽然很不想按google这一套做，但是不得不承认是有很大效益的（明明都没有在生产上实践过你就瞎掰）。

PWA实现

sw代码讲解
// 这个太技术细节了，就不分享了。可以走google的编程小课堂玩一玩Your First Progressive Web App
缓存策略
这个学问其实很大，没仔细看过或者结合相关场景看的话，还真是没办法深入理解。在网上搜了一下，备用——
Service Worker 缓存策略 · Issue #39 · lishengzxc/bblog · GitHub，重点还要看一下它的参考的那些网址。

PWA & AMP ❤️ 中国

PWA

优点

安装包小（pwa < android < ios）
获取用户的成本低（一个原生用户，53个pwa用户）：这个是以housing.com（印度房地产中介网站）为例

门槛

国内推送很尴尬 => 正在寻求解决方案……
浏览器支持问题，例如sw等等技术的兼容 => 国内许多浏览器厂商都支持了sw
支持pwa的浏览器

此处插播UC浏览器的一些进展：

实现了浏览器标准的推送消息等等

so ↓：

国内很多浏览器是基于chromium => 碎片化没有那么严重，不需要太担心兼容问题（不用测试一堆浏览器）
safari 已经在开发sw =>皆大欢喜
2017年12月20日更新：Safari preview 46支持sw，撒花！~ Release Notes for Safari Technology Preview 46 | WebKit

工具（查看兼容）

Browser Bug Searcher | Developer Feedback Program | Google Developers：
可以查找四大浏览器实现sw的bug
MDN 查看兼容表格:Service Worker API - Web API 接口 | MDN

示例：腾讯新闻

缓存网络失败的页面，离线时显示自定义页面（普通情况下，离线时，浏览器会自定义显示内容）
第一次进入先缓存 -> 第二次进入能能够秒展示

AMP

优点

秒开，提高转化
简化网页
异步下载
全球CDN
…

国内生态

分发&CDN（对SEO有好处） : 百度/搜狗/qzone/360搜索
分析：百度统计 /友盟/ga
广告平台：搜狗联盟，google adsense
国内已经有一些平台使用了amp技术，例如腾讯新闻、知乎等等

思考哪些页面更加适合amp

落地页
用户常去的页面
…

与PWA的结合

热门玩法：
搜索落地页（AMP）->进入主站（PWA）

AMP构造电商网站

组成

AMP HTML
AMP JS
AMP cache

特点

分优先级加载
不允许开发者自己玩 js，但是提供很多组件

哪些页面需要AMP

用户历程（应该是指用户转化过程吧），用户的关注点（漏斗状）
例如：电子商务的home页面、商品detail页面
根据现有的功能支持

导航
image & video
动态数据
服务器 筛选和排序
表单验证
付款
输入建议
…

创建动态AMP

动态网页的两大特点：

用户操作 => 页面变化

<amp-bind>：相应用户操作，改变数据。绑定值为foo.bar + baz，显示foo.bar + baz的值
<amp-state>：foo.bar；绑定foo，显示bar

on：监听事件，AMP.setState({baz:’Shanghai’})
例子：amp-bind – AMP

<!-- Store complex nested JSON data in <amp-state> elements. -->
<amp-state id="myAnimals">
  <script type="application/json">
    {
      "dog": {
        "imageUrl": "/img/dog.jpg",
        "style": "greenBackground"
      },
      "cat": {
        "imageUrl": "/img/cat.jpg",
        "style": "redBackground"
      }
    }
  </script>
</amp-state>

<p [text]="'This is a ' + currentAnimal + '.'">This is a dog.</p>

<!-- CSS classes can also be added or removed with [class]. -->
<p class="greenBackground" [class]="myAnimals[currentAnimal].style">
  Each animal has a different background color.
</p>

<!-- Or change an image's src with the [src] binding. -->
<amp-img width="300" height="200" src="/img/dog.jpg"
    [src]="myAnimals[currentAnimal].imageUrl">
</amp-img>

<button on="tap:AMP.setState({currentAnimal: 'cat'})">Set to Cat</button>

服务器

动态获取数据：使用——有点像是模板语言——读取数据，把各个字段值跟各个节点绑定

动态筛选和排序（服务器端）：<amp-list> & <amp-bind>
例子：amp-list – AMP

<amp-list credentials="include"
    src="<%host%>/json/product.json?clientId=CLIENT_ID(myCookieId)">
  <template type="amp-mustache">
    Your personal offer: ${{price}}
  </template>
</amp-list>

模板

模板：AMP Start - Accelarated Mobile Pages Templates
各种组件，以及使用的例子：Learn AMP by Example

PWA & AMP

// 只是提出这个思路，并未深入探讨如何结合使用

一些感想：
第一次去GDD，给我的印象可以说非常不错：

技术内容非常浅，毕竟每个分享都只有30分钟。大部分内容就是把官网介绍了一遍。对于一些本身有一定了解的技术，可能过去收获会比较少，但是一些不了解的技术，还是能给你一些灵感或者入门方向。
每个场次的演讲内容有大量内容重复，个人觉得这个是应该可以避免的。不过在这种洗脑下还是很印象深刻的。
演讲者准备得很用心。每场的演讲者都能够把内容讲清楚，而且表达流畅、逻辑清晰。配备的同传基本能把意思传达到，更甚者能把握演讲者的节奏，把每句话都完整准确地表达出来。（听同传的时候不要太贪心，要么只听同传的，要么只听原声，否则很难捕捉到有效的信息）
组织得很用心。全程基本上是非常有秩序而且高效的。有两场火爆到站不下的分享甚至额外安排了场次，以满足没有听到的与会者。
午餐、下午茶、晚宴，还有礼物基本想要就给，礼物也非常别出心裁，例如android oreo毛绒玩具、DIY 音箱、Android Thing的开发者kit（查了一下，价值人民币1000元左右）、特制电脑包等等……都是免费的，简直良心。
交通有些不便利，离地铁较远；