你的第一个渐进式网站应用(3)

3. 建立你的App Shell

什么是app shell?

应用程序的shell是为渐进式网站应用的用户界面提供所需的最小HTML,CSS和JavaScript能力,并且是确保可靠的良好性能的组件之一。它的第一次加载会非常快,并且立即缓存。 “缓存”意味着shell文件通过网络加载一次,然后保存到本地设备。每当用户打开应用程序时,shell文件都会从本地设备的缓存中加载,从而使得启动速度非常快。

App shell体系结构将核心应用程序基础结构、UI与数据分离开。所有的UI和基础架构都利用service worker在本地进行缓存,以便在后续的加载中渐进式网站应用只需要检索必要的数据,而无需加载所有内容。

service worker是一个在浏览器后台运行的脚本,与网页是分割开的,这个特性的开启无需依赖一个网页或用户的交互。

换句话说,app shell类似于构建native app时发布到应用程序商店的代码包。它是你的应用程序的核心组件,但可能不包含数据。

为什么使用App Shell构建?

使用app shell构建允许你去聚焦在速度上, 给予你的渐进式网站应用类似naitve apps的属性: 即刻加载和日常更新,而完全不需要依赖一个app store。

设计App Shell

第一步分解出核心的组件进行设计。

扪心自问:

  • 什么需要立即在屏幕上显示?
  • 还有其他什么UI组件是我们app必须的?
  • app shell需要什么资源支持?比如图片,JavaScript,样式等等。

我们将创建一个天气应用程序作为我们的第一个渐进式网站应用。关键组件包括:

  • 带有一个title和add/refresh按钮的头部
  • 天气预报卡片容器
  • 一个天气预报卡片模版
  • 一个添加新城市的对话框
  • 一个加载指示器

在设计一个更复杂的应用程序时,内容无需在初始化时候加载,可以稍后请求,然后将其缓存以供将来使用。例如,我们可以在渲染出第一次运行体验并且拥有一些空闲周期之后延迟加载“新城市”对话框。

原文链接:https://codelabs.developers.google.com/codelabs/your-first-pwapp/#2

原文作者:codelabs.developers.google.com

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏令仔很忙

Web前端----Javascript模块化

一提到模块化,也许我们首先想到的是做项目的时候进行模块设计,按照功能划分不同的模块,最后通过模块的选择和组合组成最终的产品;那把模块化的思想放到前端页面,js...

631
来自专栏数据和云

Real-time materialized view,面向开发者的12.2新特性

题记:在12.2之前,如果使用on command刷新物化视图,必须得有个job来定时的刷,那么,在一次job运行之后,下一次job到来之前,如果基表有数据变化...

2804
来自专栏日常分享

JSON 数据格式

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的...

822
来自专栏Android小菜鸡

NativeJS理解和使用

  Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术。   如果说Node.js把js扩展到...

905
来自专栏QQ音乐技术团队的专栏

React v16 新特性实践

我们在对以上新特性经过一段时间的使用过后,通过本文进行一些细节分享和总结。

5468
来自专栏程序员互动联盟

【答疑释惑第三十四讲】Web js 常见用法

疑惑一 一、js中怎么实现hashcode值? 在java中有一种方法,就是可以获取字符串的对应的hashcode值,返回对应的整数值; 这个方法对于一些写在数...

3005
来自专栏编程

Python教学——第七天

如果你前面都跟着文章做了,相信你已经自己在私下也了解了很多知识 如果你之前全都没有跟着做,也没有关系,至少你可以了解一个概念,对将来动手的时候会有一定的帮助 如...

1885
来自专栏前端黑板报

DOM小结

DOM是针对HTML和XML文档的一个API(应用程序编程入口)。DOM描绘了一个层次化的节点树,允许开发人员添加/移除和修改页面某一部分。 注:从上面的引述中...

18310
来自专栏编程微刊

2018年各大互联网前端面试题四(美团)

1202
来自专栏沈唁志

PSR-各个框架遵循的统一编码规范现代PHPer的开发规范

1412

扫码关注云+社区