使用 PWA 技术打造具备混合应用特性的 H5 产品-JavaScript中文网-JavaScript教程资源分享门户

前言

在如今移动互联网盛行的时代，没有限制用户下载安装的 app 虽然数据本身就是开放的，但是用户的随便性，不再希望下载很多的 app，而希望能够打开某一个网页或者网页 app，直接完成他们需要完成的所有的任务，而 PWA 技术的出现，正好满足了这个需求，使得 H5 项目不再仅仅是网页而是具备了 app 的门槛。

本文主要介绍了如何使用 PWA 技术打造具备混合应用特性的 H5 产品。

PWA 简介

首先我们了解一下 PWA 技术。

PWA 全称是“Progressive Web App”，即渐进式 Web 应用。它是一种新的 Web 应用程序模型，能够通过现代 Web 的所有功能以及平台优势交付完整的 Web 应用程序。PWA 应用程序具有本地应用程序的一些功能，但是使用 Web 技术（HTML、CSS 和 JavaScript）构建。

使用 PWA 技术核心原因：解决了在 H5 项目中给用户需要进行安装、权限获取等步骤，而是能够提供更好的离线缓存、安装以及动态添加 app 图标等体验。

使用 PWA 技术打造 H5 产品

确定离线先缓存的资源

PWA 特点之一就是提供离线浏览及在网络差的情况下继续加载的功能。而 PWA 的实现离不开离线缓存的资源，所以我们首先遵循两点原则：

离线读取的资源一个必须有，例如 H5 项目主页面
离线读取的资源不能过多，太多的缓存,会使应用加载过慢，可以通过服务端配置是否使用缓存。

编写 manifest.json 配置

manifest.json 是 PWA 标准中描述应用信息的文件。使用它可以配置应用图标、应用名称，使得应用在安装后的主屏幕上拥有较好的用户体验。

manifest.json 样例如下

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

添加 Service Worker

为了使 PWA 在离线的情况下能够访问页面，需要添加 Service Worker。Service Worker 可以缓存所需的文件，以便在网络不佳的情况下可以快速显示出来。

Service Worker 的作用机制，主要是利用浏览器在网站页面上运行前执行的代码来让网站离线工作。紧跟着用了 cache 接口的控制对缓存进行管理。因为 Service Worker 在整个应用生命周期中都占用浏览器内存，所以一旦安装，就无法随着关闭窗口而清除，必须要通过卸载 Service Worker 的方式来刷新内存。

示例代码：

if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    console.log('ServiceWorker registration successful with scope:', registration.scope);
  }).catch(function(error) {
    console.log('ServiceWorker registration failed:', error);
  });
}

离线缓存配置

PWA 的重要特色之一就是缓存页面，通过离线缓存的资源文件，使得页面可以在离线状态下依旧可以访问。

示例代码：

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

注意： 由于 PWA 缓存使用的是 Service Worker ，所以在开发时，需清除缓存才能看到最新的效果。

PWA 相关 API 的应用

除了以上特色之外，PWA 中还提供了一系列的 API，通过他们可以实现更友好的用户交互操作。以下是其中一些相关 API 的示例代码：

Notification 示例代码

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

Add To Home Screen示例代码

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

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

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

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

结束语

通过本文，我们详细的了解了 PWA 的相关内容，以及如何使用 PWA 技术打造具备混合应用特性的 H5 产品，不仅如此，本文还详细介绍了 PWA 中与离线缓存、 Service Workers 、相关 API 等各方面的内容，相信你已经掌握了PWA 的基本知识，可以试着去完善你的 H5 产品啦。

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

使用 PWA 技术打造具备混合应用特性的 H5 产品

前言