专栏首页Thinks你的第一个渐进式网站应用(3)

你的第一个渐进式网站应用(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 条评论
登录 后参与评论

相关文章

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

    渐进式网站应用程序是结合网站和应用程序中最好的体验。它们对于用户来说从浏览器标签中第一次访问,不需要安装是非常有用的。随着用户逐渐建立与应用程序的关系,它变得越...

    RP道貌不岸然
  • 你的第一个渐进式网站应用(5)

    渐进式网站应用会很快启动并马上可用。在目前的状态中(step-04),我们的天气app启动很快,但是不可用。因为还木有数据。 我们要使用一个AJAX请求去获取数...

    RP道貌不岸然
  • HTML5设计原理(下)

    平稳退化 下一条原理大家应该都很熟悉了,那就是平稳退化。毕竟,我们已经遵守这条规则好多年了。渐进增强的另一面就是平稳退化。 有关HTML5遵循这条原理的例子,就...

    RP道貌不岸然
  • Java反射-高级开发必须懂的

    理解反射对学习Java框架有很大的帮助,如Spring框架的核心就是使用Java反射实现的,而且对做一些Java底层的操作会很有帮助。

    良月柒
  • 反射 — Java 高级开发必须懂的

    理解反射对学习Java框架有很大的帮助,如Spring框架的核心就是使用Java反射实现的,而且对做一些Java底层的操作会很有帮助。

    java思维导图
  • 那些年我们开发的应用程序

    这里所要谈到的应用程序主要是由Java,Python等语言,并且在Windows环境下开发和实现。

    Hongten
  • Java中的类加载器

    Class loaders属于JRE的一部分,负责在运行时将Java类动态加载到JVM。得益于class loaders,JVM在无需知晓底层文件或文件系统时就...

    码代码的陈同学
  • 猿蜕变15——一文搞懂Spring AOP的正确姿势

    看过之前的蜕变系列文章,相信你对mybatis有了应用方面的认识。但是这些要完成你的蜕变还不够,考虑到大家的基础知识,我们继续回到spring的话题上来,我们一...

    山旮旯的胖子
  • 【TestNG快速上手】一、接口自动化

    TestNG是基于java语言并集成JUnit和NUnit的测试框架,具有如下特性:

    软测小生
  • 【TestNG快速上手】一、接口自动化

    TestNG是基于java语言并集成JUnit和NUnit的测试框架,具有如下特性:

    用户5521279

扫码关注云+社区

领取腾讯云代金券