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

1. 简介

渐进式网站应用程序是结合网站和应用程序中最好的体验。它们对于用户来说从浏览器标签中第一次访问,不需要安装是非常有用的。随着用户逐渐建立与应用程序的关系,它变得越来越强大。即使在flasky的网络下,它也可以快速加载,发送相关的推送通知,在主屏幕上显示一个图标,并像顶级应用一下加载以及全屏体验。

什么是渐进式网站应用?

一个渐进式网站应用是:

  • 渐进式 - 服务于所有用户,无论选择何种浏览器,因为它是以渐进式增强为核心宗旨而构建的。
  • 响应式 - 适用于任何形式: 桌面、移动端、平板或者未来的设备。
  • 独立于链接 - 使用service workers提升离线活着低质量网络中的工作能力。
  • 像App一样 - 像一个app一样, 因为app的shell模型将app的功能从app的内容中分离开。
  • 新鲜 - 利用service worker的更新进程使其一直保持最新版本。
  • 安全 - 通过HTTPS服务保障偷窥和确保内容不被篡改。
  • 可发现 - 利用 W3C manifestservice worker registration 范围使其被识别为一个“应用”,允许搜素殷勤找到它。
  • 重新参与 - 通过类似消息推送的特性使重新参与变得简单。
  • 可安装 - 无需应用商店那么麻烦,允许用户用他们最方便查找的方式在主屏幕添加app。
  • 可链接 - 通过URL更简单的分享应用,而不需要复杂的安装。

这个代码实验室将引导您创建自己的渐进式Web应用程序,包括设计注意事项以及实现细节,以确保您的应用程序符合渐进式Web应用程序的上述关键原则。

寻找更多?请查看 2016 Progressive Web App Summit.

你将建立什么

在这个代码实验室中,您将使用Progressive Web App技术构建一个天气网站应用程序。您的应用程序将:利用和演示渐进式网站应用的上述原则。使用实时天气数据。提供类似应用程序的交互,以允许用户添加城市。

  • 利用并展示Progressive Web Apps的上述原则。
  • 使用实时天气数据。
  • 提供类似应用程序的交互,以允许用户添加城市。

你将学到什么

  • 如何利用“app shell”方法去设计和构建一个应用
  • 如何使你的应用离线工作
  • 如何存储数据为之后的离线使用

你应该需要什么

  • 一个最新版本的 Chrome. 提示,它也可以在其他浏览器上较好的工作, 但是我们将使用一些 Chrome DevTools 特性去更好的理解在浏览器级别上发生了什么。
  • Web Server for Chrome, 或者自己是web服务器
  • 代码示例
  • 一个文本编辑器
  • HTML, CSS, JavaScript, 和 Chrome DevTools的基础知识

这个代码实验室是专注于渐进的Web应用程序。不相关的概念和代码块被遮挡,并为您提供简单的复制和粘贴。

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

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

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java技术

这些优秀的 Spring Cloud 开源软件,你知道几个?

参考来源:https://github.com/SpringForAll/、Spring Cloud中文网https://springcloud.cc/

573
来自专栏美团技术团队

前端工程化开发方案app-proto

什么是前端工程化?根据具体的业务特点,将前端的开发流程、技术、工具、经验等规范化、标准化就是前端工程化。它的目的是让前端开发能够“自成体系”,最大程度地提高前端...

4213
来自专栏程序你好

微服务和传统中间件平台

微服务与部署在中间件平台(esb、应用服务器)上的传统服务有何不同?什么是微服务体系结构模式,它解决了什么问题?本文将讨论所有这些重要的主题,并描述如何管理、管...

772
来自专栏FreeBuf

十大跨浏览器测试工具

在多个平台上测试多种浏览器不但是很困难的 – 它几乎不可能的,因为没有那些好的测试工具。今天,我们就为大家提供很多涉及到跨浏览器测试的选择,并且告诉你那些“顶级...

1786
来自专栏Crossin的编程教室

Python 实战(5):拿来主义

有了列表,有了详细信息,有了搜索,这个电影网站已经有了基本的结构。现在要做的是:获取更多的内容。 我们没有必要也不可能自己去生产数量庞大的电影信息,互联网上的资...

2616
来自专栏java一日一条

我的编码习惯 - 配置规范

工作中少不了要制定各种各样的配置文件,这里和大家分享一下工作中我是如何制定配置文件的,这是个人习惯,结合强大的spring,效果很不错。

822
来自专栏互联网杂技

Nodejs学习路线图

Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎。chrome浏览器就基于V8,同时打开20-30个网页都很流畅。Nodejs标准的w...

5018
来自专栏在线教育技术团队专栏

对于服务端bug处理的一些建议

清楚bug所在业务的逻辑,了解正常的流程应该是什么,业务的入口在哪里,重现的步骤

1032
来自专栏云计算D1net

确保混合云备份与灾难恢复的数据一致性

为了使备份和灾难恢复成功工作,数据必须同步。这些技巧有助于IT团队确保数据一致性。 ? 理想的世界中,如果混合云平台的一部分出现问题,处理只会减慢,然后自动恢复...

2669
来自专栏程序你好

如何为你的移动应用建立RESTful API

622

扫码关注云+社区