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

相关文章

来自专栏腾讯移动品质中心TMQ的专栏

【腾讯 TMQ】零基础学习 Fiddler 抓包改包

Fiddler 是一款 HTTP 协议调试代理工具,它能够抓取记录本机所有 HTTP(S) 请求,通过设置断点等方法我们可以任意修改进出 Fiddler 的数据...

1.4K0
来自专栏Coco的专栏

清除页面广告?身为前端,自己做一款简易的chrome扩展吧

1965
来自专栏技术小黑屋

人生苦短,让你的Git飞起来吧

git是一款超极优秀的版本控制工具,包括Linus大神的linux项目在内的千千万万的项目在使用。你可以使用Eclipse插件管理,亦可以使用终端工具。

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

Android Metro风格的Launcher开发系列第一篇

前言:从毕业到现在已经三年多了,回忆一下这三年基本上没有写过博客,总是觉得忙,没时间写,也觉得写博客没什么大用。但是看到很多大牛们都在写博客,分享自己的东西,所...

32610
来自专栏Python数据科学

如何进行手机APP的数据爬取?

平时我们的爬虫多是针对网页的,但是随着手机端APP应用数量的增多,相应的爬取需求也就越来越多,因此手机端APP的数据爬取对于一名爬虫工程师来说是一项必备的技能。...

1512
来自专栏编程微刊

利用PS把多张psd格式的图片转换为一张PDF格式

1.3K2
来自专栏魏艾斯博客www.vpsss.net

宝塔 Linux 面板发布 3.6 版本

2354
来自专栏Samego开发资源

自动化运维之ansible

2017
来自专栏jiajia_deng

svn 项目迁移到 git 保留 commit 记录

最近迁移了两个 SVN 项目到 Gitlab 上,唯一的目的就是想把提交记录保存下来,至于谁提交的无所谓,只希望能在看不懂一些代码的时候能追溯回去看看当时为什么...

1003
来自专栏知晓程序

晓实战 | 最实用的微信支付模板消息实战分享(内含源码)

我们会定期邀请优秀的开发者,从实践的角度,亲自分享他们使用知晓云(cloud.minaapp.com)开发的实战经验,如果你也想分享你的小程序实战经验,欢迎加入...

1112

扫码关注云+社区