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

相关文章

来自专栏iOS Developer

Bison详解连连支付集成

1074
来自专栏web前端教室

javascript-购物车(1)

这是之前文章提到过的JS购物车,当时简单的介绍了下它的思路和结构。 然后有同学发信息说,看的不太明白,最好能有代码,, 于是就录了这个视频教程,主要就是介绍它...

1946
来自专栏知晓程序

彻夜通读小程序「插件」文档后,我们帮你划了这几个开发重点

昨日,微信团队发公告称释放了两个新能力,小程序「插件」功能,以及开发者工具新增「代码片段」功能。

964
来自专栏向治洪

Android Topeka介绍

概述 当你已经做Android开发一段时间,并苦于进入瓶颈,这个时候阅读一些优秀App的源码是最好的学习进阶方式,前几天,邀请去参加一个Android大会,我作...

2088
来自专栏Web项目聚集地

SSM框架开发「内容管理系统」

本项目演示地址为java456.com,可以点击文章底部的阅读原文预览,后端使用ssm框架、前端使用主流的layui,利用Maven工具管理Jar包搭建项目,此...

772
来自专栏花叔的专栏

关于“小程序跳转小程序”功能调整

即日起,若用户未点击小程序页面任意位置,则开发者将无法调用 wx.navigateToMiniProgram 接口自动跳转至其他小程序。

421
来自专栏一枝花算不算浪漫

[JetBrains注册] 利用教育邮箱注册JetBrains产品(pycharm、idea等)的方法

45411
来自专栏知晓程序

微信全面调整分享能力:开发者应该注意什么?

1425
来自专栏大前端开发

5个最优秀的微信小程序UI组件库

开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果。自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关...

3124
来自专栏美团技术团队

用Vue.js开发微信小程序:开源框架mpvue解析

前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复...

7308

扫码关注云+社区