乐分享生活

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

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

什么是 PWA？

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

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

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

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

渐进式：适用于所有浏览器，因为它是以渐进式增强作为宗旨开发的 连接无关性：能够借助 Service Worker 在离线或者网络较差的情况下正常访问 可发现：渐进式应用程序本质上是一个网站，因此它可以被搜索引擎收录。 离线功能： 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"
}

Service Worker

Service Worker 是所有 PWA 的重要基础，关于这一块知识可以参阅《Service Worker工作原理、生命周期和使用场景》，它们允许拦截网络请求并为不同的调用实施缓存策略。可以将其视为一种 Web Worker，但它是一个 JavaScript 文件，充当 Web 应用程序和网络之间的代理。它拦截 HTTP 请求并提供来自网络或本地缓存的响应。Service Worker 是安全的，不能直接与 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": "maskable any"
        },
        {
            "src": "/pwa/images/logo.png",
            "type": "image/png",
            "sizes": "128x128",
            "purpose": "maskable any"
        }
    ],
    "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代码添加到

了的 index.html 文件。

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

通常，清单文件存储在 Web 应用程序的根目录中，它可以被命名为任何你想要的名字，只要以 .json 为后缀。然后，为它提供媒体类型 application/manifest+json 。然后，必须使用HTML 文档部分中的

标记将清单与 Web 应用程序相关联。这是一个示例，它向用户代理指示必须采用清单元数据。还需要通过添加属性来添加凭据 crossorigin="use-credentials" 。

4. 添加 Service Worker

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

注册：使用包含 Service Worker 逻辑的 JavaScript，可以使用以下代码。在此阶段，如果无法获取 service worker 文件，可能会出现一个错误。
安装：在此阶段，通常执行预取操作，以确保下载目标资产（如静态文件）。这就是在JavaScript代码中使用 Promise 的地方。cache.open() 和 cache.addAll() 都将返回 Promise 。安装后，service worker 将延迟激活，直到旧的service worker不再控制客户端。
激活：一旦旧的 service worker 消失，新的 service worker 就会被激活。
获取和拦截请求：现在 service worker 已安装并激活，因此它可以拦截请求并与本地缓存通信。可以通过多种方式实现这个阶段，这里，将展示一般 PWA 场景的最简单方法。

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

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

6. 测试 PWA 和清单文件

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