pwa开发

渐进式Web应用程序（PWA）是跨越Web和应用程序之间界限的Web应用程序。 它们在您的浏览器中运行， 并且可以下载以作为独立应用程序运行。 有了Microsoft Edge浏览器的最新版本的支持，它们现在已成为Window生态系统的完整组成部分，诸如Twitter之类的大人物被实现为PWA，并且可以通过Windows Store获得。

去年 ，当微软宣布其使用PWA的方法的详细信息时，我首先着眼于在Windows中构建 PWA。 当时可用的工具主要是基于Web的，但是正在不断发展。 例如，已经与流行的编辑器建立了联系，并且Microsoft正在努力为PWABuilder基于Web的应用程序转换工具添加更多功能。 因此，值得一看的是您今天如何建立PWA。

[ Visual Studio Code入门 ，Microsoft的轻量级编辑器，适用于Windows，MacOS和Linux。 •了解最新版本的Visual Studio Code中的新增功能 。 | 通过InfoWorld的App Dev Report新闻通讯了解编程方面的热门话题。 ]

显然，微软希望使PWA成为其通用Windows平台（UWP）生态系统的一流公民。 但是目前，您仍然受到可用工具的限制。 您所需的一切都在那里，但尚未集成。 我希望将来的Visual Studio版本可以将所有内容整合在一起，从代码到清单再到测试。 在此之前，您需要整理自己的工具链，并确保其保持最新状态。

在本地运行PWABuilder

PWABuilder 可从GitHub获得 ，最初名为ManifoldJS，它支持构建跨平台的基于Web的应用程序。 尽管许多旧的命名仍在项目中，但它现在是一个更加复杂的应用程序，重点是使用Vue.js构建的PWA，并且可以作为完整的Web应用程序运行，也可以使用Node.js在本地运行。 一个基于Macintosh的桌面应用程序也正在开发中，尽管还没有准备好迎接黄金时段，但Visual Studio Code扩展也是如此。

安装本地版本非常容易 。 它可通过NPM（Node.js程序包管理器）获得，并将作为本地Web应用程序或命令行工具运行。 安装后，您可以从现有Web内容开始构建PWA。

如果要在本地使用Web UI，建议从GitHub获取最新版本。 如果克隆存储库，还可以对代码进行自己的更改。 这是一个相当活跃的存储库，可以选择发出自己的拉取请求，以将新功能添加到UI或基础PWABuilder代码中。

添加清单和服务人员

从Web UI构建PWA就像给PWABuilder一个URL一样容易。 它扫描站点并为PWA清单选择适当的详细信息。 您可以根据需要进行编辑，并添加适当的应用程序图标。 清单生成后，您将获得有关所有缺失元素的建议列表； 例如，对于Microsoft Store或Windows 10所需的图标，最好在完成清单之前将它们添加到您的站点，因为如果没有完整的清单和所需文件，则任何提交测试工具都会拒绝这些图标。

一旦构建了PWA清单，便会为您的应用程序提供一组建议的服务工作者。 需要下载PWABuilder中显示的代码，然后将其安装在您的网站上。 需要在PWABuilder外部开发更复杂的服务工作者，例如，为单页应用程序提供后端支持以及与应用程序API的网络连接，尽管您仍然可以使用它来打包和部署它们。 随应用程序一起在GitHub上提供了PWABuilder服务工作者的示例代码。

最简单的选择是将操作限制为已连接的应用程序，并在连接中断时提供脱机页面。 更复杂的选项包括在查看数据时缓存数据或预加载特定页面以供离线查看。

如果要通过PWABuilder定位Windows 10并使用本地安装，则需要安装Windows 10模块。 这可以使您访问UWP API，尽管显然它确实会减少应用程序的跨平台功能。 安装模块非常容易； 它托管在NPM上，因此您只需快速安装NPM，然后在Node.js设置中添加一个指向该模块的平台变量即可。

一旦构建了应用程序并在Service Worker中添加了对UWP API的调用，就可以从CLI快速发布到打包的应用程序，或者可以使用Web服务为站点创建.appx文件。 如果您打算通过Windows应用商店发布，则需要在Windows开发中心上拥有一个帐户，并且需要提前保留应用名称，以便PWA清单和商店列表匹配。

在PWA中使用Visual Studio代码

一个替代选项来自Visual Studio Marketplace中提供的另一个Visual Studio Code扩展。 安装后，PWA Tools扩展是为现有JavaScript应用程序构建PWA清单的快速方法。 除了帮助构造PWA清单外，它还提供了一组JavaScript代码段，这些代码段可以加快服务工作者和适当的事件处理程序的构建速度。

毫不奇怪，PWA工具和PWABuilder都针对Visual Studio Code程序员的编辑器，而不是针对完整的Visual Studio IDE。 微软一直在努力将Visual Studio Code定位为其主要JavaScript开发环境，因此拥有PWA支持是有意义的。

尽管您可以将Visual Studio Code的PWA扩展与原始JavaScript结合使用，但是在Vue.js或Angular上构建将获得更大的成功。 像这样的框架实现了通用的应用程序设计模式，比基本HTML / JavaScript应用程序更容易适应与服务工作者的合作。 我建议对您的PWA使用MVVM模式，因为它的声明式方法用于UI开发与PWA应用程序模型有很多共同点。

将Visual Studio与PWA一起使用

Visual Studio很快将对PWA提供本机支持，在构建UWP JavaScript应用程序时，可以选择使用beta版提供支持。 如果您运行的是Visual Studio的生产版本，则可通过Hosted Web App项目类型获得创建PWA所需的许多功能。 调试由Edge的独立DevTools处理，该工具可以附加到正在运行的PWA上，使您可以像浏览器中的任何应用程序一样对其进行调试。

可以帮助PWA开发的另一个工具是Webpack ，它将您的应用程序资源捆绑到一个JavaScript对象中。 通过将非代码元素绑定到代码中，不仅可以简化部署，还可以使代码更轻松地加载和使用这些对象。 Webpack不适合初学者-需要时间来掌握。 但是，一旦开始使用它，Webpack将成为您的Web应用程序开发工具链中必不可少的元素。 因为Webpack可以帮助您控制代码中使用的元素，所以Webpack不仅对构建PWA有用，而且对以TypeScript或Electron跨平台代码构建的复杂Web应用程序也很有用。

翻译自: https://www.infoworld.com/article/3304957/its-gotten-a-little-easier-to-develop-pwas-in-windows.html

pwa开发