渐进式web应用 (PWA)

PWA(渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。

PWA的特点:

  • Discoverable, 内容可以通过搜索引擎发现。
  • Installable, 可以出现在设备的主屏幕。
  • Linkable, 你可以简单地通过一个URL来分享它。
  • Network independent, 它可以在离线状态或者是在网速很差的情况下运行。
  • Progressive, 它在老版本的浏览器仍旧可以使用,在新版本的浏览器上可以使用全部功能。
  • Re-engageable, 无论何时有新的内容它都可以发送通知。
  • Responsive, 它在任何具有屏幕和浏览器的设备上可以正常使用——包括手机,平板电脑,笔记本,电视,冰箱,等。
  • Safe, 在你和应用之间的连接是安全的,可以阻止第三方访问你的敏感数据。

PWA的优势:

  • 减少应用安装后的加载时间, 多亏了 Service Workers 来进行缓存, 以此来节省带宽和时间。
  • 当应用有可用的更新时,可以仅仅去更新发生改变的那部分内容。与之相反,对于一个原生应用而言,即便是最微小的改动也需要强制用户去再次下载整个应用。
  • 外观和使用感受与原生平台更加融为一体——应用图标被放置在主屏幕上,应用可以全屏运行,等。
  • 凭借系统通知和推送消息与用户保持连接,对用户产生更多的吸引力,并且提高转换效率。

  PWA 所需的关键要素是 service worker 支持。 值得庆幸的是,桌面和移动设备上的所有主流浏览器都支持 service worker。

Service Worker

  •  Service Worker 是浏览器和网络之间的虚拟代理。解决了正确缓存网站资源并在用户设备脱机时使其可用的问题。
  •  出于安全原因,Service Workers只能在HTTPS中执行。
  •  Service Worker独立于浏览器JavaScript主线程,有它自己独立的生命周期。

  注意:Service Workers 大量使用 promise,因为他们通常会等待响应通过,之后他们会以成功或失败的方式响应。

注册

  首先使用该 ServiceWorkerContainer.register() 方法注册服务工作者。如果成功,Service Worker 将被下载到客户端,并尝试安装 / 激活。

  安装完成后,Service Worker会经历以下生命周期:

  1. 下载(download)
  2. 安装(install)
  3. 激活(activate)

  用户首次访问 Service Worker 控制的网站或页面时,Service Worker 会立刻被下载。之后至少每24小时它会被下载一次。它可能被更频繁地下载,不过每24小时一定会被下载一次,以避免不良脚本长时间生效。

  在下载完成后,开始安装Service Worker,在安装阶段,通常需要缓存一些我们预先声明的静态资源,在我们的示例中,通过urlsToCache预先声明。

  在安装完成后,会开始进行激活,浏览器会尝试下载Service Worker脚本文件,下载成功后,会与前一次已缓存的Service Worker脚本文件做对比,如果与前一次的Service Worker脚本文件不同,证明Service Worker已经更新,会触发activate事件。完成激活。

install

  在安装完成后,尝试缓存一些静态资源:

  self.addEventListener(‘install‘, function(event) {
    self.skipWaiting();
    event.waitUntil(
      caches.open(CACHE_NAME)
      .then(function(cache) {
        return cache.addAll(urlsToCache);
      })
    );
  });

  首先,self.skipWaiting()执行,告知浏览器直接跳过等待阶段,淘汰过期的Service Worker脚本,直接开始尝试激活新的Service Worker。

  然后使用caches.open打开一个Cache,打开后,通过cache.addAll尝试缓存我们预先声明的静态文件。

监听fetch,代理网络请求

  页面的所有网络请求,都会通过Service Worker的fetch事件触发,Service Worker通过caches.match尝试从Cache中查找缓存,缓存如果存在,则直接返回缓存中的response,否则,创建一个真实的网络请求。

  self.addEventListener(‘fetch‘, function(event) {
    event.respondWith(
      caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
    );
  });

  如果我们需要在请求过程中,再向Cache Storage中添加新的缓存,可以通过cache.put方法添加,

activate

  1. 首先有一个白名单,白名单中的Cache是不被淘汰的。
  1. 之后通过caches.keys()拿到所有的Cache Storage,把不在白名单中的Cache淘汰。
  1. 淘汰使用caches.delete()方法。它接收cacheName作为参数,删除该cacheName所有缓存。
  self.addEventListener(‘activate‘, function(event) {
    var cacheWhitelist = [‘counterxing‘];
?
    event.waitUntil(
      caches.keys().then(function(cacheNames) {
        return Promise.all(
          cacheNames.map(function(cacheName) {
            if (cacheWhitelist.indexOf(cacheName) === -1) {
              return caches.delete(cacheName);
            }
          })
        );
      })
    );
  });

参考博客:Service Worker学习与实践(一)——离线缓存 https://juejin.im/post/5ba0fe356fb9a05d2c43a25c

原文地址:https://www.cnblogs.com/yaokai729/p/11478423.html

时间: 2024-11-06 03:52:16

渐进式web应用 (PWA)的相关文章

渐进式Web应用(PWA)入门教程(下)

上篇文章我们对渐进式Web应用(PWA)做了一些基本的介绍. 渐进式Web应用(PWA)入门教程(上) 在这一节中,我们将介绍PWA的原理是什么,它是如何开始工作的. 第一步:使用HTTPS 渐进式Web应用程序需要使用HTTPS连接.虽然使用HTTPS会让您服务器的开销变多,但使用HTTPS可以让您的网站变得更安全,HTTPS网站在Google上的排名也会更靠前. 由于Chrome浏览器会默认将localhost以及127.x.x.x地址视为测试地址,所以在本示例中您并不需要开启HTTPS.另

渐进式Web应用(PWA)

什么是渐进式Web应用? 渐进式Web应用是一种全新的Web技术,让Web应用和原生APP的体验相近或一致. 渐进式Web应用它可以横跨Web技术及Native APP开发的解决方案,对于开发者的优势如下: 你只需要关心W3C的Web标准,不用关心各种Native APP的代码. 用户可以在安装应用之前先试用. 在渐进式Web应用中,你不需要使用各种应用商店来分发应用,也不用关心应用发布时奇怪的审核标准以及应用内购的平台抽成.另外,应用程序更新是自动进行的,无需用户交互,所以整体的使用体验对于用

PWA 渐进式Web应用程序 - 解释

想象一下,如果一个网站上所有的功能都能够作为一个移动应用程序为用户所用——任何设备上都可以使用.可接收所有的通知.离线模式可用,为了实现这个愿景,2015年,谷歌创造了渐进式Web应用程序(PWA).什么是PWA?使用PWA对企业有哪些好处? 什么是PWA? PWA是指可以在任何浏览器上执行的支持互联网的应用程序,它是由服务器端脚本(PHP和ASP)和客户端脚本(JavaScript和HTML)组成的. PWA具有成本效益,可以使公司轻松管理各种任务.此外,web应用程序安全性更高,易于定制,可

使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍

来自译者 markzhai:大家也知道最近 Web 越来越火了,如果你还以为 Web 就是 jQuery.Ajax.CSS 什么的,那你就 out 了.给大家几个链接看一看吧: https://shop.polymer-project.org/ https://housing.com/ https://www.flipkart.com/ https://react-hn.appspot.com/ https://mobile.twitter.com/ 部分可能需要自备梯子,另外建议在 Chrom

Progressive Web App(PWA)介绍

Progressive Web App(PWA)背景介绍 很多人似乎都认为Web,应用永远不会与本机竞争,移动应用程序的可靠性速度和用户参与,很难建立一个他们的商业案例. 你知道吗?你知道他们曾经是对的,但有两件事情发生了变化. 首先,事实证明,大多数人在购买手机时购买了大部分应用程序,或者不久之后大多数人安装了一些常见应用程序并只用了一天,这使得开发人员难以参与竞争,但人们仍然继续使用网络和 一些新技术,让你可以从中提供客户所需的关键功能.我们称它为渐进式网络应用程序(Progressive

[译]介绍一下渐进式 Web App(离线) - Part 1

Web开发多年来有了显著的发展.它允许开发人员部署网站或Web应用程序并在数分钟内为全球数百万人服务.只需一个浏览器,用户可以输入URL就可以访问Web应用程序了.随着 Progressive Web Apps的到来,开发人员可以使用现代Web技术向用户提供很好体验的应用程序.在这篇文章中,你会学习到如何构建一个离线的渐进式 web 应用程序(Progressive Web Apps),下面就叫 PWA 啦. 首先介绍一下什么是 PWA 虽然很多文章已经说过了,已经理解的童鞋请跳过这个步骤.PW

客户端(浏览器端)数据存储技术概览

客户端(浏览器端)存储数据有诸多益处,最主要的一点是能快速访问(网页)数据.目前常见的浏览器端数据存储方法有:Cookies,Local Storage,Session Storage,IndexedDB. Cookies Cookies 是一种在文档内存储字符串数据最典型的方式.一般而言,cookies 会由服务端发送给客户端,客户端存储下来,然后在随后让请求中再发回给服务端.这可以用于诸如管理用户会话,追踪用户信息等事情. 此外,客户端也用使用 cookies 存储数据.因而,cookies

2018年即将到来,大牛们已经开始关注的那些新的语言、框架和工具

软件开发行业继续向前迈进. 在2017年,我们看到了新版本的流行语言,框架和工具,这给了我们更多的力量,并且改变着我们的工作方式. 跟上一切潮流很难,因此在每年年底,让我们来谈一谈未来的十二个月什么才可能是最重要最值得学习的. 首先,我们先来谈些D(大)S(势)S(所)Q(趋) Progressive Web Apps(渐进式Web应用 PWA) 也许你还不知道,2016年一种叫做PWA的概念已经悄然兴起,现在我们就来深♂入了解一下它的内♂涵. 在生活中你有没有在没有网或者几乎没有网的情况下打开

FCC 成都社区·前端周刊 第 7 期

01. ES2016, 2017, 2018 中的新特性 文章介绍了 18 个 ECMAScript 2016,2017 和 2018 中新增加的特性,这些特性已被加入到 TC39 提案中.包括Array.prototype.includes.Object.values().Object.entries().String padding.指数运算符.对象的rest属性和Promise.prototype.finally() 等. 详情:https://medium.freecodecamp.or