将 PWA 作为 Chrome 扩展程序发布

挑战

渐进式 Web 应用 (PWA) 本质上是一种可以离线运行的网站，可能包含类似原生应用的功能。但实际上，PWA 这个名字是告诉你的老板、投资者或其他任何人，这样他们就能理解你正在构建的 Web 应用。

你已经构建了一个 PWA，创建了 Service Worker，并遵循了所有指南。就我而言，这是一个Emojityper：一个简单的 PWA，你可以在其中输入文字并接收表情符号。它非常适合桌面应用，并且能够在不支持表情符号的编辑器中输入表情符号。⌨️🔜🤣

但是，一旦你构建了这种出色的体验，你就不仅限于在“网络”上发布它。在这篇文章中，我将详细介绍如何将Emojityper作为Chrome 扩展程序发布，并通过浏览器按钮访问。

为你的 PWA 创建扩展程序非常简单。为什么？因为如果你的 PWA 已经支持离线运行，你可以利用 Chrome 浏览器已经为用户缓存的功能。我们实际上只是构建一个小型嵌入器，将你的网站嵌入到 .js 文件中iframe。开始吧！🏁

扩展文件

我们的 Chrome 扩展程序主要由两个文件组成。首先是manifest.json描述一些元数据的文件：

{
  "name": "Emojityper",
  "version": "0.2",
  "description": "Type emoji on your keyboard!",
  "browser_action": {
    "default_popup": "embedder.html",
    "default_title": "Emojityper",
    "default_icon": {"128": "i128.png", "32": "i32.png", "16": "i16.png"}
  },
  "icons": {"128": "i128.png", "32": "i32.png", "16": "i16.png"}
  "manifest_version": 2
}

此清单还可以请求Chrome 扩展程序可用功能的额外权限。但是，由于我们只是嵌入了一个已经利用了 Web 平台功能的 PWA，因此您应该尽量避免这样做。

接下来，该embedder.html文件将您的 PWA 嵌入到iframe：

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background: #2c3e50;
    margin: 0;
    width: 380px;
    height: 200px;
  }
  iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>
</head>
<body>
  <iframe id="iframe" src="https://emojityper.com/?utm_source=chrome_ext"></iframe>
</body>
</html>

保存这两个文件💾⬇️📂在一个文件夹中（以及一些图标 - 、、i16.png或者如果可以的话可能更少），然后前往，启用开发者模式，然后选择“加载解压的扩展”。i32.pngi128.pngchrome://extensions

太棒了！现在你会看到 Emojityper 应用出现在你的扩展栏中，点击它就会出现我们之前看到的内容。

挑战

你的 PWA 可能刚刚开始运行良好。你嵌入了一个方便的弹出窗口，希望它能帮到你的用户。但有两个细微差别。

响应式设计

我们的扩展程序位于一个 380 像素宽 x 200 像素高的区域内。当然，您可以将其放大，但关键在于提供一个方便的小巧的用户界面。虽然浏览器标签页也可以缩小到这个尺寸——在我的 Mac 上，我能做的最小 Chrome 窗口是 400 像素宽 x 159 像素高——但您的用户可能希望在桌面上使用您的 PWA ，比如说，一个小型音乐控制器或其他“小部件”。🎶🔁

这一切基本上意味着你可能需要在响应式设计中添加一个“微”模式。Emojityper 通过添加 400px 或更低高度的 CSS，将混乱的页面变得简洁：

扩展特权

我们嵌入的 PWA 能够正常工作，因为您利用的是 Web 平台。但总会有一些扩展程序可以做到而 PWA 无法做到的事情。

在 Emojityper 中，点击“复制”按钮实际上应该关闭扩展程序窗口。这是通过让 PWA 查找其“父级”——容器/嵌入页面，并在复制完成后通知父级来实现的。在 Emojityper 中，我做了如下操作：

function notifyParentCopy() {
  // notify parent (for ext)
  if (window.parent) {
    window.parent.postMessage('copy', '*');
  }
}

在扩展中，我添加了一个包含的 JS 文件，用于监听消息并采取行动：

window.addEventListener('message', (ev) => {
  switch (ev.data) {
  case 'copy':
    window.close();
    break;
  default:
    console.warn('got unhandled message', ev.data);
  }
});

（因为我们的扩展实际上并不托管在域上，所以它可以与嵌入式系统进行通信而iframe不会面临任何安全挑战。）

检测“扩展模式”并提供额外功能是否值得？这取决于你。本文主要讨论如何将 PWA 带到用户身边，因此我认为只需添加少量额外功能就足够了（就像你可能不需要请求任何权限一样）。

感谢阅读！希望你对Emojityper及其Chrome 扩展程序有了更多了解。😂

您可以采用类似的方法，通过 Web 视图将您的 PWA 集成到 Android、iOS 或桌面原生应用中。您的 PWA 可以扩展其分发范围，并随处访问用户。🔜👥👏👩‍💻👨‍💻

文章来源：https://dev.to/chromiumdev/shipping-pwas-as-chrome-extensions-3l5c

将 PWA 作为 Chrome 扩展程序发布面临的挑战

将 PWA 作为 Chrome 扩展程序发布

挑战

扩展文件

挑战

响应式设计

扩展特权