实现PWA

渐进式web应用

• 什么是PWA？
• PWA的核心特性
• PWA的应用场景
• React实现PWA
• • 创建React应用
  • 配置Service Worker
  • 添加manifest文件
  • 手动安装PWA
  • • 代码实现
• 各个平台对PWA的支持情况
• • 安卓
  • iOS
  • 桌面操作系统
  • 平台支持小结
• 总结

什么是PWA？

PWA（Progressive Web Application）是一种增强型的Web应用，它结合了网页和原生应用的优点。PWA的目标是提供用户快速、可靠、可交互性强的使用体验，无论在何种网络条件下都能保持高效运行。

PWA的核心特性

• 渐进增强：PWA从基本功能的网页开始，根据设备和浏览器功能逐步增强。
• 响应式设计：适用于任何设备，包括桌面、手机、平板和其他设备。
• 离线功能：通过Service Workers和缓存技术，PWA可以在无网络连接时也能正常使用。
• App-like体验：具有原生应用的外观和感觉，提供全屏、启动画面等功能。 安全性：通过HTTPS确保内容的安全性。
• 可安装性：用户可以将PWA安装到主屏幕，像原生应用一样使用。

PWA的应用场景

• 新闻和博客：例如《华盛顿邮报》和Medium的PWA版。
• 电商网站：例如阿里的淘宝和京东。
• 社交网络：如Twitter的Lite版。
• 企业内部应用：如员工管理系统和客户关系管理系统。
• 教育和学习平台：如Coursera和Khan Academy。

React实现PWA

我们可以使用React来构建PWA。在React应用中实现PWA的主要步骤如下：

• 创建React应用：使用Create React App来初始化项目。
• 配置Service Worker：在Create React App中，默认包含了Service Worker的配置。
• 添加manifest文件：用于定义应用的名称、图标和主题颜色等信息。

创建React应用

npx create-react-app my-pwa
cd my-pwa复制

配置Service Worker

在src/index.js中，Create React App默认生成了Service Worker的注册代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
 
// 注册Service Worker
serviceWorkerRegistration.register();
 
// 可选：报告网络指标
reportWebVitals();
 复制

添加manifest文件

在public目录下，Create React App默认生成了manifest.json文件：

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}
 复制

手动安装PWA

要在用户点击按钮时进行PWA安装，需要使用“beforeinstallprompt”事件和处理用户交互来触发安装提示。以下是详细步骤和代码实现：

• 监听beforeinstallprompt事件：保存事件以便稍后触发。
• 显示安装按钮：在满足条件时显示安装按钮。
• 处理按钮点击事件：在用户点击安装按钮时触发安装提示。

代码实现

1. 修改App.js
   在你的React应用中，创建一个安装按钮，并使用useState和useEffect来处理安装提示。

import React, { useState, useEffect } from 'react';
import './App.css';
// 是否支持PWA
export const isSupportPWA = () => {
  return 'serviceWorker' in navigator
}
function App() {
  const [deferredPrompt, setDeferredPrompt] = useState(null);
  const [isInstallable, setIsInstallable] = useState(false);
 
  useEffect(() => {
    const handleBeforeInstallPrompt = (e) => {
      e.preventDefault();
      setDeferredPrompt(e);
      setIsInstallable(true);
    };
 
    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
 
    return () => {
      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
    };
  }, []);
 
  const handleInstallClick = async () => {
  // 强制开启Chrome浏览器
  if (!(window as any).isChrome() && (window as any).isAndroid()) {
      // eslint-disable-next-line no-extra-semi
      ;(window as any).launchChrome()
      return
    }
  if (!isSupportPWA()) {
      Toast.show('不支持 pwa')
      return
    }
    if (!deferredPrompt) return;
    deferredPrompt.prompt();
    const choiceResult = await deferredPrompt.userChoice;
    if (choiceResult.outcome === 'accepted') {
      console.log('User accepted the install prompt');
    } else {
      console.log('User dismissed the install prompt');
    }
    setDeferredPrompt(null);
    setIsInstallable(false);
  };
 
  return (
    <div className="App">
      <header className="App-header">
        <h1>My PWA</h1>
        {isInstallable && (
          <button onClick={handleInstallClick}>Install App</button>
        )}
      </header>
    </div>
  );
}
 
export default App;
 复制

2. Service Worker注册文件
   确保在src/serviceWorkerRegistration.js中正确注册了Service Worker。Create React App已经默认包含了这个文件。

// 在 index.js 中注册 service worker
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 
// 注册 Service Worker
serviceWorkerRegistration.register();
 复制

各个平台对PWA的支持情况

PWA（Progressive Web Application）不仅支持安卓，还支持多种平台，包括iOS和桌面操作系统。不同平台对PWA的支持程度和方式可能有所不同。

安卓

安卓对PWA有非常好的支持：

Chrome浏览器：完全支持PWA，包括离线功能、安装提示、全屏模式等。

其他浏览器：如Firefox、Samsung Internet等也支持PWA。

iOS

iOS对PWA的支持相对较弱，但仍有基本支持：

Safari浏览器：支持PWA的基本功能，包括离线功能和安装到主屏幕。不过，Safari对Service Worker和Push Notification的支持有限。

安装提示：iOS没有像安卓那样的自动安装提示，但用户可以手动通过“分享”按钮添加PWA到主屏幕。

桌面操作系统

桌面操作系统也逐渐增加对PWA的支持：

Chrome浏览器：在Windows、macOS和Linux上都支持PWA，可以安装到桌面并像本地应用一样使用。

Microsoft Edge：基于Chromium的Edge浏览器支持PWA，包括安装和离线功能。
其他浏览器：Firefox在桌面上对PWA的支持还在不断改进中。

平台支持小结

PWA不仅支持安卓，还支持iOS和桌面操作系统。虽然不同平台对PWA的支持程度有所不同，但总体上，PWA作为一种跨平台的Web应用解决方案，能够在各种设备和操作系统上提供一致的用户体验。下面是一张表格，总结了各个平台对PWA的支持情况：

总结

PWA是一种强大的Web应用形态，结合了网页和原生应用的优势，提供了快速、可靠和可交互的用户体验。通过React，我们可以轻松地构建和部署PWA应用，满足现代Web应用的需求。无论是在新闻、博客、电商、社交网络还是企业内部应用，PWA都展示了其强大的潜力和广泛的应用场景。

希望这篇博客能帮助你更好地理解和应用PWA技术。Happy coding!