PWA 的可安装性 (Installability) 标准是什么？

推荐答案

PWA 的可安装性（Installability）标准主要包括以下几点：

1. Web App Manifest：应用必须包含一个有效的 manifest.json 文件，该文件定义了应用的元数据，如名称、图标、启动 URL 等。
2. Service Worker：应用必须注册一个 Service Worker，以便支持离线功能和后台同步。
3. HTTPS：应用必须通过 HTTPS 提供服务，确保数据传输的安全性。
4. 图标和启动画面：应用必须提供合适的图标和启动画面，以确保在安装后能够正确显示在设备主屏幕上。
5. 用户交互：应用必须通过用户交互（如点击按钮）来触发安装提示，而不是自动弹出安装提示。

本题详细解读

Web App Manifest

manifest.json 文件是 PWA 的核心配置文件，它定义了应用的基本信息，如名称、图标、启动 URL 等。以下是一个简单的 manifest.json 示例：

// www.javascriptcn.com code example
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Service Worker

Service Worker 是 PWA 的关键技术之一，它允许应用在离线状态下运行，并支持后台同步等功能。以下是一个简单的 Service Worker 注册示例：

// www.javascriptcn.com code example
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(function(error) {
      console.log('Service Worker registration failed:', error);
    });
}

HTTPS

PWA 必须通过 HTTPS 提供服务，以确保数据传输的安全性。这是因为 Service Worker 和 Web App Manifest 等功能需要在一个安全的环境中运行。

图标和启动画面

PWA 必须提供合适的图标和启动画面，以确保在安装后能够正确显示在设备主屏幕上。图标应包含多种尺寸，以适应不同的设备屏幕。

用户交互

PWA 的安装提示必须通过用户交互来触发，而不是自动弹出。这通常通过一个“添加到主屏幕”按钮来实现。以下是一个简单的示例：

// www.javascriptcn.com code example
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  // 显示安装按钮
  document.getElementById('installButton').style.display = 'block';
});

document.getElementById('installButton').addEventListener('click', () => {
  deferredPrompt.prompt();
  deferredPrompt.userChoice.then((choiceResult) => {
    if (choiceResult.outcome === 'accepted') {
      console.log('User accepted the install prompt');
    } else {
      console.log('User dismissed the install prompt');
    }
    deferredPrompt = null;
  });
});

通过以上标准，PWA 可以实现可安装性，使用户能够像原生应用一样将 PWA 添加到主屏幕并离线使用。