如何PWA构建现代离线应用程序

发布网友发布时间：2025-01-14 07:03

共1个回答

热心网友时间：2025-01-15 10:20

渐进式Web应用程序(PWA)可能是现代移动应用程序开发的主流技术之一。这个技术工具结合了本地应用程序和web应用程序的功能。使用现代api来提供可靠性和可安装性，同时使用单一代码库访问任何人、任何地点、任何设备。PWA在web开发中正在兴起，大大小小的公司都在利用这一强大的技术。本文将介绍PWA及通过代码开始一个基本的应用。

什么是PWA？

渐进式Web应用程序(PWA)是使用现代技术提供与本机应用程序非常相似的用户体验的Web应用程序。近年来，PWA变得非常流行，因为它们不仅提高了性能和用户体验，而且为WEB应用程序提供了一种离线访问方式。

PWA的主要目标是提供与本地移动应用程序相同的体验，将最好的移动和web应用程序结合到一种技术中。可以使用前端web技术构建一个网站，但它的感觉和功能都像是一个移动应用程序。

这种现代的应用程序开发解决方案使移动应用程序开发人员可以轻松地将产品推向市场，而无需经历Apple或Play商店缓慢的验证过程。部署PWA后，用户可以立即使用它，这也意味着用户无需手动更新应用程序即可获得最新版本。

PWA的开发成本明显低于原生应用程序，因为PWA消除了对iOS和Android团队的需求。与原生应用程序相比，这种宝贵的现代应用程序开发解决方案利用更大的网络生态系统来维护应用程序。渐进式网络应用程序显然有很多好处，来看看它们的都有哪些特点。

渐进式：适用于所有浏览器，因为它是以渐进式增强作为宗旨开发的连接无关性：能够借助ServiceWorker在离线或者网络较差的情况下正常访问可发现：渐进式应用程序本质上是一个网站，因此它可以被搜索引擎收录。离线功能：PWA可以在用户离线时工作。它也适用于连接性差或低连接性的区域。类原生应用：PWA的交互和外观和原生应用程序类似。可链接：PWA本质上是网站，因此它们使用URI来指示应用程序的状态，以便应用程序可以保持其状态，并且可以通过链接可分享内容，无需下载安装。

构建应用

在构建PWA之前，需要基本的前端知识，如具备一些HTML、CSS和JavaScript知识。

manifest

manifest对于PWA至关重要，提供元数据，告诉浏览器如何使用JSON文本文件在任何设备上呈现和显示PWA。

{"lang":"zh-cn","name":"CSS动画实例","theme_color":"transparent","description":"一个简单的PWA应用","orientation":"any","background_color":"transparent"}ServiceWorker

ServiceWorker是所有PWA的重要基础，关于这一块知识可以参阅《ServiceWorker工作原理、生命周期和使用场景》，它们允许拦截网络请求并为不同的调用实施缓存策略。可以将其视为一种WebWorker，但它是一个JavaScript文件，充当Web应用程序和网络之间的代理。它拦截HTTP请求并提供来自网络或本地缓存的响应。ServiceWorker是安全的，不能直接与DOM交互，它们通过postMessage接口与页面进行通信，可以直接与DOM交互。

PWA文件结构

看看这个PWA文件结构：

{"lang":"zh-cn","name":"CSS动画实例","orientation":"landscape","description":"一个简单的PWA应用","theme_color":"#282c34","background_color":"#2254b9","scope":"/","start_url":"pwa/","display":"standalone","icons":[{"src":"/pwa/images/logo80.png","type":"image/png","sizes":"80x80","purpose":"maskableany"},{"src":"/pwa/images/logo.png","type":"image/png","sizes":"128x128","purpose":"maskableany"}],"prefer_related_applications":true}

name/short_name：这是在用户设备上安装PWA后应用程序图标下使用的值，short_name当可用空间不足时使用，建议将其保持在12个字符以下以避免截断。

start_url：这是启动PWA时要加载的应用程序资产的路径，这将表明希望应用程序每次启动时都在主页上启动。

display：这指定了PWA应用程序的显示方式，可以根据浏览器体验指定不同的值，例如browser标准体验或standalone窗口。

icons：这将确定主屏幕或启动屏幕上的图标，它应该至少是144px的分辨率，某些浏览器（例如Chrome）建议使用两个不同大小的图标来帮助在不同设备上进行缩放，然后可以使用该purpose属性来指示这些不同图标的用途。

background_color：设置PWA的背景颜色。可以确定所需的颜色，在Chrome上，该背景颜色也用于初始屏幕。

1.创建首页

要制作PWA，需要一个网站，可以从头开始制作一个（只要它在不同的屏幕、浏览器和设备上都能很好地扩展），也可以下载一个模板。如果使用模板，请替换index.html文件中的内容并使用CSS更改颜色或设计。一旦有了网站，就可以把它变成一个渐进式网络应用程序。

2.为主屏幕制作一个应用程序图标

正如上面文件结构部分提到的，PWA需要一个应用程序图标。这将显示在主屏幕上。可以制作自己的徽标或从在线资源下载免费徽标。无论哪种方式，徽标都必须是正方形，并且分辨率至少应为144像素。一旦图标，下载和在HTML代码添加到<head>了的index.html文件。

3.创建并注册Web应用清单

通常，清单文件存储在Web应用程序的根目录中，它可以被命名为任何你想要的名字，只要以.json为后缀。然后，为它提供媒体类型application/manifest+json。然后，必须使用HTML文档部分中的<link>标记将清单与Web应用程序相关联。这是一个示例，它向用户代理指示必须采用清单元数据。还需要通过添加属性来添加凭据crossorigin="use-credentials"。

4.添加ServiceWorker

正如之前介绍的那样，ServiceWorker充当应用程序和网络的代理，这是需要添加到PWA的另一个文件，以便它可以脱机工作。要成功创建ServiceWorker，需要了解JavaScript中的Promise。要创建ServiceWorker，有四个主要步骤：

安装：在此阶段，通常执行预取操作，以确保下载目标资产（如静态文件）。这就是在JavaScript代码中使用Promise的地方。cache.open()和cache.addAll()都将返回Promise。安装后，serviceworker将延迟激活，直到旧的serviceworker不再控制客户端。

激活：一旦旧的serviceworker消失，新的serviceworker就会被激活。

获取和拦截请求：现在serviceworker已安装并激活，因此它可以拦截请求并与本地缓存通信。可以通过多种方式实现这个阶段，这里，将展示一般PWA场景的最简单方法。

5.初始化添加到主屏幕对话框

添加到主屏幕对话框(A2HS)是用户在其设备上本地安装应用程序的方式，还需要通过HTTPS连接为应用程序提供服务。为此，Chrome将要求PWA拥有注册的ServiceWorker。满足要求后，浏览器将显示A2HS对话框，例如按钮、弹出窗口或菜单选项。将其添加到主屏幕后，PWA将看起来像使用提供的图标的本机应用程序。

6.测试PWA和清单文件

现在已经拥有基本的PWA，需要测试它是否正常工作并确定它是否是一个好的PWA。PWA开发人员常用的工具是GoogleLighthouse，它将评估PWA并就如何改进它提出建议。可以安装Lighthouse，打开网站，然后单击生成报告。这将打开一个包含有价值信息的选项卡。应该关注的数据是ProgressiveWebApp、Performance、Accessibility和BestPractices类别的评级。从那里，可以确定应该进行哪些更改。

全部栏目

如何PWA构建现代离线应用程序