1. 90前端首页
  2. 前端资讯

2019年谷歌开发者大会之Web的新功能

写在前面

2019年谷歌开发者大会 —— 实现适用于Web新功能 的半小时演讲中,Thomas Steiner 介绍了一些 Chrome 已经发布和即将支持的新 API。这些新增的 API 使得 web app 能够实现一些 native app 的功能,并同时坚持保护用户的安全性、隐私、信任及其他 web 核心原则。

Through our capabilities project, we want to make it possible for web apps to do anything native apps can, by exposing the capabilities of native platforms to the web platform, while maintaining user security, privacy, trust, and other core tenets of the web.
( https://developers.google.com... )

注:这些 API 有三种状态:

  • 已发布
  • Available as an origin trial:试验阶段,可以通过申请对应 API 的token,选择性得应用于自己的 web 中 (Origin Trials Guide)
  • Behind a flag:需要手动开启 Chrome 中对应 API 的 flag (Chrome Flag)

Async Clipboard API (images)

状态:Chrome 76 发布

作用:支持对于图片的复制粘贴

  • 复制

首先获得 Blob 对象格式的图片,然后将 ClipboardItem 这个对象作为数组项传入新的异步方法 navigator.clipboard.write() 中。目前只支持一次传递一张图片,未来会支持多张图片。

try {
  const imgURL = \'https://developers.google.com/web/updates/images/generic/file.png\';
  const data = await fetch(imgURL);
  const blob = await data.blob();
  await navigator.clipboard.write([
    new ClipboardItem(Object.defineProperty({}, blob.type, {
      value: blob,
      enumerable: true
    }))
  ]);
  console.log(\'Image copied.\');
} catch(e) {
  console.error(e, e.message);
}
  • 粘贴

通过 navigator.clipboard.read() 方法可获得一个由 clipboardItem 组成的数组。由于这些方法都是异步的,此处建议建议用 for ... of 循环 image 数组。

async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      try {
        for (const type of clipboardItem.types) {
          const blob = await clipboardItem.getType(type);
          console.log(URL.createObjectURL(blob));
        }
      } catch (e) {
        console.error(e, e.message);
      }
    }
  } catch (e) {
    console.error(e, e.message);
  }
}
  • 自定义粘贴和复制动作

可以通过监听 paste 事件自定义粘贴动作。注意要先preventDefault()

document.addEventListener(\'paste\', async (e) => {
  e.preventDefault();
  getClipboardContents();
});

同样的,通过监听 copy 事件可以自定义粘贴动作,此事件包含一个 clipboardData 的属性,可以从中获取剪贴板中的数据。

document.addEventListener(\'copy\', async (e) => {
  e.preventDefault();
  try {
    for (const item of e.clipboardData.items) {
      await navigator.clipboard.write([
        new ClipboardItem(Object.defineProperty({}, item.type, {
          value: item,
          enumerable: true
        }))
      ]);
    }
    console.log(\'Image copied.\');
  } catch(e) {
    console.error(e, e.message);
  }
});

Contact Picker API

状态:Available as an origin trial for Android

作用:使用户可以在 web app 中打开通讯录,分享指定的内容给选中的联系人

一个使 web app 更接近于 native app 的 API。通过 navigator.contacts.select() 这个异步方法打开通讯录列表,此方法包含两个参数:props,提前设定好的想要返回的属性数组;option,是否可以选择多个联系人的对象。

