65.9K
CodeProject 正在变化。 阅读更多。
Home

构建业务智能渐进式 Web 应用程序

Bernardo Castilho
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2018年8月27日

CPOL
viewsIcon

15989

我们创建了一个 MyBI 示例应用，展示了使用 Wijmo 构建渐进式 Web 应用可以多么容易。在本文中，我们将描述我们如何将 MyBI 实现为一个常规的 Web 应用，然后展示我们如何将其升级为渐进式 Web 应用。

渐进式 Web 应用 (PWA) 是原生移动应用的实用替代方案。渐进式 Web 应用是一个行为类似于原生应用的常规 Web 应用。它们易于安装，打开速度快，并且可以在没有网络连接的情况下运行。将现有的 Web 应用升级为 PWA 非常简单，并且可以省去开发 Android 和 iOS 特定应用的麻烦。

在另一篇文章中，我们讨论了 PWA 的优势。从避免应用商店费用到消除开销，渐进式 Web 应用可以从多方面使您的业务受益。

渐进式 Web 应用最初是常规的现代 Web 应用。如果您的 Web 应用是响应式的、支持触控且高效的，那么您可以将其转换为渐进式 Web 应用。

我们创建了一个 MyBI 示例应用，展示了使用 Wijmo 构建渐进式 Web 应用可以多么容易。在本文中，我们将描述我们如何将 MyBI 实现为一个常规的 Web 应用，然后展示我们如何将其升级为渐进式 Web 应用。

下载 Wijmo

查看 MyBI 应用的实际效果

下载源代码

MyBI：使用 JavaScript 构建

我们选择使用 JavaScript 构建我们的 PWA。我们可以使用 Angular、React 或 Vue，但该应用程序足够简单，我们决定使用纯 JavaScript 来使应用程序尽可能小。我们的应用程序只有 20KB（未压缩），并且添加任何框架都会大大增加其体积。

该应用程序从服务器下载月度销售数据，进行汇总，并显示具有仪表板式摘要信息的卡片，内容包括销售量和收入。用户可以选择单个地区和产品，或查看汇总数据。做出选择后，卡片将更新。

这是该应用程序在桌面和手机上的样子

布局有一个固定的标题栏，其中包含应用标题和右侧的“选项”按钮；一个包含四个卡片的内容区域，显示各种类型的销售信息；以及一个带有快捷按钮的底部栏，允许用户直接导航到特定卡片。布局使用 flex 元素完成，因此自然具有响应性。

除了 Wijmo 徽标外，所有图像都来自 Material Icons 页面的 SVG 图标，这是一个高质量图标的绝佳来源。

数据源

MyBI 应用程序从作为 CSV 文件发布的 Google 表格获取数据。数据包含按地区和产品划分的月度销售和收入。我们决定使用 Google 表格和 CSV，因为这样可以轻松更新和加载数据。经理可以在浏览器中打开表格，更新数据，应用程序即可立即获得。无需保存或导出任何内容，CSV 格式紧凑且易于在客户端解析。

如果您想查看数据，可以 在此处下载。

应用程序启动时，它首先从本地存储加载数据，然后从网络加载。这使得启动时间快且更新实时。

应用程序将数据分配给一个 Model 类，该类对其进行过滤和汇总，以便可以向用户显示。Model 类具有以下成员：

Model 输入

  • rawData：来自服务器的 CSV 字符串数据
  • selectedRegion：选定地区的名称，为空则选择所有地区
  • selectedProduct：选定产品的名称，为空则选择所有产品

Model 输出

  • regions：包含所有地区的 CollectionView
  • products：包含所有产品的 CollectionView
  • filteredView：包含汇总和过滤后数据的 CollectionView
  • groupedView：包含汇总/过滤/分组后数据的 CollectionView

模型使用 CollectionView 类和一些 JavaScript，根据当前的选择过滤和汇总数据。应用程序足够简单，我们不需要使用像 Wijmo 的 OLAP 模块这样的大型 OLAP 工具。

该应用程序还有一个 App 类，它实例化一个 Model 并使用它来创建构成 UI 的卡片。

