Progressive Web App 开箱看看渐进式增强到底有多强 (1)

Progressive Web App (PWA) 使用当下最新潮的 Web API，Progressive 是用渐进增强的概念来建立跨平台 Web 应用程序。

目的是让体验、效能接近原生 App

接下来的几篇文章，小编会带着大家一起开箱一波 PWA，这个在 2015 年，由两位大大弗朗西斯贝里曼 (设计师)、亚历克斯罗素 (Chrome 工程师) 所提出的概念到底在期待和表达些什麽，看看渐进式增强到底有多强。

什麽是 Progressive Web App?

Progressive Web App (PWA) 透过几种特殊浏览器技术的组合让 Web Apps 除了本身的优势外也能够拥有 native apps 的一些优点，简单来说将网站优化成 PWA 其实只会让网站更好更加分。

• Native App:
  • 完整整合硬体效能、离线资源来提供流畅的体验
  • 取得较不方便
• 网页:
  • 相对原生 App 无法完整使用硬体功能，但能运作在较低端的设备上
  • 唯一可以触及全平台的管道，容易被搜寻和取得
• Progressive Web App:
  • 本身是网页也容易被搜寻并透过连结被安装使用
  • 运用最新的网页技术更深度的整合硬体资源，功能只会越来越丰富

那 PWA 可靠吗? 这个问题其实是说 Service Worker 在各浏览器上的运作稳定了吗? 随着浏览器的技术进步，这个答案是肯定的。

举三个曾采用了 PWA 的大公司，可以发现 PWA 会以 Lite 的命名来做区分，目的其实就是增加 App 的普及性。

• IG Lite
• Twitter Lite
• Telegram Z

Progressive Web App 在商业上的帮助

对商业的网站来说，PWA 在不改变使用者习惯的前提下:

1. 透过 Responsive Design 来优化不同装置的体验
2. 提供了 Icon 让使用者不需要透过浏览器介面就能执行 Web Apps

在商业的应用上可以做到:

• 增加触及，Web 是唯一管道可以触及全部平台
• 比起网页可以增加更多互动
• 减少安装的容量损耗
• 对於较差的硬体能得到更好的效能
• "Lite" 轻量化的体验

小编趁这次开箱也翻译整理了乐天 24 优化站台成 PWA 後所带来的好处给大家参考。

怎麽实作一个 PWA?

PWA 提供了一种新的设计哲学，包含像是一些特殊的实作模式、API、配置。

• 推荐安装提示
• Manifest: PWA 配置档
• Service Worker 让网页支援离线快取及推播

因为这些实作，让 App 能够渐进式的增强，而一般使用者在正常使用上是分别不出来是不是 PWA。

一个完整的 PWA 主要包含以下功能，而 Chrome 也提供了 Lighthouse 来评估是否完整达到 PWA 的规范

• 可以离线运作 (Works Offline)
  • 用户端储存快取与离线後备页面
• 可以被安装 (Installable)
• 可以收推播 (Push Notifications)

底下列出更完整 PWA 的原则:

• Discoverable: 网页本来就能够被搜寻引擎爬取
• Installable: 需要完成适当配置让 App 能够被安装
• Linkable: 可以透过连结分享
• Network independent: 可以离线运作或是用快取运行
• Progressively enhanced: 渐进式的增强，浏览器越新支援的功能就越多
• Re-engageable: 可以接收推播互动
• Responsively designed: 透过 RWD 的设计能够让更多装置使用
• Secure: 必须要透过 https 提供安全的保证

PWA 渐进式增强

PWA 其实不是新的观念，经过 6 年的演变也真的跟名称一样一直都在进行渐进式的增强 (Progressive Enhancement)，举例来说，近几年 Chrome 也一直在不断进步，最近连 NFC 也能透过网页直接读取。

有个计划是 Project Fugo，会将开发中与即将开发的先进技术记录在这个专案进程中，这其中有个重点，就是有在这个专案中的功能，大家就先不要急着先自己实作。

• 通知数字 (Badging API)
• 位置存取 (Geo Location API)
• NFC Reader
• 唤醒锁维持萤幕长亮
• 分享内容 (Web Share API)
• 存取通讯录 (Contact Picker API)
• 定期背景同步 (Periodic Background Sync API)
• 装置闲置侦测 (Idle Detection API)
• 显示通知 (Notification API)
• 程序快速启动选单 (App Shortcut)

PWA 有什麽好处，值得我们将站台升级吗?

• 即开即用: 安装後能透过 Service Workers 快取资源，减少载入时间有机会做到即开即用
• 更版升级快速: 可以做到只更新有改变的相关资源，比起 Native app 相对每次更新的修改都较小
• 提升操作体验: Icon、启动画面、全萤幕执行的操作体验都更接近 Native App
• 更好的互动: 透过接受推播能够有更好的互动体验

将 PWA 上架到市集

目前 Progressive Web App 能透过工具搭配几乎零开发成本的打包就能上架到以下市集:

• Play Store (Chrome OS)
• Micorsoft Store
• Samsung Galaxy Store

既然可以直接安装为什麽要上架到市集?

• 可以容易搜寻
• 更高的熟悉与信任度
• PWA 打包几乎没有成本

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/