web渐进式应用PWA

邱秋1年前 10:50

什么是渐进式 Web 应用

渐进式Web应用首先是一种应用,它根据设备的支持情况来提供更多功能,提供离线能力,推送通知,甚至原生应用的外观和速度,以及对资源进行本地缓存。

渐进式Web应用是一个网站,它使用了某些开发技术,使其体验比普通针对移动优化的网站体验更好。它使用起来就像是在使用一个原生应用一样

渐进式Web应用可能是一个不清晰的术语,而更好的定义是:它们是一种Web应用,利用现代浏览器特性(比如Web WorkerWeb应用清单),让移动设备对其“升级”,使之成为一等公民角色的应用程序。

解决方案 渐进式 Web App(PWA)

PWA 结合了最好的Web应用和最好的原生应用的用户体验。包含以下:

  • 渐进式 - 每个用户都可用而不管选择什么样的浏览器,因为它们是以渐进式增强为核心原则构建的。
  • 自适应 - 适应任何形态:桌面,移动设备,平板电脑或尚未出现的形式。
  • 不依赖网络连接 -Service Workers允许离线工作,或在低质量网络上工作。
  • 类似于应用程序 - 使用应用程序风格的交互和导航,感觉像一个应用程序。
  • 保持最新 - 得益于service Woker的更新进程,应用能始终保持最新状态。
  • 安全 - 借助于HTTPS,防止窥探,并确保内容没有被篡改
  • 可发现 - 受益于W3C清单和service Worker注册作用域,搜索引擎可找到它们,可以识别为“应用程序”。
  • 用户粘性 - 通过推送通知等功能让用户重返应用。
  • 可安装 - 允许用户在主屏幕上“保留”他们认为最有用的应用程序,而无需经过应用程序商店。
  • 可链接 - 通过URL轻松共享,不需要复杂的安装。

离线解决方案 Service Workers

渐进式Web应用的定义中有部分是这样说的:它必须支持离线工作。

由于允许Web应用程序脱机工作的是Service Worker,这意味着Service Worker是渐进式Web应用强制要求的部分。

1.使用 HTTPS

渐进式Web应用程序需要使用 HTTPS 连接。虽然使用HTTPS会让您服务器的开销变多,但使用HTTPS可以让您的网站变得更安全 ,如何给网站开启 https