卡片

  • 选择包含两个组合框，允许用户选择地区和国家。它还包含按钮，以便在用户看不到其他卡片时导航到其他卡片。
  • 当前周期包含径向仪表，显示当前周期的销售单位和收入。仪表包含代表“目标区域”的范围，因此用户可以看到当前值。
  • 趋势包含随时间变化的销售单位和收入图表。图表包含趋势线，显示值是在上升还是下降。
  • 详细信息包含一个网格，按月显示销售单位和收入。网格包含数值的迷你图（spark-bars）。它兼具网格和图表的功能。

除了创建卡片外，App 类还使用 localStorage 来持久化应用程序状态。如果您选择了一个地区和一个产品，下次运行应用程序时将恢复该选择。

屏幕布局和行为

屏幕布局使用响应式 flex-box div 构建。它有一个包含应用程序标题的 header 元素，一个显示卡片的内容元素，以及一个包含导航按钮的 footer 元素。

在手机和其他小屏幕上，内容元素一次只显示一张卡片，用户可以使用滑动操作切换卡片。我们使用了 CSS Scroll Snap Points 来实现原生应用的效果。

这是一个 CSS Scroll Snap Points 的简单演示。这个 fiddle 应该能在除 Chrome 67 版本之外的所有现代浏览器中运行。下一版本的 Chrome 已经支持 CSS Scroll Snap Points。

如何将现代 Web 应用转换为渐进式 Web 应用

要将现代 Web 应用转换为 PWA，需要两项：

  1. 一个 manifest 文件，以便浏览器知道这是一个渐进式应用；以及
  2. 一个 service worker，以便它能在断开连接的情况下工作

步骤 1：添加 Manifest 文件

创建 manifest 文件的最简单方法是使用一个 manifest 生成器应用。

在运行此应用之前，您需要一张 512x512 像素的图片作为应用的图标。圆形图标显示效果最佳。

manifest 生成器允许您输入有关应用的某些基本信息，包括名称、简称、屏幕模式和主题颜色。点击“ICON”按钮上传图片，然后点击“GENERATE ZIP”按钮。manifest 生成器将创建一个 zip 文件，其中包含 manifest.json 文件和一个包含图片缩放版本的文件夹。

将 manifest.json 文件复制到应用的根文件夹，并将图片复制到应用的 images 或 resources 文件夹。确保 manifest 文件中的图片路径正确。在我们的例子中，我们将图标放在了 resources/icons 文件夹中，所以路径看起来像“resources/icons/icon-72x72.png”等。

将 manifest 文件的引用添加到应用的 main HTML 页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible"
content="ie=edge">
    <meta name="viewport" content="width=device-width,
initial-scale=1">

    <!-- SEO -->
    <title>MyBI | Business Intelligence PWA with Wijmo</title>
    <meta name="description" content="A BI Progressive Web
App with Wijmo.">

    <!-- PWA -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#fff">

步骤 2：添加 Service Worker

首先在应用的根文件夹创建一个“serviceWorker.js”文件。在向 service worker 文件添加任何内容之前，请通过编辑应用的 main HTML 页面将其添加到应用中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible"
content="ie=edge">
    <meta name="viewport" content="width=device-width,
initial-scale=1">

    <!-- SEO -->
    <title>MyBI | Business Intelligence PWA with Wijmo</title>
    <meta name="description" content="A BI Progressive Web
App with Wijmo.">

    <!-- PWA -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#fff">
    <script>
        // create service worker (to work off-line)
        if ('serviceWorker' in navigator) {
            try {
                navigator.serviceWorker.register('../serviceWorker.js');
                console.log('serviceWorker registered');
            } catch (error) {
                console.log('serviceWorker failed to register');
            }
        }
    </script>

请注意，脚本将仅在浏览器支持时添加 service worker。应用程序在不支持 PWA 的浏览器上仍将作为常规 Web 应用运行（请查看 浏览器对 PWA 的支持情况）。

接下来，实现 serviceWorker.js 文件。这只会在现代浏览器中执行，因此您可以使用 ES2017 功能，如 async、await 和 fetch。

我们的 serviceWorker 在应用程序安装时初始化一个静态缓存。

// serviceWorker.js

