PWA 实战：如何将一个已有项目改造为 PWA 应用？-JavaScript中文网-JavaScript教程资源分享门户

随着移动网络的不断发展和普及，越来越多的用户选择使用手机浏览器来访问网站。然而，Web 应用的性能和体验往往无法和原生应用媲美，这也让许多应用转向原生应用的开发。但是，如果使用 PWA （Progressive Web App）技术，我们可以将网站改造为类似于原生应用的体验，而且还能获得更好的性能和用户体验。

那么，如何将一个已有的 Web 应用改造为 PWA 应用呢？本文将介绍一些实际操作中的注意事项以及示例代码，帮助你快速将你的 Web 应用改造为 PWA 应用。

PWA 的基本要素

在开始改造之前，我们需要了解 PWA 的基本要素。PWA 的核心技术包括 Service Worker 和 App Shell。其中，Service Worker 是一个在浏览器后台运行的 JavaScript 脚本，它相当于一个代理服务器，可以拦截浏览器发出的网络请求，并在缓存中查找是否有对应的响应，从而加速页面加载速度和提升用户体验。而 App Shell 则是指一组静态文件，包括 HTML、CSS 和 JavaScript 文件，用于构建基础的应用程序框架。

除此之外，还有一些 PWA 的辅助工具和技术，例如 Manifest、HTTPS、Web Push 等。Manifest 是一个 JSON 文件，用于定义应用程序的名称、图标、主题色以及启动方式等元信息。HTTPS 则是一种安全协议，可以保护用户数据的隐私和安全。而 Web Push 则是一种推送技术，可以向用户发送推送通知，与原生应用类似。

改造步骤

以下是将一个已有 Web 应用改造为 PWA 应用的基本步骤：

添加 HTTPS 支持。为了让浏览器支持 Service Worker，我们需要在服务器上启用 HTTPS。如果你还没有使用 HTTPS，可以考虑使用 Let's Encrypt 等免费 SSL 证书服务来启用 HTTPS。
添加 Service Worker。在应用程序的主页面中，我们需要注册 Service Worker，并且为它指定需要缓存的文件和文件夹。以下是一个示例代码：
```
// javascriptcn.com 代码示例
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      console.log('Service Worker 注册成功：', registration.scope);
    }).catch(function(error) {
      console.log('Service Worker 注册失败：', error);
    });
  });
}
```
在该代码中，我们首先检查浏览器是否支持 Service Worker。如果支持，则在页面加载时注册 Service Worker，并且指定 Service Worker 文件的路径为 /sw.js。我们可以在 /sw.js 文件中编写具体的 Service Worker 逻辑，例如缓存文件和响应网络请求等。

编写 Manifest 文件。Manifest 文件是一个 JSON 文件，用于定义应用程序的元信息。以下是一个示例代码：

// javascriptcn.com 代码示例
{
  "name": "My PWA",
  "short_name": "My PWA",
  "icons": [
    {
      "src": "/img/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "background_color": "#ffffff",
  "theme_color": "#0f0f0f",
  "display": "standalone",
  "orientation": "portrait"
}

在该代码中，我们定义了应用程序的名称、图标、启动页面、背景色、主题色以及启动方式等信息。我们可以将该文件保存为 manifest.json，并放置在应用程序的根目录下。

编写 App Shell。App Shell 是一组静态文件，包括 HTML、CSS 和 JavaScript 文件，用于构建基础的应用程序框架。在注册 Service Worker 之后，我们可以将 App Shell 缓存到浏览器中，这样在下次访问应用程序时可以更快地加载页面。以下是一个示例代码：
```
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My PWA</title>
  <link rel="manifest" href="/manifest.json">
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <div class="page-header">
    <h1>My PWA</h1>
  </div>

  <div class="page-content">
    <p>Hello, world!</p>
  </div>

  <script src="/js/main.js"></script>
</body>
</html>
```
在该代码中，我们定义了应用程序的 HTML 结构、样式表和脚本文件，以及引用了 Manifest 文件和 Service Worker 文件。我们可以将该文件保存为 index.html，并放置在应用程序的根目录下。

添加 Web Push 支持（可选）。如果你希望使用 Web Push 技术向用户发送推送通知，你需要首先获取用户的许可并注册 Service Worker。以下是一个示例代码：

// javascriptcn.com 代码示例
if ('PushManager' in window) {
  const pushButton = document.querySelector('.push-button');

  navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    pushButton.disabled = false;

    return serviceWorkerRegistration.pushManager.getSubscription().then(function(subscription) {
      if (subscription) {
        return subscription;
      }

      return serviceWorkerRegistration.pushManager.subscribe({
        userVisibleOnly: true
      });
    }).then(function(subscription) {
      console.log('Push 订阅成功：', subscription.endpoint);
    }).catch(function(error) {
      console.log('Push 订阅失败：', error);
    });
  });

  pushButton.addEventListener('click', function() {
    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
      serviceWorkerRegistration.pushManager.getSubscription().then(function(subscription) {
        if (subscription) {
          return subscription.unsubscribe().then(function() {
            console.log('Push 取消订阅成功：', subscription.endpoint);
          });
        }
      }).catch(function(error) {
        console.log('Push 取消订阅失败：', error);
      });
    });
  });
}

在该代码中，我们首先检查浏览器是否支持 PushManager 接口。如果支持，则获取用户的许可，并且注册 Service Worker。我们可以在 Service Worker 中编写具体的推送逻辑，例如监听 push 事件并发送推送通知等。

总结

通过以上的步骤，我们已经将一个已有的 Web 应用改造为了 PWA 应用。除了以上的基本要素和步骤之外，还有一些 PWA 的进阶技术和工具，例如 Workbox、Lighthouse、React Native Web 等，可以进一步优化应用程序的性能和体验。希望本文可以帮助你快速了解和应用 PWA 技术，提升你的 Web 应用质量和用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654242f97d4982a6ebbec82d