2.创建一个应用程序清单(Manifest

应用程序清单提供了和当前渐进式Web应用的相关信息,如:

  • 应用程序名
  • 描述
  • 所有图片(包括主屏幕图标,启动屏幕页面和用的图片或者网页上用的图片)

本质上讲,程序清单是页面上用到的图标和主题等资源的元数据。

程序清单是一个位于您应用根目录的JSON文件。该JSON文件返回时必须添加Content-Type: application/manifest+json  或者  Content-Type: application/jsonHTTP头信息。程序清单的文件名不限,在本文的示例代码中为manifest.json

// manifest.json
{
  "dir": "ltr",
  "lang": "en",
  "name": "D.D Blog",
  "scope": "/",
  "display": "standalone",
  "start_url": "/",
  "short_name": "D.D Blog",
  "theme_color": "transparent",
  "description": "Share More, Gain More. - D.D Blog",
  "orientation": "any",
  "background_color": "transparent",
  "related_applications": [],
  "prefer_related_applications": false,
  "icons": [
    {
      "src": "assets/img/logo/size-32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "assets/img/logo/size-48.png",
      "sizes": "48x48",
      "type": "image/png"
    } //...
  ],
  "gcm_sender_id": "...",
  "applicationServerKey": "..."
}

程序清单文件建立完之后,你需要在每个页面上引用该文件:

<link rel="manifest" href="/manifest.json" />

以下属性在程序清单中经常使用,介绍说明如下:

  • short_name: 应用展示的名字
  • icons: 定义不同尺寸的应用图标
  • start_url: 定义桌面启动的URL
  • description: 应用描述,可以参考meta中的description
  • display: 定义应用的显示方式,有 4 种显示方式,分别为:
    • fullscreen: 全屏
    • standalone: 应用
    • minimal-ui: 类似于应用模式,但比应用模式多一些系统导航控制元素,但又不同于浏览器模式
    • browser: 浏览器模式,默认值
  • name: 应用名称
  • orientation: 定义默认应用显示方向,竖屏、横屏
  • prefer_related_applications: 是否设置对应移动应用,默认为 false
  • related_applications: 获取移动应用的方式
  • background_color: 应用加载之前的背景色,用于应用启动时的过渡
  • theme_color: 定义应用默认的主题色
  • dir: 文字方向,3 个值可选ltr(left-to-right),rtl(right-to-left)auto(浏览器判断),默认为auto
  • lang: 语言
  • scope: 定义应用模式下的路径范围,超出范围会已浏览器方式显示

manifest 注意事项

  • 站点离线存储的容量限制是5M
  • 如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程将视为失败,浏览器继续全部使用老的缓存
  • 引用manifest的 html 必须与manifest文件同源,在同一个域下
  • manifest中使用的相对路径,相对参照物为manifest文件
  • CACHE MANIFEST字符串应在第一行,且必不可少
  • 系统会自动缓存引用清单文件的HTML文件
  • manifest文件中CACHE则与NETWORK,FALLBACK的位置顺序没有关系,如果是隐式声明需要在最前面
  • FALLBACK中的资源必须和manifest文件同源
  • 当一个资源被缓存后,该浏览器直接请求这个绝对路径也会访问缓存中的资源。
  • 站点中的其他页面即使没有设置manifest属性,请求的资源如果在缓存中也从缓存中访问
  • manifest文件发生改变时,资源请求本身也会触发更新
3.创建一个 Service Worker

Service Worker是一个可编程的服务器代理,它可以拦截或者响应网络请求。ServiceWorker是位于应用程序根目录的一个个的JavaScript文件。 您需要在页面对应的JavaScript文件中注册该ServiceWorker:

//main.js
if ("serviceWorker" in navigator) {
  // 注册 service worker
  navigator.serviceWorker.register("/service-worker.js");
}

如果您不需要离线的相关功能,您可以只创建一个  /service-worker.js文件,这样用户就可以直接安装您的Web应用了!

Service Worker这个概念可能比较难懂,它其实是一个工作在其他线程中的标准的Worker,它不可以访问页面上的 DOM 元素,没有页面上的API,但是可以拦截所有页面上的网络请求,包括页面导航,请求资源,Ajax请求。

上面就是使用全站HTTPS的主要原因了。假设您没有在您的网站中使用HTTPS,一个第三方的脚本就可以从其他的域名注入他自己的ServiceWorker,然后篡改所有的请求——这无疑是非常危险的。

Service Worker会响应三个事件:installactivatefetch

Service WorkerWeb Worker不是同一个东西 ,不要搞混淆了

Install 事件

该事件将在应用安装完成后触发。我们一般在这里使用CacheAPI缓存一些必要的文件。

首先,我们需要提供如下配置

  • 缓存名称(CACHE)以及版本(version)。应用可以有多个缓存存储,但是在使用时只会使用其中一个缓存存储。每当缓存存储有变化时,新的版本号将会指定到缓存存储中。新的缓存存储将会作为当前的缓存存储,之前的缓存存储将会被作废。
  • 一个离线的页面地址(offlineURL):当用户访问了之前没有访问过的地址时,该页面将会显示。
  • 一个包含了所有必须文件的数组,包括保障页面正常功能的CSSJavaScript。在本示例中,我还添加了主页和logo。当有不同的 URL 指向同一个资源时,你也可以将这些 URL 分别写到这个数组中。offlineURL将会加入到这个数组中。
  • 我们也可以将一些非必要的缓存文件(installFilesDesirable)。这些文件在安装过程中将会被下载,但如果下载失败,不会触发安装失败。
// configuration
const version = "1.0.0",
  CACHE = version + "::PWAsite",
  offlineURL = "/offline/",
  installFilesEssential = [
    "/",
    "/manifest.json",
    "/css/styles.css",
    "/js/main.js",
    "/js/offlinepage.js",
    "/images/logo/logo152.png",
  ].concat(offlineURL),
  installFilesDesirable = [
    "/favicon.ico",
    "/images/logo/logo016.png",
    "/images/hero/power-pv.jpg",
    "/images/hero/power-lo.jpg",
    "/images/hero/power-hi.jpg",
  ];

installStaticFiles()方法使用基于Promise的方式使用CacheAPI将文件存储到缓存中。

// 安装 静态资源
function installStaticFiles() {
  return caches.open(CACHE).then((cache) => {
    // 缓存静态文件
    cache.addAll(installFilesDesirable);
    // 缓存主要的文件
    return cache.addAll(installFilesEssential);
  });
}

最后,我们添加一个install的事件监听器。waitUntil方法保证了service worker不会安装直到其相关的代码被执行。这里它会执行installStaticFiles()方法,然后self.skipWaiting()方法来激活service worker

// 程序安装
self.addEventListener("install", (event) => {
  console.log("service worker: install");
  // 缓存核心文件
  event.waitUntil(installStaticFiles().then(() => self.skipWaiting()));
});

Activate 事件

这个事件会在service worker被激活时发生。你可能不需要这个事件,但是在示例代码中,我们在该事件发生时将老的缓存全部清理掉了:

// 清理旧的缓存
function clearOldCaches() {
  return caches.keys().then((keylist) => {
    return Promise.all(
      keylist.filter((key) => key !== CACHE).map((key) => caches.delete(key))
    );
  });
}

// 程序激活
self.addEventListener("activate", (event) => {
  console.log("service worker: activate");
  // 删除旧的缓存
  event.waitUntil(clearOldCaches().then(() => self.clients.claim()));
});

注意self.clients.claim()执行时将会把当前service worker作为被激活的 worker。

Fetch事件该事件将会在网络开始请求时发起。该事件处理函数中,我们可以使用respondWith()方法来劫持HTTPGET请求然后返回:

  1. 从缓存中取到的资源文件
  2. 如果第一步失败,资源文件将会从网络中使用Fetch API来获取(和service worker中的fetch事件无关)。获取到的资源将会加入到缓存中。
  3. 如果第一步和第二步均失败,将会从缓存中返回正确的资源文件。
// 程序获取网络数据
self.addEventListener("fetch", (event) => {
  // 放弃非get请求
  if (event.request.method !== "GET") return;
  let url = event.request.url;

  event.respondWith(
    caches.open(CACHE).then((cache) => {
      return cache.match(event.request).then((response) => {
        if (response) {
          // 还回缓存文件
          console.log("cache fetch: " + url);
          return response;
        }
        // 发起网络请求
        return (
          fetch(event.request)
            .then((newreq) => {
              console.log("network fetch: " + url);
              if (newreq.ok) cache.put(event.request, newreq.clone());
              return newreq;
            })
            // 程序离线
            .catch(() => offlineAsset(url))
        );
      });
    })
  );
});

offlineAsset(url)方法中使用了一些helper方法来返回正确的数据:

// 判断是不是图片资源?
let iExt = ["png", "jpg", "jpeg", "gif", "webp", "bmp"].map((f) => "." + f);
function isImage(url) {
  return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false);
}

