开始学习PWA

2024-10-16

1385 字约 5 分钟

...

答：诞生于2015年左右的可以将 web app 包装成 app 的一种方案（理论上不是一种新技术），PWA 可以将 Web 和 App 各自的优势融合在一起：渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接。

以MDN-zh 来说：

就会在桌面上添加一个和原生应用一模一样的web app。

渐进式-适用于选用任何浏览器的所有用户，因为它是以渐进式增强作为核心宗旨来开发的。
自适应 -适合任何机型：桌面设备、移动设备、平板电脑或任何末来设备。
连接无关性-能够借助于服务工作线程在离线或低质量网络状況下工作。
类似应用 -由于是在 App Shell模型基础上开发，因此具有应用风格的交互和导航，给用户以应用般的熟悉感。
持续更新 -在服务工作线程更新进程的作用下时刻保持最新状态。
安全-通过 HTTPS 提供，以防止窥探和确保内容不被篡改。
可发现-W3C 清单和服务工作线程注册作用域能够让搜索引擎找到它们，从而将其识别为"应用”。
可再互动-通过推送通知之类的功能简化了再互动。
可安装-用户可免去使用应用商店的麻烦，直接将对其最有用的应用“保留”在主屏幕上。
可链接-可通过网址轻松分享，无需复杂的安装。

要实现以上功能最主要这的一部分就是： Web 应用程序清单

<link rel="manifest" href="manifest.webmanifest">

实际上 manifest 是一个json 文本，由以下几部分构成。

{
    "name": "PwaTest",
    "short_name": "PwaTest", 
    "start_url": ".",
    "display": "standalone",  
    "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:
     }, {
    "platform": "windows",
    "url": "https://apps.microsoft.com/store/detail/example-app1/id123456789"
     }]
  }