PWA：WebApp 工具类库大盘点-JavaScript中文网-JavaScript教程资源分享门户

前端开发者们都知道，PWA（Progressive Web App）是一种可以像原生应用一样具有离线功能、消息推送等特性的 Web 应用程序。随着 PWA 技术的不断发展，越来越多的 WebApp 工具类库应运而生，帮助开发者更方便地构建 PWA 应用。

本文将对当前比较热门的 PWA 工具类库进行详细介绍，涵盖了 PWA 构建的各个方面，包括离线存储、消息推送、桌面通知、低网速优化等等，旨在为前端开发者提供全面的 PWA 工具类库解决方案。

离线存储

1. localForage

localForage 是仅供浏览器使用的离线存储 JavaScript 库。它使用了浏览器支持的各种存储技术（IndexedDB、WebSQL、localStorage），在 HTML5 和跨浏览器环境下都有良好的表现。可以使用它轻松地将数据存储在用户的浏览器中，以便在离线时使用。

import localforage from 'localforage'

localforage.setItem('key', 'value').then(() => {
  localforage.getItem('key').then(value => {
    console.log(value)
  })
})

2. PouchDB

PouchDB 是一个面向浏览器和 Node.js 的开源 JavaScript 库，其主要重点是离线数据同步。它可以与 CouchDB 同步，因此可以将数据带到离线状态下，并在回到在线状态时与服务器同步数据。

import PouchDB from 'pouchdb'

const db = new PouchDB('mydb')
db.put({
  _id: 'dave@gmail.com',
  name: 'David',
  age: 69
})

消息推送

1. Web Push

Web Push 提供了强大的消息推送功能，可以在不打开 Web 站点的情况下推送消息通知。Web Push 要求浏览器必须支持 Service Worker 和 Push API。

// www.javascriptcn.com code example
navigator.serviceWorker.register('path/to/service-worker.js').then(registration => {
  registration.pushManager.getSubscription().then(subscription => {
    if (!subscription) {
      registration.pushManager.subscribe({
        userVisibleOnly: true
      }).then(subscription => {
        // store push subscription on server
      })
    }
  })
})

2. OneSignal

OneSignal 是一个跨平台的消息推送工具，支持 PWA、iOS、Android 等平台。它可以在您的 Web 应用程序中轻松实现消息推送，并具有广泛的 API 和消息管理工具。

import OneSignal from 'onesignal-web-sdk'

OneSignal.initialize('YOUR_APP_ID', {
  safari_web_id: 'YOUR_SAFARI_ID'
})
OneSignal.registerForPushNotifications()

桌面通知

1. Notification API

Notification API 是一种原生的浏览器 API，可在符合条件（包括 HTTPS 等）的站点上显示桌面通知。使用该 API，您可以在支持的浏览器上获得用户授权，并显示具有标题、文本和图像的通知。

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    new Notification('标题', {
      body: '通知内容',
      icon: 'path/to/icon.png'
    })
  }
})

2. humps

humps 是一个 JavaScript 库，提供了一组函数，可将字符串从 camelCase、snake_case 或 kebab-case 转换为其他格式。这在设置通知图标时特别有用。

import { decamelizeKeys } from 'humps'

decamelizeKeys({ iconName: 'path/to/icon.png' }, { separator: '_' })
// { icon_name: 'path/to/icon.png' }

低网速优化

1. offline-plugin

offline-plugin 提供了一个易于使用的 webpack 插件，可以在应用程序离线时提供替代页面或消息。此插件也可用于缓存 HTML、CSS、JavaScript 和其他第三方资源等。

将插件添加到 webpack 配置后，即可自动将应用离线时使用的内容预缓存到 Service Worker 中。

// www.javascriptcn.com code example
const OfflinePlugin = require('offline-plugin')

module.exports = {
  // ...other webpack config
  plugins: [
    new OfflinePlugin({
      appShell: '/',
      responseStrategy: 'network-first',
      safeToUseOptionalCaches: true,
      caches: {
        main: ['app.js', 'app.css']
      }
    })
  ]
}

2. lighthouse

lighthouse 是 Google 开发的一个开源自动化工具，可帮助开发者改善 Web 应用程序的质量和性能。lighthouse 运行实用程序，打分上报不佳信息，并为您提供改进性能和可访问性的建议。

使用 lighthouse，您可以轻松地了解您的 PWA 应用程序的性能表现，并应用优化建议来加速页面加载速度。

npm install -g lighthouse
lighthouse https://yoursite.com

结语

上述 PWA 工具类库虽然只是其中的一小部分，局限于篇幅和深度，但是它们都有着可靠的品质和成千上万的用户。PWA 技术在继续快速发展，无论您是否打算开始开发 PWA 应用程序，都应该全面了解这些最佳实践和工具类库的细节，以便为用户提供最佳的 WebApp 体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d799e2a941bf7134d9b6ce

PWA：WebApp 工具类库大盘点