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

相关文章

来自专栏架构师小秘圈

cdn技术原理

作者:IT世界,来自:www.it.com.cn 1. 前言   Internet的高速发展,给人们的工作和生活带来了极大的便利,对Internet的服务品质和...

4669
来自专栏快乐八哥

Progressive Web Apps入门

PC和Mobile开发技术演进 PC方向,从客户端到富客户端,到现在广泛使用的Web。 移动方向,目前主要还是原生应用和Mobile Web,PWA相关技术是未...

20410
来自专栏技巅

大数据实战技术之开篇-学习实践环境搭建

1156
来自专栏Java架构沉思录

CDN为什么这么快

CDN全称:Content Delivery Network或Content Ddistribute Network,即内容分发网络。

1172
来自专栏开源项目

码云推荐 | 运维脚本工具库 kjyw

快捷运维kjyw,运维脚本工具库,主要功能实现快速安装nginx、mysql、php、redis等,运维经常使用的脚本。 ? 项目简介 ? 快捷运维 kjyw,...

28210
来自专栏编程微刊

推荐一款稳定快速免费的前端开源项目 CDN 加速服务

前面学习到什么是CDN,全称是Content Delivery Network,即内容分发网络。CDN的通俗理解就是网站加速,CPU均衡负载。

871
来自专栏SpringBoot 核心技术

SpringCloud核心技术 | 初识SpringCloud微服务解决方案

最近这几个月文章更新处于停滞状态,因为公司的事情比较多,公司系统一直处于高速的迭代更新阶段, 尽管如此,我这段时间也一直在整理接下来要更新的文章大纲以及知识点...

512
来自专栏Rainbond开源「容器云平台」

基于akka的分布式实时消息系统

1674
来自专栏Rainbond开源「容器云平台」

开源 | Rainbond Release 3.5

1072
来自专栏IT大咖说

一场由React引发的前后端分离架构的思考

摘要 以React技术栈为主分享我们在大规模企业应用建设过程中遇到的问题,对前后端分离架构的思考,前后端分离的技术方案,前后端分离过程中的实践经验,前后端分离带...

7146

扫码关注云+社区