首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >你的第一个渐进式网站应用(3)

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

作者头像
RP道貌不岸然
修改于 2017-11-30 14:43:53
修改于 2017-11-30 14:43:53
6750
举报
文章被收录于专栏:ThinksThinks

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按钮的头部
  • 天气预报卡片容器
  • 一个天气预报卡片模版
  • 一个添加新城市的对话框
  • 一个加载指示器

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

本文系外文翻译,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系外文翻译,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
你的第一个渐进式网站应用(2)
2. 开始设置 下载代码 点击下面的链接,下载这个代码实验室的完整代码: DOWNLOAD SOURCE CODE 解压缩下载的zip文件。会解压一个根文件夹 (your-first-pwapp-ma
RP道貌不岸然
2017/11/29
4880
你的第一个渐进式网站应用(2)
你的第一个渐进式网站应用(4)
4. 实现你的App Shell 任何项目都可以以多种方式开始,我们通常建议使用Web Starter Kit。但是,在这个案例中,为了让我们的项目尽可能简单,并专注于渐进式网站应用,我们为您提供您需
RP道貌不岸然
2017/12/02
9770
你的第一个渐进式网站应用(4)
你的第一个渐进式网站应用(5)
5. 从一个快速的首次加载开始 渐进式网站应用会很快启动并马上可用。在目前的状态中(step-04),我们的天气app启动很快,但是不可用。因为还木有数据。 我们要使用一个AJAX请求去获取数据,但是
RP道貌不岸然
2017/12/02
7040
你的第一个渐进式网站应用(1)
RP道貌不岸然
2017/11/29
9110
渐进式技术改良,百度豪赌智能搜索
今年以来百度产品动作频频,成熟的网页搜索在先后推出极简首页、知识图谱等功能之后,昨天又进行大版本升级:上线极速智能搜索,在用户一边输入时一边呈现结果并可进行个性化的搜索预测。 百度此前的极简首页或许只是为了此次改版提供铺垫,整个搜索现在变化非常大,这让我看到百度离“情景感知计算”又近了一步,其不断豪赌新技术,试图通过渐进式技术改良谋求未来。 解决“不够快”的问题 一边输入一边呈现搜索结果,从理论上来说搜索关键词越长,结果集越小,不断逼近用户目标。然而如果键入一个字就能找到结果,自然可以节省时间。 这样的效
罗超频道
2018/04/25
7330
开发一个渐进式Web应用程序(PWA)前都需要了解什么?
自苹果推出了iPhone应用商店以来,App成为了我们生活中不可或缺的一部分,而对于实体业务也是如此,现在各行业都在推出自己的App,但有没有人想过这样一种场景,如果自己的潜在客户还没有安装你的App亦或是即便安装但因为客户的手机存储空间紧张而卸载掉了你的App?那有没有使App更轻量,更易安装的技术实现呢?答案是“有的”。
葡萄城控件
2020/09/14
1.9K0
开发一个渐进式Web应用程序(PWA)前都需要了解什么?
渐进式Web应用(PWA)入门教程(上)
最近关于渐进式Web应用有好多讨论,有一些人还在质疑渐进式Web应用是否就是移动端未来。 但在这篇文章中我并不会将渐进式APP和原生的APP进行比较,但有一点是可以肯定的,这两种APP的目标都是使用户体验变得更好。 移动端Web应用有很多优秀的概念让人应接不暇,但好在编写一个渐进式Web应用不是一个很困难的事情。在这篇文章里将向你介绍如何把一个普通的网站转换成渐进式Web应用。你可以按照这篇文章一步一步地做,做完之后你的网站将可以实现离线访问,并且可以在桌面上创建该网站的图标。那么下面即将开始入门教程。 什
葡萄城控件
2018/05/28
1K0
PWA渐进式增强WEB应用
PWA是Progressive Web App的英文缩写,是渐进式增强WEB应用, 是Google新开发的web技术。目的就是在移动端利用提供的标准化框架,在网页应用中实现和Native app原生应用相近的用户体验的渐进式网页应用。它的安全,性能,用户体验的确明显领先于其他互联网载体,各大前端厂商争先恐后进行涉足,布局。
ytkah
2020/05/18
1.4K0
PWA渐进式增强WEB应用
渐进式Web应用(PWA)入门教程(下)
渐进式Web应用程序需要使用HTTPS连接。虽然使用HTTPS会让您服务器的开销变多,但使用HTTPS可以让您的网站变得更安全,HTTPS网站在Google上的排名也会更靠前。
葡萄城控件
2018/07/31
8680
PWA 渐进式Web应用程序
PWA是Progressive Web App的简称,是谷歌提出的新型Web技术,并由W3C及谷歌来推广这项技术,其主要目的是为了提升用户对网站原生使用体验,同时又能节省对网站的开启速度。
Meng小羽
2019/12/24
1.2K0
A/B测试: 如何使用Argo Rollouts 进行渐进式交付
传统上,软件和应用程序如果升级出现任何问题,工程团队无能为力,因为应用程序发布后他们几乎无法控制该应用程序。然而,随着渐进式交付策略的出现,团队可以更好地控制他们的发布。这使得他们可以更轻松地快速回滚到以前的版本,以防出现问题。
DevOps云学堂
2023/08/22
4570
A/B测试: 如何使用Argo Rollouts 进行渐进式交付
渐进式Web应用程序的深入概述
如果您是Web开发人员,您可能已经了解渐进式Web应用程序(PWA)或已经实现了自己的应用程序。 如果您不熟悉,本文将深入概述渐进式Web应用程序的实现原理,以及它们在现代Web开发中的重要程度。
葡萄城控件
2018/09/14
1.2K0
PWA技术及其用户体验设计
实验室最近多了一个实验产品MAX:群控手机的项目。主要包括:后端服务、web前端客户端、安卓app客户端。涉及到的编程语言:Java、Nodejs。技术上主要涉及安卓的MediaProjection API、配合websocket来实现。
mixlab
2020/04/10
1K0
PWA技术及其用户体验设计
web渐进式应用PWA
渐进式 Web 应用首先是一种应用,它根据设备的支持情况来提供更多功能,提供离线能力,推送通知,甚至原生应用的外观和速度,以及对资源进行本地缓存。
chuchur
2022/10/25
1.4K0
web渐进式应用PWA
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》054-案例:天气预报应用
随着科技的快速发展和移动互联网的普及,天气预报应用成为了日常生活中不可或缺的一部分。无论是计划出行、安排户外活动,还是关注气候变化,准确的天气信息都能帮助我们做出更明智的决策。在这个背景下,我们将通过一个具体的案例,深入探讨如何开发一款功能丰富、用户友好的天气预报应用。
愚公搬代码
2025/06/02
950
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》054-案例:天气预报应用
ASP.NET Core Blazor Webassembly 之 渐进式应用(PWA)
Blazor支持渐进式应用开发也就是PWA。使用PWA模式可以使得web应用有原生应用般的体验。
MJ.Zhou
2020/06/29
1.4K0
ASP.NET Core Blazor Webassembly 之 渐进式应用(PWA)
动手开发一个名为“微天气”的微信小程序(上)
在一套软件系统中,微信小程序通常是作为前端来使用的,一般还需要有后端的系统提供支持,这就需要开发者(或运营者)购买云服务器(或有自己的独立主机),将后端系统部署其上。对于很多初学者来说,这些条件不容易达到。但我们可以选择使用在线免费API接口,开发者只需要编写好前端系统(微信小程序),在前端系统中直接调用这些免费API即可获得相应的数据。
博文视点Broadview
2020/06/11
8250
GitOps 实践之渐进式发布
本文作者:陈钧桐 腾讯云 CODING DevOps 高级解决方案架构师,从事多年技术布道工作,对于云原生时代下企业数字化转型、IT 与 DevOps 建设、价值流体系搭建等有丰富的经验,曾为多家大型企业提供咨询、解决方案以及内训服务。既关注工程师视角的云原生开发建设与最佳实践落地,也关注管理者视角的过程管理与研发效能提升。
腾讯云 CODING
2023/06/07
5780
GitOps 实践之渐进式发布
Web渲染那些事儿
作为开发者,经常需要面对影响整个应用架构的决策。而Web开发者的核心决策之一,就是应用逻辑与渲染工作的实现,应处于架构中的什么位置(译注:客户端 or 服务器?)。现在有很多不同构建网站的方法,因此这些决策变得愈加困难。
Johnny
2019/03/03
2K0
Web渲染那些事儿
Web 现代应用程序架构下的性能优化,渐进式的极致艺术。
本文是 Rendering on the Web: Performance Implications of Application Architecture (Google I/O ’19) 这篇谷歌工程师带来的现代应用架构体系下的优化相关演讲的总结,演讲介绍了以下优化手段:
ssh_晨曦时梦见兮
2022/03/09
9950
Web 现代应用程序架构下的性能优化,渐进式的极致艺术。
推荐阅读
相关推荐
你的第一个渐进式网站应用(2)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档