什么是 PWA :Progressive Web Apps

简介: 谷歌给以 Service Worker API 为核心实现的 web 应用取了个高大上的名字:Progressive Web Apps `(PWA,渐进式增强 WEB 应用)`,并且在其主要产品上进行了深入的实践。那么,符合 PWA 的应用特点是什么?以下为来自谷歌工程师的解答。

什么是 PWA :Progressive Web Apps

谷歌给以 Service Worker API 为核心实现的 web 应用取了个高大上的名字:Progressive Web Apps (PWA,渐进式增强 WEB 应用),并且在其主要产品上进行了深入的实践。那么,符合 PWA 的应用特点是什么?以下为来自谷歌工程师的解答。

Progressive Web Apps 是:

  • 渐进增强 – 能够让每一位用户使用,无论用户使用什么浏览器,因为它是始终以渐进增强为原则
  • 响应式用户界面 – 适应任何环境:桌面电脑,智能手机,笔记本电脑,或者其他设备
  • 不依赖网络连接 – 通过 Service Workers 可以在离线或者网速极差的环境下工作
  • 类原生应用 – 有像原生应用般的交互和导航给用户原生应用般的体验,因为它是建立在 app shell model 上的
  • 持续更新 – 受益于 Service Worker 的更新进程,应用能够始终保持更新
  • 安全 – 通过 HTTPS 来提供服务来防止网络窥探,保证内容不被篡改
  • 可发现 – 得益于 W3C manifests 元数据和 Service Worker 的登记,让搜索引擎能够找到 web 应用
  • 再次访问 – 通过消息推送等特性让用户再次访问变得容易
  • 可安装 – 允许用户保留对他们有用的应用在主屏幕上,不需要通过应用商店
  • 可连接性 – 通过 URL 可以轻松分享应用,不用复杂的安装即可运行

Progressive Web Apps 优势:

PWA 是一种理念,使用多种技术来增强 Web Apps 的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。在移动端利用标准化框架,让网页应用呈现和原生应用相似的体验。它比原生应用更轻量,但是却比现有的 Web Apps 的功能更加丰富。最大也是最关键的区别是它能够脱离浏览器的「束缚」(虽然依然是基于浏览器的技术),能够把 PWA 网站添加到你的桌面上,不管是 PC 操作系统还是手机操作系统,类似于一个原生应用一样,并且拥有媲美原生应用的体验。而微信支付宝等小程序更封闭,是 Web 的子集。


生命周期:

  • Parsed (解析成功): 首次注册 Service Worker (SW) 时,浏览器解决脚本并获得入口点,如果解析成功,就可以访问到 SW 注册对象,在这一点中我们需要在 HTML 页面中添加一个判断,判断该浏览器是否支持 SW
  • Installing (正在安装): SW 脚本解析完成之后,浏览器会尝试进行安装,installing 中 install 事件被执行,如果其中有 event.waitUntil ()方法,则 installing 事件会一直等到该方法中的 Promise 完成之后才会成功,如果 Promise 被拒绝,则安装失败,SW会进入 Redundant( 废弃 )状态
  • Installed / Waiting (安装成功/等待中): 如果安装成功,SW 将会进入这个状态
  • Activating (正在激活): 处于 waiting 状态的 SW 发生以下情况,将会进入 activating 状态中:当前已无激活状态的 worker 、 SW脚本中的 self.skipWaiting() 方法被调用 、用户已关闭 SW 作用域下的所有页面,从而释放了当前处于激活状态的 worker、超出指定时间,从而释放当前处于激活状态的 worker
  • Activated (激活成功): 该状态,其成功接收了 document 全面控制的激活态 worker
  • Redundant (废弃): 这个状态的出现时有原因的,如果 installing 事件失败或者 activating 事件失败或者新的 SW 替换其成为激活态 worker 。installing 事件失败和 activating 事件失败的信息我们可以在 Chrome 浏览器的 DevTools 中查看

PWA 关键技术

  • Service Worker
    Service Worker 是 Chrome 团队提出和力推的一个 WEB API,用于给 web 应用提供高级的可持续的后台处理能力。该 WEB API 标准起草于 2013 年,于 2014 年纳入 W3C WEB 标准草案,当前还在草案阶段
    Service Worker 最主要的特点是:在页面中注册并安装成功后,运行于浏览器后台,不受页面刷新的影响,可以监听和截拦作用域范围内所有页面的 HTTP 请求,它的特点:
    • 网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用 localhost)
    • 运行于浏览器后台,可以控制打开的作用域范围下所有的页面请求
    • 单独的作用域范围,单独的运行环境和执行线程
    • 不能操作页面 DOM。但可以通过事件机制来处理
  • Manifest
    Web App Manifest 是一个 W3C 规范,它定义了一个基于 JSON 的 List 。Manifest 在 PWA 中的作用有:
  • 能够将你浏览的网页添加到你的手机屏幕上
  • 在 Android 上能够全屏启动,不显示地址栏 ( 由于 Iphone 手机的浏览器是 Safari ,所以不支持哦)
  • 控制屏幕 横屏 / 竖屏 展示
  • 定义启动画面
  • 可以设置你的应用启动是从主屏幕启动还是从 URL 启动
  • 可以设置你添加屏幕上的应用程序图标、名字、图标大小
  • Push Notification
    Push 和 Notification 是两个不同的功能,涉及到两个 API 。
  • Notification 是浏览器发出的通知消息。
  • Push 和 Notification 的关系,Push:服务器端将更新的信息传递给 SW ,Notification: SW 将更新的信息推送给用户。

PWA 技术的实现

1. 添加注册事件
在网页中添加注册JS:

