探索渐进式 Web 应用程序 (PWA)：构建离线就绪体验-js教程-PHP中文网

探索渐进式 Web 应用程序 (PWA)：构建离线就绪体验

Barbara Streisand

发布： 2024-12-11 03:14:12

原创

545 人浏览过

Exploring Progressive Web Apps (PWAs): Building Offline-Ready Experiences

想象一下这个...

您在长途飞行中，滚动浏览应用程序，但没有 Wi-Fi。您希望该应用程序停止工作，但它没有。您仍然可以浏览、交互和使用其功能，就像在线一样。这就是渐进式 Web 应用程序 (PWA) 的魔力，它正在改变我们构建 Web 应用程序的想法。在本指南中，我们将探讨 PWA 是什么、它们如何工作以及如何构建 PWA。

什么是渐进式 Web 应用程序？

PWA 是一种 Web 应用程序，看起来和感觉都像本机应用程序，但在浏览器中运行。它们结合了两个世界的优点：网络的覆盖范围和本机应用程序的功能。 PWA 的一个关键特性是它们能够离线工作，无论网络条件如何，都能提供无缝的用户体验。

PWA 的核心概念

PWA 依赖于三项核心技术：

1. 服务人员

将服务人员视为应用程序的幕后工作人员。它们管理缓存、处理网络请求并确保您的应用程序离线工作。

它们的作用：拦截网络请求、缓存文件并在离线时提供服务。
如何实施：

  self.addEventListener('install', (event) => {
    event.waitUntil(
      caches.open('my-cache').then((cache) => {
        return cache.addAll(['/index.html', '/styles.css', '/script.js']);
      })
    );
  });

  self.addEventListener('fetch', (event) => {
    event.respondWith(
      caches.match(event.request).then((response) => {
        return response || fetch(event.request);
      })
    );
  });

登录后复制

？文档：Service Workers

2. 缓存

缓存可确保您的应用快速加载，即使在缓慢或不可靠的网络上也是如此。

要缓存的内容：HTML、CSS、JavaScript、图像以及离线渲染应用程序所需的任何其他资源。
示例：

  caches.open('my-cache').then((cache) => {
    cache.addAll(['/offline.html', '/styles.css']);
  });

登录后复制

？文档：缓存API

3. 离线功能

离线功能是 PWA 的与众不同之处。这涉及提供缓存文件并在没有互联网连接的情况下启用基本的应用程序交互。

构建渐进式 Web 应用程序

以下是将基本 Web 应用程序转换为 PWA 的分步指南：

第 1 步：添加清单文件

manifest.json 文件向浏览器告知您的应用程序，包括其名称、图标和起始 URL。

{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

登录后复制

？文档：Web 应用程序清单

第 2 步：注册 Service Worker

Service Worker 对于启用离线功能至关重要。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/service-worker.js')
    .then(() => console.log('Service Worker registered'))
    .catch((error) => console.error('Service Worker registration failed:', error));
}

登录后复制

步骤 3：启用 HTTPS

PWA 需要安全连接。使用 HTTPS 确保您的应用程序的安全。

提示：对于本地开发，请使用带有 HTTPS 的 localhost 等工具。

第 4 步：测试离线功能

在 Chrome 中打开您的应用。
转到开发者工具>;应用>>服务人员。
选中“离线”并刷新您的应用程序以查看其在没有网络连接的情况下是否可以运行。

PWA 的最佳实践

优化性能
- 对图像和脚本使用延迟加载。
- 缩小 CSS 和 JavaScript 文件。

使用推送通知

使用 Push API 及时更新来吸引用户。
示例：

  self.addEventListener('install', (event) => {
    event.waitUntil(
      caches.open('my-cache').then((cache) => {
        return cache.addAll(['/index.html', '/styles.css', '/script.js']);
      })
    );
  });

  self.addEventListener('fetch', (event) => {
    event.respondWith(
      caches.match(event.request).then((response) => {
        return response || fetch(event.request);
      })
    );
  });

登录后复制