// 返回离线资源
function offlineAsset(url) {
  if (isImage(url)) {
    // return image
    return new Response(
      '<svg role="img" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title>offline</title><path d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>',
      {
        headers: {
          "Content-Type": "image/svg+xml",
          "Cache-Control": "no-store",
        },
      }
    );
  } else {
    // 返回页面
    return caches.match(offlineURL);
  }
}

offlineAsset()方法检查请求是否为一个图片,然后返回一个带有“offline”文字的SVG文件。其他请求将会返回offlineURL页面。Chrome开发者工具中的ServiceWorker部分提供了关于当前页面worker的信息。其中会显示worker中发生的错误,还可以强制刷新,也可以让浏览器进入离线模式。Cache Storage部分例举了当前所有已经缓存的资源。你可以在缓存需要更新的时候点击refresh按钮。

4:创建可用的离线页面

离线页面可以是静态的HTML,一般用于提醒用户当前请求的页面暂时无法脱机使用。然而,我们可以提供一些可以阅读的页面链接。

Cache API可以在main.js中使用。然而,该API使用Promise,在不支持Promise的浏览器中会失败,所有的 JavaScript 执行会因此受到影响。为了避免这种情况,在访问/js/offlinepage.js的时候我们添加了一段代码来检查当前是否在离线环境中:

// 加载脚本以填充脱机页列表
if (document.getElementById("cachedpagelist") && "caches" in window) {
  var scr = document.createElement("script");
  scr.src = "/js/offlinepage.js";
  scr.async = 1;
  document.head.appendChild(scr);
}

/js/offlinepage.js  中以版本号为名称保存了最近的缓存,获取所有URL,删除不是页面的URL,将这些URL排序然后将所有缓存的URL展示在页面上:

