/dev/bytemap.cc #

渐进式web应用介绍

Posted on Aug 9, 2023
Table of contents:

渐进式web应用介绍

PWA (Progressive web apps)指的是使用指定技术和标准模式来开发的 Web 应用，这同时赋予它们 Web 应用和原生应用的特性。

优势：

  1. 易于发现，与安装应用程序相比，访问一个网站显然更加容易和迅速，还可以通过链接来分享应用。
  2. 原生应用可以与操作系统完美整合，为用户提供了无缝的用户体验。可以在离线状态下运行。相较于使用浏览器访问，用户也可以通过点击主页上的图标来访问它们喜爱的应用。 PWA由多种一种技术创建，它代表了web应用程序的新理念，涉及一些特定的模式。它具有一下特征：
    • 可发现，可以通过搜索引擎发现
    • 可安装，可以出现在设备的主屏幕。
    • 可链接，可以通过URL分享。
    • 不依赖网络，可以在网速很差或者离线状态的情况运行。
    • 渐进式，在老版本的浏览器中仍旧可以使用，在新版本的浏览器上可以使用所以功能。
    • 可重入，无论何时有新的内容，都可以发送通知。
    • 响应式，在任何具有屏幕和浏览器的设备上可以正常使用
      • 手机
      • 平板
      • 笔记本
      • 电视
      • 冰箱
    • 安全，在用户、应用和服务器之间的连接是安全的，第三方无法访问敏感数据。

PWA能带来什么？

  1. 减少应用安装后的加载时间，使用service works来进行缓存，以此来节省带宽和时间。
  2. 按需更新（部分更新），当应用有可用的更新时，可以值更新发生改变的那部分内容。
  3. 外观和使用感受与原生平台更加融为一体，应用图标防止在主屏上。
  4. 凭借系统通知和推送消息与用户保持链接，对用户产生更多的吸引力，并且提高转换效率。

应用结构

网站渲染有两种方式，服务渲染（SSR）和客户端渲染（CSR）

  1. 服务器渲染，在不同页面导航都需要下载HTML，页面加载时间延长，总体感知上性能下降：每加载一个页面，都需要一个服务器请求往返时间。
  2. 客户端渲染，需要在导航到不同页面时几乎立即在浏览器中更新网站，但在开始时需要初始下载更多资源。首次访问网站速度较慢，后续访问速度要快得多。 App Shell概念

尽快加载最小用户界面，然后缓存它，以便后续访问时可以离线使用，然后再加载应用程序的所有内容。这样，下次有人访问时，UI立即从缓存加载；如果缓存不可用的话，就从服务器请求。

离线工作

使用Services Workr来实现应用离线工作，使用Service Workr来缓存应用文件，拦截下文件请求，优先从缓存获取。

service works有一些有用的事件。install、active、fetch，在install时候可以添加缓存文件。active可以用来清理缓存，fetch可以拦截请求。

应用安装

应用安装需要满足以下几个条件：

  1. 一份正确填写的网页清单
  2. 使用https协议
  3. 一个在设备上代表应用的图标
  4. 一个注册好的services work，可以让应用离线工作。
{
  // 网站应用的全名
  "name": "Notepad Progressive Web App",
  //  显示在主屏上的短名字
  "short_name": "Notepad PWA",
  // 一两句话解释你的应用的用途
  "description": "Progressive Web App that write note in web page.",
  // 一串图标信息：源 URL，大小和类型。多包含几个图标，这样就能选中一个最适合用户设备的。
  "icons": [
    {
      "src": "images/icons/icon-32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  //  启动应用时打开的主页
  "start_url": "/index.html",
  // 应用的显示方式；可以是 fullscreen、standalone、minimal-ui 或者 browser
  "display": "fullscreen",
  // UI 主颜色，由操作系统使用。
  "theme_color": "#B12A34",
  // 背景色，用于安装和显示启动画面时。
  "background_color": "#B12A34"
}

manifest.json包含在HTML文件的head段：

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