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

相关文章

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

这一次,卡98%问题终于解决了

今日话题 在新项目中,往往会有一些瓶颈的问题阻碍项目进程,如鲠在喉。而腾讯手游助手项目中,启动卡98%的问题就属于这种问题。幸运的是团队最终解决了此问题,现在回...

6459
来自专栏互联网数据官iCDO

谷歌跟踪代码管理器(GTM) 入门指南 第3部分 - 创建链接追踪代码

主编前言: 很多朋友都听说过Tag Management(监测代码管理),但其强大的功能和实现方式,了解的朋友不多。本系列以Google Tag Manager...

4005
来自专栏知晓程序

想第一时间发布小程序?人人都得这样做 | 小程序接入指南

1534
来自专栏企鹅号快讯

Java开发的几个注意点

将一些需要变动的配置写在属性文件中 比如,没有把一些需要并发执行时使用的线程数设置成可在属性文件中配置。那么你的程序无论在DEV环境中,还是TEST环境中,都可...

1746
来自专栏君赏技术博客

【已解决】AppStore 如何上传预览视频

1882
来自专栏假装我会写代码

用 Algolia DocSearch 轻松实现文档全站搜索

3433
来自专栏全华班

互联网云快速开发框架

--我的信息 --我的通告 --文件 2、会员 --用户中心 --用户地图 --积分活动平台 --极光推送 3、营销 --营销活动 --活动汇 --现场活动平台...

1471
来自专栏知晓程序

小程序的 AppID 怎么找 / 小程序手势缩放怎么做 / 不费流量的小程序推荐 | 小程序问答 #13

每次,看到那些名字长得让人记不住的小程序,你内心是否都会暗暗吐槽:起名的人究竟是怎么想的。

831
来自专栏Linyb极客之路

12大要点让你的Java开发所向披靡~

比如,没有把一些需要并发执行时使用的线程数设置成可在属性文件中配置。那么你的程序无论在DEV环境中,还是TEST环境中,都可以顺畅无阻地运行,但是一旦部署在PR...

732
来自专栏架构师之路

微信为啥这么省流量?

前言:“客户端上传时间戳”的玩法,你玩过么?一起聊聊时间戳的奇技淫巧! 缘起:无线时代,流量敏感。APP在登录后,往往要向服务器同步非常多的数据,很费流量,技术...

3609

扫码关注云+社区