// 缓存名称
const CACHE = "::PWAsite",
  offlineURL = "/offline/",
  list = document.getElementById("cachedpagelist");

// 获取所有缓存
window.caches.keys().then((cacheList) => {
  // 按最近的查找缓存和排序
  cacheList = cacheList
    .filter((cName) => cName.includes(CACHE))
    .sort((a, b) => a - b);
  // 打开第一个
  caches.open(cacheList[0]).then((cache) => {
    // 获取已经缓存的页面
    cache.keys().then((reqList) => {
      let frag = document.createDocumentFragment();
      reqList
        .map((req) => req.url)
        .filter(
          (req) =>
            (req.endsWith("/") || req.endsWith(".html")) &&
            !req.endsWith(offlineURL)
        )
        .sort()
        .forEach((req) => {
          let li = document.createElement("li"),
            a = li.appendChild(document.createElement("a"));
          a.setAttribute("href", req);
          a.textContent = a.pathname;
          frag.appendChild(li);
        });
      if (list) list.appendChild(frag);
    });
  });
});

ServiceWorkerSPA中的应用

根据《深入浅出 Webpack》只需要安装serviceworker-webpack-plugin组件

//webpack config
import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';

plugins: [
  new ServiceWorkerWebpackPlugin({
    entry: path.join(__dirname, 'src/sw.js'),
  }),
],
//mian.js
import runtime from 'serviceworker-webpack-plugin/lib/runtime';

if ('serviceWorker' in navigator) {
  const registration = runtime.register();
}
//sw.js
{
  assets: [
    './main.256334452761ef349e91.js',
    ....
  ],
}

事实上能构建除想要的结果也能达到,离线缓存. 但是离线缓存文件除了图片等静态变的资源外, 每次打包构建的hash他也会随之改变, 不可能每次都手动修改静态文件资源列表. 于是:

推荐使用sw-precache-webpack-plugin

//webpack config
const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin");

plugins: [
  new SWPrecacheWebpackPlugin({
    cacheId: "appName",
    dontCacheBustUrlsMatching: /\.\w{8}\./,
    filename: "service-worker.js",
    minify: true,
    navigateFallback: "/index.html",
    staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
  }),
];
//main.js
if ("serviceWorker" in navigator && process.env.NODE_ENV == "production") {
  navigator.serviceWorker.register("/service-worker.js");
}

每次编译代码之后会自动生成静态资源列表.
可以打开浏览器的调试器Application->Service Workers看到 服务已经启动

在 Application -> Cache -> Cache Storage 里面可以看到缓存的静态文件

Service Worker本质上提供了类似 · 的功能,其作为Web Application以及Server之间的代理服务器,可以截获用户的请求。但是为了实现离线缓存功能,还需要结合Cache API
使用Cache Storage还需要注意以下几点:

  • 它只能缓存GET请求;
  • 每个站点只能缓存属于自己域下的请求,同时也能缓存跨域的请求,比如CDN,不过无法对跨域请求的请求头和内容进行修改
  • 缓存的更新需要自行实现;
  • 缓存不会过期,除非将缓存删除,而浏览器对每个网站Cache Storage的大小有硬性的限制,所以需要清理不必要的缓存。

在切换到Network->all就可以看到被缓存的文件的Size那栏 (from ServiceWorker不同于from disk cache)

为了验证网页在离线时能访问的能力,需要在开发者工具中的Network一栏中通过Offline选项禁用掉网络,再刷新页面能正常访问,并且网络请求的响应都来自Service Workers,正常的效果如图:

分享功能(Web Share API)

使用分享功能,需要满足以下几点:

  • 网站必须基于HTTPS
  • 注册Origin Trial,并将生成的token加入页面meta
  • 提供texturl中的一项,且值必须为字符串
  • 分享事件必须由用户事件触发
// CommonService.js
export const isSupportShareAPI = () => !!navigator.share;

export const sharePage = () => {
  navigator
    .share({
      title: document.title,
      text: document.title,
      url: window.location.href,
    })
    .then(() => console.info("Successful share."))
    .catch((error) => console.log("Error sharing:", error));
};

PWA 消息推送

PWA 消息推送(传送门)

本文于1年前 10:50发布在[code]分类下,当前已被围观1792次

相关标签:javascript

永久地址:https://www.chuchur.com/article/progressive-web-apps

版权声明:自由转载-署名-非商业性使用