话不多说，先看东西————
在线预览地址：https://xion.eu.org/pages/calculator
渐进式网络应用程序
简单来说，渐进式网页应用程序（PWA）就是可以安装并离线使用的网页应用，当一个支持 PWA 的网站被安装到手机上之后，会如同 App 般在主屏幕上出现图标，不再以浏览器开启能够独立运作、提供离线使用、也不会有 URL Bar，以网页之姿享受如同 App 般的体验。 例如 Google Map 及 Facebook 就支持 PWA，可从分享菜单中选择加入主画面以安装，并点击主画面中的图标自己玩玩看 PWA呈现的效果。
虽然少了流畅的过场效果，但对用户来说如果功能上够用的话便不需要再下载动辄数百 MB 大小的App，可节省手机容量的使用。 而对开发者来说，前期也可以利用PWA来制作最小可行产品，仅需以 Javascript 开发就可快速做跨平台的验证，免除不同平台不同开发语言的困难、以及省去在 App Store 和 Google Play 中上架等手续。
将网站变成 PWA 需要
首先当然要先准备好一个网站，于是我就做了一个计算机网页。 做计算机的理由就是因为前端只有一个页面的需求，以专注在PWA的学习上（虽然我还是花不少时间做了一个整数计算机所有该有的功能），不然一旦变成PWA将会丧失URL Bar跟浏览器的上一页功能，原生App的从屏幕边缘向右滑动当然也是没有，如此一来页面的浏览就必须确保用户不会迷航，我觉得很麻烦（很懒）。
“网页应用”图标
为了在不同大小的设备上都够能有良好的呈现，请至少准备512×512及192×192大小的PNG图档各一张。 想要精准的控制各大小的呈现的话，可以另外指定其他大小。
网络应用清单
加入一个应用程序资料列表（Web App Manifest）文件在根目录： ，设定关于这个 PWA 的一些基本信息，详细字段请参考 The Web App Manifest。manifest.json
服务工作者
加入一个服务工作线程（Service Worker），这是一个能够在背景独立运行的 JS 脚本，提供包括推送通知、后台同步等功能，最重要的是这个 API 支持离线功能，让 PWA 更像是一支 App。
做法是在首页注册一个 Service Worker，启用后 PWA 的所有网络传送就会被它所管理，例如在离线的状态下就可以将网络请求转而调用快取。 因此首次安装 PWA 时有一个关键就是决定要被快取的档案及资源，这会在 Service Worker 脚本内的 事件时被触发，除了手动管理以外也可以藉由 Workbox 来帮忙。install
修改首页宣告支持
需要在 HTML 的 head 內加入至少以下 Tag：
<!-- Add link rel manifest -->
<link rel="manifest" href="/manifest.json">
<!-- Add iOS meta tags and icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#a0a0b9">
<meta name="apple-mobile-web-app-title" content="Calculator PWA">
<link rel="apple-touch-icon" href="/images/icon-256x256.png">
<!-- CODELAB: Add description here -->
<meta name="description" content="A simple Calculator app">
<meta name="theme-color" content="#a0a0b9">
最后在</body>标签前加入检查并注册 Service Worker 就大功告成啦~
<script>
// Register service worker.
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then((reg) => {
console.log('Service worker registered.', reg);
});
});
}
</script>
GitHub项目地址：https://github.com/ukyouz/PWA-Calculator
本文转载自：https://zhung.com.tw/project/pwa-calculator