// initialize cache when app is installed
self.addEventListener('install', async e => {
    const cache = await caches.open('mybi-static');
    await cache.addAll([
        './',
        './styles/app.css',
        './scripts/app.js',
        './scripts/vendor/wijmo.theme.material.min.css',
        './scripts/vendor/wijmo-bundle.min.js',
        './resources/home.svg',
        './resources/current.svg',
        './resources/trends.svg',
        './resources/details.svg',
        './resources/options.svg',
        './resources/wijmo-logo.png'
    ]);
});

“self”属性返回对 worker 的引用。

该代码处理“install”事件以打开一个静态缓存并将所有静态资源添加到其中。下次应用程序启动时，所有必需的资源都将在本地可用。应用程序将立即运行，无需互联网连接。

接下来，我们必须处理“fetch”事件，以从静态缓存和网络返回资源。从网络检索的项目存储在动态缓存中，以便在没有网络连接的情况下供将来会话使用。

// intercept fetch requests sent from app to network
self.addEventListener('fetch', e => {
    const req = e.request;
    const url = new URL(req.url);
    e.respondWith(url.origin === req.origin
        ? cacheFirst(req)
        : networkFirst(req));
});

// fetch from cache if possible, fall back on network
async function cacheFirst(req) {
    const cachedResponse = await caches.match(req);
    return cachedResponse || fetch(req);
}

// fetch from network if possible, fall back on cache
async function networkFirst(req) {
    const cache = await caches.open('mybi-dynamic');
    try {
        const res = await fetch(req);
        cache.put(req, res.clone());
        return res;
    } catch (error) {
        return await cache.match(req);
    }
}

这个简单的实现完成了两个任务：

  1. 应用程序资源将在应用程序安装时从网络下载。之后，它们将从静态缓存中获取。
  2. 应用程序数据将在有连接的情况下从网络检索（这样我们就可以获取最新数据），在应用程序未连接时将回退到动态缓存。

处理请求是 serviceWorker 最重要也是最复杂的任务。您可以选择许多可能的策略，每种策略都有其自身的含义和权衡。

我们的 MyBI 应用程序现在是一个功能齐全的渐进式 Web 应用程序！您可以通过在 Chrome 中打开开发者工具窗口并选择“Application”选项卡来验证这一点。

从这个页面，您可以检查应用程序 manifest，将其安装到主屏幕，并检查/调试您的 service worker 和应用程序存储，包括缓存存储。

现在我们有了一个全新的 PWA，是时候使用 Lighthouse 来审计应用程序并确保它运行良好。要启动 Lighthouse 审计，请在 Chrome 中打开开发者工具窗口并选择“Audit”选项卡。

我们对渐进式 Web 应用审计感兴趣，但始终检查所有内容是个好主意，以防万一。审计运行大约需要一分钟，并在一个全面的报告中显示结果。

所有仪表都显示绿色，分数都很高！

仔细查看每个审计的详细信息非常重要，因为它们包含了改进应用的建议。有些建议微不足道，可以轻松解决（例如，忘记添加一个带有应用描述的 meta 标签，这对 SEO 很重要）。

性能审计

该应用在性能审计中获得 81 分，这是一个不错的成绩。与其他分数不同，这个分数可能会因网络性能变化而有所不同。如果您再次运行审计，分数可能会有所变化。

我们最初的分数低于此。通过添加常见的性能优化，如最小化、捆绑和 gzip 压缩，我们提高了分数。我们还将“defer”属性添加到所有脚本标签，以减少首次有意义的绘制所需的时间。

渐进式 Web 应用审计

该应用在渐进式 Web 应用审计中获得了满分 100 分，其中包括 11 项测试。

我们添加的 manifest 和 service worker 文件处理了主要的 PWA 要求。

其他要求与性能、响应式设计和安全性（使用 HTTPS）有关。我们认为这些是现代 Web 应用的要求，无论是否为 PWA。

后续步骤

在我们开始设计 MyBI 应用时，我们希望至少创建两个版本：一个 PWA（使用 Wijmo）和一个原生移动应用（使用 Xamarin）。我们刚刚完成了 Wijmo 版本。Xamarin 版本应该很容易构建，因为我们将使用相同的数据和应用程序逻辑以及类似的 IO 组件。

希望您喜欢这个 PWA 的快速入门介绍。如果您有任何问题、请求或建议，请随时与我们联系：wijmoexperts@grapecity.com。

© . All rights reserved.