渐进式 web 应用程序

    渐进式 web 应用程序主要由两种技术组成：Service Worker 和 Manifest。Dojo 的构建命令通过 的 pwa 对象支持这两种技术。

    Manifest 在一个 JSON 文件中描述一个应用程序，并提供了一些详细信息，因此可以直接从万维网安装到设备的主屏幕上。

    • mobile-web-app-capable="yes": 告知 Android 上的 Chrome 可以将此应用程序添加到用户的主界面上。
    • apple-mobile-web-app-capable="yes": 告知 iOS 设备可以将此应用程序添加到用户的主界面上。
    • apple-mobile-web-app-status-bar-style="default": 告知 iOS 设备，状态栏使用默认外观。
    • apple-touch-icon="{{icon}}": 相当于 Manifest 中的 icons，因为 iOS 当前没有从 Manifest 中读取 icons，所以需要为 icons 数组中每张图片单独注入一个 meta 标签。

    Service worker

    Service worder 是一种 web worker，能够拦截网络请求、缓存和提供资源。Dojo 的 build 命令能够自动构建功能全面的 service worker，它会在启动时激活，然后使用配置文件完成预缓存和自定义路由处理。

    例如，我们编写一个配置文件来创建一个简单的 service worker，它会缓存除了 admin 包之外的所有应用程序包，也会缓存应用程序最近访问的图像和文章。

    .dojorc

    1. {
    2.     "build-app": {
    3.             "serviceWorker": {
    4.                 "cachePrefix": "my-app",
    5.                 "excludeBundles": ["admin"],
    6.                 "routes": [
    7.                     {
    8.                         "urlPattern": ".*\\.(png|jpg|gif|svg)",
    9.                         "strategy": "cacheFirst",
    10.                         "cacheName": "my-app-images",
    11.                         "expiration": { "maxEntries": 10, "maxAgeSeconds": 604800 }
    12.                     },
    13.                     {
    14.                         "strategy": "cacheFirst",
    15.                         "expiration": { "maxEntries": 25, "maxAgeSeconds": 86400 }
    16.                     }
    17.                 ]
    18.             }
    19.         }
    21. }

    预缓存

    precache 选项使用以下选项控制预缓存行为：

    运行时缓存

    除了预缓存之外，还可以为特定路由提供缓存策略，以确定它们是否可以缓存以及如何缓存。routes 选项是一组包含以下属性的对象：

    目前支持四种路由策略：

    • networkFirst 尝试通过网络加载资源，如果请求失败或超时才从缓存中获取资源。对于频繁更改或者可能频繁更改（即没有版本控制）的资源，这是一个很有用的策略。
    • cacheFirst 优先从缓存中加载资源，如果缓存中不存在，则通过网络获取。这对于很少更改或者能缓存很长一段时间的资源（受版本控制的资源）来说是最好的策略。
    • networkOnly 强制始终通过网络获取资源，对于无需离线处理的资源是很有用的策略。