PWA 是什么？有什么优点？-JavaScript中文网-JavaScript教程资源分享门户

PWA 是什么？有什么优点？

PWA 是 Progressive Web App 的缩写，意为渐进式 Web 应用。由 Google 首先提出，旨在将 Web 应用程序推向一个更高水平，让用户可以通过 Web 来拥有和原生应用相同的体验。它是一种在移动设备上运行的 Web 应用程序，可以像本地应用一样进行缓存、离线运行、响应速度快，且不需要下载和安装，可以直接在浏览器中使用。今天，越来越多的企业和开发者开始开发 PWA，因为它使应用更易于发现和访问，提高了用户满意度和转化率。

下面是 PWA 的一些优点：

响应速度快：PWA 的性能和速度要比普通的 Web 应用或者移动应用更好。因为 PWA 可以使用 Service Worker 页面的数据进行预加载并离线缓存，所以无论用户在何时何地发出请求，都可以迅速且快速地得到响应，这样可以减少页面加载时间，提高用户的使用体验。
可离线使用：在互联网连接不稳定或网络未连接时，PWA 也能在用户的设备上缓存大量数据，使用户能够像使用原生应用一样离线使用。
安装方便：PWA 不需要通过应用商店下载和安装，用户可以通过浏览器主屏幕上的“添加到主屏幕”按钮将 Web 应用程序添加到移动设备的主屏幕，这简单明了，易于操作。
节省成本：相比原生应用的开发和发布，PWA 开发和发布环节的成本大幅降低，开发人员可集中于 Web 技术，减少了开发人员的培训成本，同时无需为不同平台分别开发应用。

接下来利用一个实例向读者展示 PWA 的应用。

我们假设有一个新闻网站，我们想要把它做成 PWA。首先，我们需要将我们的网站部署到服务器上。然后我们需要添加一个“install”按钮用于安装 PWA，使 Web 应用程序能够添加到设备主屏幕。在我们的 PWA 中，我们可以通过以下代码实现：

<button id="install_button">安装</button>

我们需要侦听一个 "beforeinstallprompt" Ajax 事件，当用户点击 "install" 按钮时触发安装，并显示安装提示。为了安装我们的 PWA，我们需要添加以下代码：

// www.javascriptcn.com code example
//our web app installs function automatically
window.addEventListener('beforeinstallprompt', function(event) {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  window.deferredPrompt = event;
  // Update UI notify the user they can add to home screen
  showInstallPromotion();
});
  //button click event listener
  install_button.addEventListener('click', function() {
    //hide our user interface that shows our A2HS button
    hideInstallPromotion();
    // Show the prompt
    deferredPrompt.prompt();
    // Wait for the user to respond to the prompt
    deferredPrompt.userChoice.then(function(choiceResult) {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
  });

在打开 PWA 之前，我们需要浏览器先进行安装提示。如果用户选择“安装”，我们就展示自定义的安装提示，如下所示：

// www.javascriptcn.com code example
// display install promotion
function showInstallPromotion() {
  install_button.hidden = false;
}

// hide install promotion
function hideInstallPromotion() {
  install_button.hidden = true;
}

这里我们定义了两个方法用于显示/隐藏自定义安装提示。这就是一个非常基础的 PWA 实例。

总之，PWA 的优点不仅体现在提高用户的使用体验方面，同时也是因为它可以在各种设备上运行，并且使用的技术和工具很广泛，特别适合以 Web 技术进行开发的应用程序。随着PWA 实现的不断改进和提升，越来越多的企业和开发者开始对 PWA 持有更加正面的态度，认为 PWA 已经成为了未来 Web 应用程序的重要趋势。

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

PWA 是什么？有什么优点？

接着读