你的第一个渐进式网站应用（1）

1. 简介

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

什么是渐进式网站应用?

一个渐进式网站应用是:

• 渐进式 - 服务于所有用户，无论选择何种浏览器，因为它是以渐进式增强为核心宗旨而构建的。
• 响应式 - 适用于任何形式: 桌面、移动端、平板或者未来的设备。
• 独立于链接 - 使用service workers提升离线活着低质量网络中的工作能力。
• 像App一样 - 像一个app一样, 因为app的shell模型将app的功能从app的内容中分离开。
• 新鲜 - 利用service worker的更新进程使其一直保持最新版本。
• 安全 - 通过HTTPS服务保障偷窥和确保内容不被篡改。
• 可发现 - 利用 W3C manifest 和 service 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应用程序。不相关的概念和代码块被遮挡，并为您提供简单的复制和粘贴。