什么是 PWABuilder-EdgeExtension?
PWABuilder-EdgeExtension 是一个可帮助你将你的网站转换成 PWA 的 VS Code 扩展程序，同时在微软 Edge (Chromium 版本) 上运行的 npm 包。
这个包灵活易用，是一款强大的工具，可让你将现有的网站转换成 PWA。这意味着，你可以在桌面端、移动端以及浏览器中使用 PWA 中的所有功能。
在接下来的内容中，我们将学习如何安装和使用 PWABuilder-EdgeExtension。
安装
要安装 PWABuilder-EdgeExtension，你需要首先安装微软 Edge Chromium 浏览器，然后在你的命令行终端中运行以下命令：
npm install -g pwabuilder-edgeextension
使用
安装完成之后，我们可以开始使用 PWABuilder-EdgeExtension。首先，我们需要定义一些配置:
const Builder = require('pwabuilder-edgeextension');
const builder = new Builder();
const options = {
folder: './build',
name: 'CoolPWAFolder',
url: 'https://coolpwa.com'
};在这个配置中，我们指定了以下属性：
folder: 将要转换为 PWA 的网站的构建文件夹的路径。name: PWA 的名称。url: 网站的 URL。
接下来，我们需要执行命令，命令将会生成一个 *.msixbundle 文件（其扩展名为 .msixbundle），这个文件可以在 Microsoft Store 中上传并分享。
builder.build(options).then((bundleFile) => {
console.log(`Your MSIX appxbundle is at ${bundleFile}`);
});在生成的 .msixbundle 文件之后，我们需要使用 PowerShell 命令，将这个文件签名。你也可以使用你自己的证书，如果你是企业用户的话。
Add-AppxPackage -Path .\CoolPWAFolder.msixbundle -DependencyPath .\Microsoft.VCLibs.140.00.UWPDesktop_14.0.29231.0_x64__8wekyb3d8bbwe.appx -Stronger
完成这一步之后，你的 PWA 扩展程序就完成了。
示例代码
下面是一个完整的示例代码，它可以将你的网站转换为 PWA：
-- -------------------- ---- -------
----- ------- - ------------------------------------
----- ------- - --- ----------
----- ------- - -
------- ----------
----- ----------------
---- ---------------------
--
---------------------------------------- -- -
----------------- ---- ---------- -- -- ----------------
---结论
在这篇文章中，我们学习了如何使用 npm 包 PWABuilder-EdgeExtension，将网站转换成 PWA 扩展。我们已经学习了安装、配置和使用的步骤，并且展示了一个示例代码来方便你更好的理解这个过程。
通过使用 PWABuilder-EdgeExtension，我们可以更快速和轻松地将我们的网站转换成 PWA 扩展，在其上获得更好的用户体验，同时也可以获得更多的访问量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005585281e8991b448d587b