如何将现有网站转换成 PWA 应用-JavaScript中文网-JavaScript教程资源分享门户

PWA（Progressive Web App）是一种新型的 Web 应用，它通过使用现代 Web 技术，将 Web 应用转化成类似于原生应用的用户体验。PWA 不仅可以在各种设备上运行，更可以脱离网络、在桌面上安装、与其他应用进行交互。将现有的网站转换成 PWA 应用，可以给用户带来更好的体验，增强 Web 应用的可用性、交互性和安全性。本文将详细介绍如何将现有网站转换成 PWA 应用。

转化为 PWA 应用的条件

在将现有网站转化成 PWA 应用之前，需要确保网站满足以下条件：

HTTPS：PWA 应用必须运行在通过 HTTPS 协议访问的网站上，这样可以保证应用在传输过程中数据的安全性，防止恶意攻击。
Manifest：PWA 应用需要一个 manifest.json 文件，用于描述应用的基本信息、图标、主题色等。其中最为重要的是 start_url 属性，它指定了打开应用时的起始页面。
Service Worker：Service Worker 是 PWA 应用的核心技术，它运行在后台，用于缓存静态资源、处理离线访问等。一个良好的 Service Worker 可以极大地提高 PWA 应用的性能和可用性。

转化为 PWA 应用的步骤

下面是将现有网站转化为 PWA 应用的步骤：

1. 添加 Manifest 文件

在网站的根目录下创建一个名为 manifest.json 的文件，使用如下模板：

// javascriptcn.com 代码示例
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "./index.html",
  "display": "standalone",
  "icons": [
    {
      "src": "/img/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/img/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    .
    .
    .
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

上面的模板中，name 表示应用的名称，short_name 表示应用的短名称，start_url 表示应用启动时打开的页面，display 表示应用的展示方式（有 standalone、fullscreen、minimal-ui、browser 等几种方式），icons 列表中包含应用的图标，theme_color 表示应用的主题色，background_color 表示应用的背景色。

2. 注册 Service Worker

在网站的主 HTML 文件中添加如下代码来注册 Service Worker：

// javascriptcn.com 代码示例
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js')
      .then(function(registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      }, function(err) {
        console.log('ServiceWorker registration failed: ', err);
      });
  });
}

上面的代码中，首先判断浏览器是否支持 Service Worker，然后将 Service Worker 脚本文件注册到浏览器中。其中，sw.js 指定了 Service Worker 的脚本文件路径。

3. 缓存静态资源

在 Service Worker 中，可以通过 caches API 缓存网站的静态资源（如 CSS、JS、图片等），以实现离线访问功能。以下是一个简单的 Service Worker 脚本示例：

// javascriptcn.com 代码示例
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js',
  '/img/logo.png'
];

self.addEventListener('install', function(event) {
  // 缓存静态资源
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  // 从缓存中获取资源或者从网络中请求资源
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // 如果在缓存中找到该资源，则直接返回缓存中的结果
        if (response) {
          return response;
        }
        // 否则从网络中请求资源，并将结果缓存到缓存中
        return fetch(event.request)
          .then(function(response) {
            // 检查是否成功获取资源
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }
            var responseToCache = response.clone();
            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });
            return response;
          });
      })
  );
});

上面的代码使用 caches.open() 方法创建一个缓存，并将指定的 urlsToCache 列表中的资源缓存到该缓存中。同时，它还通过监听 fetch 事件来处理对缓存中资源的请求。如果在缓存中找到该资源，则直接返回缓存中的结果，否则从网络中请求资源，并将结果缓存到缓存中。

4. 配置 Web App Manifest

在主 HTML 文件中通过以下代码引用 Manifest 文件：

<link rel="manifest" href="/manifest.json">

具体来说，Manifest 文件需要包含以下元素：

name - 应用的名称
short_name - 应用的短名称
start_url - 应用启动时打开的页面
display - 应用的展示方式（有 standalone、fullscreen、minimal-ui、browser 等几种方式）
icons - 应用的图标列表
theme_color - 应用的主题色
background_color - 应用的背景色

其中，name、short_name、start_url 和 display 是必须的元素，其他元素可选。

总结

通过以上步骤，我们可以将现有的网站转化成 PWA 应用，实现离线访问、与其他应用的交互、在桌面上安装等功能。虽然这些功能在原生应用中很常见，但在 Web 应用中却是一项新的尝试，希望本文对大家的学习和实践有所帮助。

以上就是本文的介绍，如果还有疑问或者需要进一步了解 PWA 应用，请参考官方文档。

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