Progressive Web App 跨平台安装上架 (30)

Progressive Web App 跨平台安装

Progressive Web App 本身就具有能被安装的特性，此外也能够透过 Bubblewrap 或是 PWABuilder 封装上架到各平台的市集。

1. 透过能安装 Chrome 的平台，只要符合安装条件就能够被安装
2. 透过 Google 开发的 Bubblewrap 将 PWA 打包成 .aab 或是 .apk
3. 透过 Microsoft 开发的 PWABuilder (已整合 Bubblewrap)，将 PWA 打包成可以上架到 Windows、Google、Samsung 市集中的档案

Progressive Web App 打包工具介绍

为什麽需要使用打包工具? 是因为现有解决方案像是 WebView 实际上还是无法取代浏览器。

• 网页在 App 上的功能会被 webview 限制
• 写 cookie 要担心 APP 实作怕出问题可能连 iFrame 也舍弃不用

传统的 Cordova、Electron 这类工具目的就是在克服以上这些问题，但变成需要维护更多东西。

近几年出现的 Bubblewrap 则是基於 PWA 的标准去封装，微软的 PWA（Progressive Web Apps）团队则进一步与 Google 进行合作，让 PWABuilder 工具可以在底层执行 Google 的 Bubblewrap，可以产生 Google Play Store 的 App 封装。

• Google Bubblewrap: 透过 Trusted Web Activity 容器将 PWA 显示在 Android App 中
• Microsoft PWABuilder
  • Android 市集: 端整合了 Bubblewrap
  • Windows 市集: 整合了自有平台，以及利用了 Edge 底层也是 Chromium 的特性去支援
  • Samsung 市集: 根据小编开发 Tizen 的经验，猜测是针对底层也是 Chromium 的市集上架

对渐进式增强的 PWA 来说，新功能只需要开发者简单实作就能加入，透过 PWABuilder 封装的 Web App 将可以支援:

• web shortcut 标准
• Andorid 的状态列
• 启动画面外观
• 通知推播

对微软、Google 来说，这使得 PWABuilder 对开发者来说更有吸引力，最终就能达到增加市集内有针对平台进行优化的 web app 数量。

Windows 市集中的 PWA (图片来源: https://blog.pwabuilder.com/)

Bubblewrap

Bubblewrap 是一套能将符合 Trusted Web Activity 标准的 App 打包成 APK 或是 AAB 的封装档的工具。

Trusted Web Activity 则是一个开放标准，允许浏览器提供完全相容 Web 平台的容器，开发人员可以使用 Trusted Web Activity 作为容器来包含 PWA 作为 Android 应用程序的启动 Activity。

透过容器在 Android APP 中呈现 PWA 的技术可以做到

• 浏览器以全萤幕的方式呈现 PWA
• 确保 Trusted Web Activity 与底层浏览器的功能和 API 具相容性

Trusted Web Activity 原则上也是要遵守 PWA 的安装准则，符合之後就能够透过 Bubblewrap 这套工具透过 Command Line 打包成 .aab 或是 .apk 的封装档。

PWABuilder

PWABuilder 不仅包含了 Bubblewrap 的实作，更进一步时做了 manifest 的效果预览，也整合了 Android、Windows、Samsung 市集的封装方式，让 PWA 的开发人员只需要专注於一种写法就能够上架到三种平台。

1. 将 manifest 视觉化，能够及时预览 manifest 的效果

manifest 视觉化 (图片来源: https://blog.pwabuilder.com/)

2. 将符合 PWA 标准的程度量化，透过准则和分数来让开发人员优化 PWA

量化 PWA 标准 (图片来源: https://blog.pwabuilder.com/)

3. 透过 PWABuilder 也能够帮助开发者将现有的网站转换成 Progressive Web Apps

Progressive Web App 的未来

小编其实从十年前就开始接触 Web App 的概念，6 年前开始工作後也开始持续关注 PWA 的概念，这几年来看着采用 HTML5 的技术电视平台、Firefox OS 觉得都算是失败的作品，直到近两年开始看到 Outlook、Telegram 的进步才又有了信心，去年微软的 Edge 也正式加入 Google 阵营，可以说是为 PWA 的发展又推进了一步。

随着元件化、模组化的概念发展，小编认为未来前端会趋向不写程序的状况，只需要透过模组的组合还有元件的样式调整就能够组成前端的 Web App，PWA 也会随着 Chrome 的进步而越来越强大。

Progressive Web App 从名字就可以看出来有三个重点

• Progressive: 逐渐进步
• Web: 网路技术
• App: 应用程序

底下这个网站记录了 Chrome 团队即将开发的新功能和潜在功能的完整列表，就让我们继续期待 PWA 接下来的发展吧!
https://fugu-tracker.web.app/