2024年了我才开始学习PWA
1. 什么是PWA （Progressive web app）？
答： 诞生于2015年左右的 可以将 web app 包装成 app 的一种方案（理论上不是一种新技术），PWA 可以将 Web 和 App 各自的优势融合在一起：渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接。
以MDN-zh 来说：
就会在桌面上添加一个和原生应用一模一样的web app。
2. 优点有哪些？
- 渐进式-适用于选用任何浏览器的所有用户，因为它是以渐进式增强作为核心宗旨来开发的。
- 自适应 -适合任何机型：桌面设备、移动设备、平板电脑或任何末来设备。
- 连接无关性-能够借助于服务工作线程在离线或低质量网络状況下工作。
- 类似应用 -由于是在 App Shell模型基础上开发，因此具有应用风格的交互和导航，给用户以应用般的熟悉感。
- 持续更新 -在服务工作线程更新进程的作用下时刻保持最新状态。
- 安全-通过 HTTPS 提供，以防止窥探和确保内容不被篡改。
- 可发现-W3C 清单和服务工作线程注册作用域能够让搜索引擎找到它们，从而将其识别为"应用”。
- 可再互动-通过推送通知之类的功能简化了再互动。
- 可安装-用户可免去使用应用商店的麻烦，直接将对其最有用的应用“保留”在主屏幕上。
- 可链接-可通过网址轻松分享，无需复杂的安装。
要实现以上功能 最主要这的一部分就是： Web 应用程序清单
<link rel="manifest" href="manifest.webmanifest">
实际上 manifest 是一个json 文本， 由以下几部分构成。
- background_color
- categories
- description
- display
- display_override
- file_handlers
- icons
- id
- launch_handler
- name
- orientation
- prefer_related_applications
- protocol_handlers
- related_applications
- scope
- screenshots
- serviceworker
- share_target
- short_name
- shortcuts
- start_url
- theme_color
3. Demo:
{
"name": "PwaTest",
"short_name": "PwaTest", // 名字太长展示不下的时候使用
"start_url": ".",
"display": "standalone", // fullscreen→ standalone （该应用程序的外观和感觉就像一个独立的应用程序。）→ minimal-ui （该应用程序的外观和感觉就像一个独立的应用程序，但将具有用于控制导航的最小 UI 元素集。这些元素会因浏览器而异。 ）→ browser，如果未指定成员，browser则为默认值。
"background_color": "red", // 加载过程中 的背景色
"description": "A readable Hacker News app.",
"icons": [
{
"src": "images/touch/homescreen48.png",
"sizes": "48x48", // 系统会选取最合适的图标展示在相应位置上
"type": "image/png"
},
{
"src": "images/touch/homescreen72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/touch/homescreen96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/touch/homescreen144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "images/touch/homescreen168.png",
"sizes": "168x168",
"type": "image/png"
},
{
"src": "images/touch/homescreen192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"related_applications": [
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb”。// 可做为当前pwa网站的替代品 比如谷歌商店的app
}, {
"platform": "itunes",
"url": "https://itunes.apple.com/app/example-app1/id123456789"
}, {
"platform": "windows",
"url": "https://apps.microsoft.com/store/detail/example-app1/id123456789"
}]
}
以上, 就能够做到把web 应用“伪装” 成 native app （可跨平台）
那么随之而来的就是 web app 和 原生的差距： 白屏， 网络等问题 导致 pwa 应用响应速度没有原生快。 但是 《最令人兴奋的功能》：离线使用
实现方案： Service worker
4. Service worker
Service worker 实际上是一段脚本，在后台运行。作为一个独立的线程，运行环境与普通脚本不同，所以不能直接参与 Web 交互行为。Service Worker 的出现是正是为了使得 Web App 也可以做到像 Native App 那样可以离线使用、消息推送的功能。
Service worker 是一个 ** <<注册在指定源和路径下>>** 的事件驱动 worker。控制关联的页面或者网站，拦截并修改访问和资源请求，<<细粒度地>> 缓存资源。 并在 https 下生效。
名字中 的service 就已经表明 他的角色定位是一个服务器。 只不过是运行在浏览器和服务器之间的位置。服务器的功能主要是提供api/ 资源 访问。 同理 service Worker 控制关联的页面或者网站，拦截并修改访问和资源请求。 同时也是 多页面通信的 一种不错的方式。
用户首次访问 service worker 控制的网站或页面时，service worker 会立刻被下载。
之后，在以下情况将会触发更新：
- 一个前往作用域内页面的导航 ( 用户导航至您的站点时，浏览器会尝试在后台重新下载定义 SW 的脚本文件。 如果 SW 文件与其当前所用文件存在字节差异，则将其视为新 SW。)
- 在 service worker 上的一个事件被触发并且过去 24 小时没有被下载
使用注意事项：⚠️
- Service Worker 也有生命周期
那些大厂在使用这个：
转载自:https://juejin.cn/post/7358647510518693915