<script>
if ('serviceWorker' in navigator) {
   
window.addEventListener('load', function () {
   
navigator.serviceWorker.register('/sw.js', {
   scope: '/'})
.then(function (registration) {
   
// 注册成功
console.log('ServiceWorker registration successful');
})
.catch(function (err) {
   
// 注册失败:(
console.log('ServiceWorker registration failed');
});
});
}
</script>

2. 添加 PWA 应用清单信息

  • 在网站根目录下新建 manifest.json

    {
         
    "name": "无垠鲲",
    "short_name": "无垠鲲",
    "description": "鲲之大,无垠...",
    "icons": [
    {
         
    "src": "https://www.neosey.com/favicon.ico",
    "sizes": "64x64",
    "type": "image/png"
    },
    {
         
    "src": "https://www.neosey.com/favicon.ico",
    "sizes": "128x128",
    "type": "image/png"
    },
    {
         
    "src": "https://www.neosey.com/favicon.ico",
    "sizes": "256x256",
    "type": "image/png"
    },
    {
         
    "src": "https://www.neosey.com/favicon.ico",
    "sizes": "512x512",
    "type": "image/png"
    }
    ],
    "start_url": "/",
    "background_color": "#E0E3DA",
    "theme_color": "#E0E3DA"
    }
    
注:name 和 short_name 为网站标题,description 为网站描述,src 为图标地址
<link rel="manifest" href="./manifest.json">

3. Service Worker 配置

//缓存空间名称
var CACHE_VERSION = 'sw_v1';
//需缓存的文件
var CACHE_FILES = [
'/',
'/aaa.html',
'/bbb.jpg'
];
//监听安装事件
self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(CACHE_VERSION)
    .then(cache => cache.addAll(CACHE_FILES)
      .then(() => self.skipWaiting())
    ));
});

//监听激活事件
self.addEventListener('activate', function (event) {
  event.waitUntil(
    caches.keys().then(function (keys) {
      return Promise.all(keys.map(function (key, i) {
        if (key !== CACHE_VERSION) {
          return caches.delete(keys[i]);
        }
      }));
    })
  );
});

//不缓存策略
self.addEventListener('fetch', function(event) {});
注:以上定义为只缓存已定义的文件,不缓存其他。

4. Service Worker 更多缓存策略

  • 总是更新策略注:其余配置与上文简单配置内容一致,仅需将 fetch 事件修改如下。

    //总是更新策略
    self.addEventListener('fetch', function(event) {
    event.respondWith(
    caches.open(CACHE_VERSION).then(function(cache) {
    return fetch(event.request).then(function(response) {
    cache.put(event.request, response.clone());
    return response;
    });
    })
    );
    });
    
  • 先缓存后更新策略注:其余配置与上文简单配置内容一致,仅需将 fetch 事件修改如下。

    //先缓存后更新策略
    self.addEventListener('fetch', function (event) {
    event.respondWith(
    caches.open(CACHE_VERSION).then(function (cache) {
    return cache.match(event.request).then(function (response) {
    var fetchPromise = fetch(event.request).then(function (networkResponse) {
    cache.put(event.request, networkResponse.clone());
    return networkResponse;
    })
    return response || fetchPromise;
    })
    })
    );
    });
    
  • 最佳策略
    这里,我们简单的通过文件类型这个点来进行划分,优先情况是缓存 js/css 文件。这样通过在 FILE_LISTS 添加想要缓存的文件类型即可。之后,我们只要在 message 中更新原来的 document 即可。
    注:此策略与上文简单配置配置内容不一致,以下为该策略配置示例:

    //最佳策略
    var CURRENT_CACHES = {
         
    prefetch: 'prefetch-cache-v' + 1,
    };
    var FILE_LISTS = ['js','css','png'];
    var goSaving = function(url){
         
    for(var file of FILE_LISTS){
         
    if(url.endsWith(file)) return true;
    }
    return false;
    }
    self.addEventListener('fetch', function(event) {
         
    event.respondWith(
    caches.match(event.request).then(function(resp) {
         
    return resp || fetch(event.request).then(function(response) {
         
    // 检查是否需要缓存
    var url = event.request.url;
    if(!goSaving(url))return response;
    console.log('save file:' + url);
    // 需要缓存,则将资源放到 caches Object 中
    return caches.open(CURRENT_CACHES.prefetch).then(function(cache) {
         
    console.log('update files like' + event.request.url);
    cache.put(event.request, response.clone());
    return response;
    });
    });
    })
    );
    });
    self.addEventListener('message',event =>{
         
    console.log("receive message" + event.data);
    // 更新根目录下的 html 文件。
    var url = event.data;
    console.log("update root file " + url);
    event.waitUntil(
    caches.open(CURRENT_CACHES.prefetch).then(cache=>{
         
    return fetch(url)
    .then(res=>{
         
    cache.put(url,res);
    })
    })
    )
    });
    

体验 PWA

到现在为止就已经为网站配置好了 PWA 的技术,在支持 PWA 技术的浏览器上体验吧!

目录
相关文章
|
11月前
|
前端开发 JavaScript UED
现代Web开发中的渐进式增强(Progressive Enhancement)
【10月更文挑战第9天】现代Web开发中的渐进式增强(Progressive Enhancement)
192 1
|
12月前
|
缓存 前端开发 API
探索PWA(Progressive Web Apps)的无限可能
探索PWA(Progressive Web Apps)的无限可能
498 8
|
12月前
|
缓存 编解码 前端开发
探索PWA(Progressive Web Apps)的无限可能
探索PWA(Progressive Web Apps)的无限可能
180 0
|
4月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
11月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
589 3
|
6月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
994 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
6月前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。
|
10月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
356 67
|
10月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
288 63
|
9月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南

热门文章

最新文章