5 个关键步骤，让你的 PWA 接近原生应用-JavaScript中文网-JavaScript教程资源分享门户

随着PWA（渐进式Web应用程序）的兴起，越来越多的企业开始将应用程序从移动设备应用转换为网页应用。随着Web技术的不断发展，PWA变得越来越强大，某些情况下表现甚至超过传统的原生应用程序。然而，如何确保你的PWA与原生应用的用户体验相同，是一个不断探索的问题。在这篇文章中，我将介绍5个关键步骤，帮助你将PWA开发得更像原生应用。

步骤1：提高应用性能

性能是应用程序成功和失败的关键因素之一。在PWA中，你可以使用许多技术来提高应用程序性能。下面是一些关键技术：

Service Worker

Service Worker是一种允许你拦截和处理网络请求的Web Worker。Service Worker可以使你的应用程序离线可用，并通过在本地缓存中存储资源来提高应用程序速度。

-- -------------------- ---- -------
-- ---------------- -- ---------- -
  ------------------------------- -- -- -
    ------------------------------------------
      ------------------ -- -
        -------------------- ------ ----------- -- --------------
      --
      ------------------------ -- -
        -------------------- ------ ------------ ------- -- -------------------
      ---
  ---
-

在缓存中存储

PWA可以在本地缓存中存储资源。这可以使你的应用程序更快地加载，并使你的应用程序在网络不可用时可用。你可以使用Service Worker和Cache API来存储资源。

-- -------------------- ---- -------
----- ---------- - --------------
----- ----------- - -
  ----
  -------------------
  -------------------
  -------------------
--

-------------------------------- --------------- -
  ----------------
    -----------------------
      --------------------- -
        ------------------- --------
        ------ --------------------------
      --
  --
---

图像压缩

Web应用程序中的图像文件占用了大量的磁盘空间。通过使用现代的图像压缩算法，你可以减少图像文件的大小，从而提高应用程序的速度。在PWA中，你可以使用WebP格式来存储和加载图像。它比JPEG或PNG格式更高效。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="My Image">
</picture>

步骤2：使用适当的UI和UX设计

一个出色的UI和UX设计可以使你的PWA更加醒目和吸引人。PWA中最重要的UI和UX设计是框架和组件。它们不仅使应用程序更容易使用，而且能够增加应用程序的现实感。

使用现代的UI框架

目前，有许多优秀的UI框架可以帮助你构建现代化的Web应用程序。例如，Bootstrap和Material UI提供了许多出色的UI组件，使得构建精美的用户界面变得容易。使用这些框架能够极大地提高你的应用程序的质量和可用性。

<div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

创建自定义组件

在构建复杂的应用程序时，除了使用现有的UI组件外，还需要定制自己的组件。你可以使用Web组件来创建自定义组件。Web组件是一种创建可重用组件的技术，可以通过特定的HTML、CSS和JavaScript标记化到页面中。使用自定义组件有利于提高代码的可重用性和应用程序的性能。

<app-header>My App</app-header>

<app-footer year="2019">© My App</app-footer>

步骤3：与硬件交互

原生应用程序通常会与硬件交互，例如相机、GPS和传感器等。在PWA中，你可以使用现代的Web API来实现这些交互。

访问用户位置

使用Geolocation API可以获取用户的位置信息。这可以使你的应用程序更加个性化，例如提供定位信息服务。

-- -------------------- ---- -------
-----------------------------------------
  -------- -- -
    ------------------------ --------------------------
    ------------------------- ---------------------------
  --
  ----- -- -
    ------------------ ------- ----------- -------
  -
--

使用摄像头

使用Media Devices API可以访问用户的摄像头和麦克风。这可以使你的应用程序有更多的可能性，例如视频聊天和截图等。

-- -------------------- ---- -------
-------------------------------------
    ------ -----
    ------ ----
  --
  ------------ -- -
    ---------------------- --------
    -- --- --- ------ -- ------- ----- -- -----
  --
  ------------ -- -
    ------------------ ------- -------- -------
  ---

步骤4：确保安全性和可靠性

在构建PWA时，你需要确保你的应用程序足够安全和可靠。安全和可靠的PWA应该具有以下特点：

HTTPS协议

HTTPS协议可以保证应用程序和服务器之间的通信安全。使用HTTPS协议可以避免中间人攻击和数据泄露等安全问题。

if (!location.protocol.startsWith('https')) {
  location.replace(`https:${location.href.substring(location.protocol.length)}`);
}

PWA更新

与原生应用类似，PWA应该可以自动更新。这可以保证用户总是使用最新的版本，并解决可能存在的安全问题。

const workboxSW = new self.WorkboxSW();
workboxSW.register();

数据缓存

使用IndexedDB API可以在本地存储大量数据，使得应用程序可用性更高。数据缓存可以使你的应用程序在离线模式下可用。

-- -------------------- ---- -------
----- ------- - ----------------------- ---

--------------- - -- -- -
  ------------------ ------- -----
--

----------------------- - ----- -- -
  ----- -- - --------------------
  ----- ----------- - -------------------------------------------- - -------- ---- ---
--

----------------- - -- -- -
  ----- -- - ---------------
  ----- ----------- - -------------------------------------- -------------
  ----- ----------- - ------------------------------------------------
  ----- ------- - ----------------- --- -- ------ --- ------- ---
  
  --------------- - -- -- -
    ------------------ ------ ------ -- --------
  --
  
  ----------------- - -- -- -
    ------------------- ----- -- --------
  --
--

步骤5：测试并部署

在PWA开发过程中，测试和部署是至关重要的一步。在测试过程中，你应该测试你的应用程序的各个方面，并协调放置到服务器上运行的所有必需文件。

使用Lighthouse测试PWA

Lighthouse是一种Google开发的测试工具，可以帮助你测试PWA的各个方面。Lighthouse可以测试PWA的性能、可访问性和最佳实践等方面。

将PWA部署到Web服务器

最后一步是将PWA部署到Web服务器上。如果你没有自己的服务器，可以使用GitHub Pages或Firebase等托管服务来部署你的PWA。

firebase login
firebase init
firebase deploy

结论

PWA技术基于现代Web技术开发，可以为用户带来原生应用的用户体验。本文介绍了5个关键步骤，让你的PWA接近原生应用。你应该始终关注提高性能、改进UI和UX设计、与硬件交互、确保安全性和可靠性，以及测试并部署你的PWA。这将使你的PWA成为一个普及的、可靠的和高效的Web应用程序。

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