const props = [\'name\', \'email\', \'tel\'];
const opts = {multiple: true};

try {
  const contacts = await navigator.contacts.select(props, opts);
  handleResults(contacts);
} catch (ex) {
  // Handle any errors here.
}

此 API 的返回值为一个由联系人属性对象组成的数组。

[{
  \"email\": [],
  \"name\": [\"Queen O\'Hearts\"],
  \"tel\": [\"+1-206-555-1000\", \"+1-206-555-1111\"]
}]

Badging for App Icons

状态:Available as an origin trial

作用:在 web app 的图标上显示消息提醒

019年谷歌开发者大会之Web的新功能"

相比于发送推送通知,在 PWA 的图标上静默显示通知是更接近于原生应用的体验。尽管如此,Chrome 仍然建议不要根据 web app 的安装状态调用此 API,因为Badgin API 可以应用于任何浏览器希望显示标记的地方,所以不需要预设此 API 的作用条件。如果环境不支持,标记就不会显示。

设置/清除标记可以通过 window.ExperimentalBadge 对象,它有两个方法 set([number])clear() 分别用于设置指定数目的标记,和清除标记。

// In a web page
const unreadCount = 24;
window.ExperimentalBadge.set(unreadCount);

Web Share and Web Share Target API

状态:Launched

作用:使 web app 可以向其他 app 分享文件

019年谷歌开发者大会之Web的新功能"

仍然是一个改善 PWA 用户体验使其更接近于原生应用的 API。通过 navigator.canShare() 方法判断分享的文件是否可以分享以及获取分享数据。

目前支持分享的文件为 Image, video, audio 以及文本文件,未来会提供更多类型文件的支持。

if (navigator.canShare && navigator.canShare( { files: filesArray } )) {
  navigator.share({
    files: filesArray,
    title: \'Vacation Pictures\',
    text: \'Barb\\nHere are the pictures from our vacation.\\n\\nJoe\',
  })
  .then(() => console.log(\'Share was successful.\'))
  .catch((error) => console.log(\'Sharing failed\', error));
} else {
  console.log(\'Your system doesn\\\'t support sharing files.\');
}

此外可以通过 Web Share Target API 将你的 PWA 注册为可以被分享的目标,以前只有原生应用才可以被分享。注册方式为在你的 manifest.json 中添加一个 share_traget 对象,

\"share_target\": {
  \"action\": \"/share-target/\",
  \"method\": \"GET\",
  \"enctype\": \"application/x-www-form-urlencoded\",
  \"params\": {
    \"title\": \"title\",
    \"text\": \"text\",
    \"url\": \"url\"
  }
}

其中的 params 可以自定义为你已有的 share URL scheme,method 默认为 GET,也可将它设为 POST

当你的 web app 被指定分享某个文件并且 methodGET 时,浏览器会在 action 指定的 URL 中打开一个新窗口,并带上 params 中指定的一系列参数。

window.addEventListener(\'DOMContentLoaded\', () => {
  const parsedUrl = new URL(window.location);
  // searchParams.get() will properly handle decoding the values.
  console.log(\'Title shared: \' + parsedUrl.searchParams.get(\'title\'));
  console.log(\'Text shared: \' + parsedUrl.searchParams.get(\'text\'));
  console.log(\'URL shared: \' + parsedUrl.searchParams.get(\'url\'));
});

Native File System API

状态:Behind a flag

作用:PWA 可以读写本地文件系统了!

仍然是一个使 PWA 更像原生应用的 API。用户授予权限后,web app 通过此 API 可以即时读写用户设备上的本地文件,方法为 window.chooseFileSystemEntries()。默认只可选取一个文件,可以通过设置参数使其选取多个文件。

let fileHandle;
butOpenFile.addEventListener(\'click\', async (e) => {
  fileHandle = await window.chooseFileSystemEntries();
  // Do something with the file handle
});

fileHandle 为调用此 API 的回调,它包含各种和文件互动的属性和方法。比如读取文件。

const file = await fileHandle.getFile();
const contents = await file.text();

需要创建文件时,向 window.chooseFileSystemEntries() 中传入一个配置参数即可。

function getNewFileHandle() {
  const opts = {
    type: \'saveFile\',
    accepts: [{
      description: \'Text file\',
      extensions: [\'txt\'],
      mimeTypes: [\'text/plain\'],
    }],
  };
  const handle = window.chooseFileSystemEntries(opts);
  return handle;
}

打开文件目录枚举文件的写法为,在此 API 中传入一个 openDirectory 参数。

const butDir = document.getElementById(\'butDirectory\');
butDir.addEventListener(\'click\', async (e) => {
  const opts = {type: \'openDirectory\'};
  const handle = await window.chooseFileSystemEntries(opts);
  const entries = await handle.getEntries();
  for await (const entry of entries) {
    const kind = entry.isFile ? \'File\' : \'Directory\';
    console.log(kind, entry.name);
  }
});

写在后面

Google 团队在致力于弥合 PWA 和原生应用之间的间隙,力图拓展 web app 的边界使其尽可能地提供原生应用的用户体验,例如他们还新提出了 Barcode Detection API(识别二维码),短信/本地通知 push 等试验性功能。由此,在移动端开发各个框架的 PK 及大前端浩荡的潮流中, PWA 可以利用其支持所有平台,日益完善的 web api 以及较少开发成本等优势在轻量应用的开发中占据更重要的位置。

P.S 上述 API 主要参考自 Goole developer 官网 ,如果有理解错误的地方麻烦评论告诉我啊

P.P.S 这次大会听过之后觉得 Flutter 很好用的样子!

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021620292

展开阅读全文

发表评论

登录后才能评论