当前位置：个人在线分享 > 渐进式 Web 应用（PWA）

渐进式 Web 应用（PWA）

作者 : admin 本文共9231个字，预计阅读时间需要24分钟 发布时间： 2024-04-8 共3人阅读

提示：看到我 请让我滚去学习

文章目录

  • 前言
  • 什么是PWA？
  • PWA 的体系结构
  • 制作可安装的 PWA
    • web 应用清单
      • background_color
      • description
      • dir
      • display
      • icons
      • lang
      • name
      • orientation
      • prefer_related_applications
      • related_applications
      • scope
      • short_name
      • start_url
      • theme_color
  • 离线和后台操作（可离线）
  • 网站和 worker
    • 离线操作
    • 判断是否是pwa打开
  • vue中使用pwa
  • 实时
  • 总结

前言

pwa展示网站：http://m.weibo.cn/

业务中产品提出要做一个类似于某音分享的一个功能，扒取代码发现使用了applink和pwa技术实现。

功能：移动端浏览器可通过‘添加到桌面’将页面添加到手机端，可快捷打开，每次打开唤起app。

链接如下：http://lf-dy-sourcecdn-tos.bytegecko.com/obj/byte-gurd-source/ies/fe/hts_godzilla/hts_godzilla_activities/pages/ios_desktop_guide/index.html?shortcut_backpage_url=https%3A%2F%2Fp3.douyinpic.com%2Faweme-client-static-resource%2Fug-guide-icon.pngtplv-noop.image&shortcut_icon_url=https%3A%2F%2Fp6.douyinpic.com%2Faweme-client-static-resource%2Flive_shortcut_icon.pngtplv-obj.image&shortcut_label=%E6%8A%96%E9%9F%B3%E7%9B%B4%E6%92%AD&shortcut_middle_page_title=%E6%B7%BB%E5%8A%A0%E3%80%8C%E6%8A%96%E9%9F%B3%E7%9B%B4%E6%92%AD%E3%80%8D%E5%88%B0%E6%A1%8C%E9%9D%A2&shortcut_schema=snssdk1128%3A%2F%2Fland_tab%3Ftabid%3Dhomepage_tablive%26enter_from%3Dlive_shortcut%26gd_label%3Dlive_shortcut%26launch_mode%3Dshortcuts&shortcut_bg_url=https%3A%2F%2Fp3.douyinpic.com%2Faweme-client-static-resource%2Flive_desktop_bg001%25202.png~tplv-obj.image

什么是PWA？

渐进式Web应用（Progressive Web App，PWA）是一个使用web平台技术构建的应用程序，但它提供的用户体验就像一个特定平台的应用程序。 在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验。
PWA 定义的一个方面就是它可以由浏览器提示以将其安装在设备上。安装后，PWA 对用户而言就是特定于平台的应用程序，是用户设备的一个永久特性，用户可以像启动其他任何应用程序一样直接从操作系统启动它。

我们可以将其总结如下：

  • 支持的浏览器会提示用户将 PWA 安装到设备上。
  • PWA 可以像特定平台的应用一样安装，并可以自定义安装过程。
  • 一旦安装，PWA 就会在设备上获得一个应用图标，与特定平台的应用程序一起。
  • 一旦安装，PWA 可以作为一个独立的应用程序启动，而不是在浏览器中的一个网站。

效果图（在pc端可通过右上角安装当前网页 ，移动端可通过浏览器的添加到桌面，将页面作为桌面应用添加到桌面），如下图：
渐进式 Web 应用（PWA）插图

PWA 的体系结构

渐进式Web 应用使用 Web 编程语言（HTML、CSS 和 JavaScript）编写，并使用 Web 服务器分发给用户。

若要使应用可供用户使用，请将其部署在可通过 HTTPS 访问的 Web 服务器上。 服务器包含：

后端代码：应用在连接到 Internet 时所需的终结点，用于检索可能存储在服务器上的数据库中的动态内容。
前端代码：在用户设备上安装应用所需的资源，例如 HTML、CSS 和 JavaScript 代码。
后端代码可以使用所选的服务器端语言，例如 ASP.NET、Java、Node.js或 PHP。 但请注意，根据要构建的应用，甚至可能不需要服务器端终结点。 在本教程中创建的 PWA 没有任何服务器端代码，因为应用以独占方式在安装它的设备上运行，并且不需要任何服务器端数据。

前端代码仅使用 HTML、CSS、JavaScript 和 JSON 清单。

使用 HTML 描述应用中的内容，例如用户界面中显示的文本、图像、文本字段或按钮。 然后，使用 CSS 在布局中组织 HTML 内容，并为元素提供样式。 使用 JavaScript 将用户交互添加到用户界面。 最后，使用 JSON 清单文件将应用程序描述到主机操作系统。

请注意，尽管前端代码使用设备的 Web 浏览器运行，但浏览器用户界面可能不可见，因为应用可以选择在独立窗口中运行。

除了用户界面代码，还可以使用 JavaScript，通过使用服务工作器文件，使应用程序更快、更可靠且独立于网络。 最后，前端代码还包含一个 JSON 清单文件，该文件将应用程序描述到主机操作系统。

下图显示了 PWA 的高级体系结构。 Web 服务器位于 PWA 的一侧，设备位于另一端。 设备包含前端代码，包括 HTML、CSS、JavaScript、服务辅助角色和清单：

渐进式 Web 应用（PWA）插图(1)

制作可安装的 PWA

web 应用清单

web 应用清单是一个 JSON 文件，它告诉浏览器 PWA 应该如何在设备上显示和表现。对于一个 web 应用程序来说，要成为一个 PWA，它必须是可安装的，而要成为可安装的，它必须包含一个清单。

这个清单是通过应用程序的 HTML 中的 元素引入的：

<!doctype html>
<html lang="zh">
  <head>
    <link rel="manifest" href="manifest.json" />
    
  </head>
  <body></body>
</html>

如果 PWA 有多个页面，每个页面都必须以以下方式引用清单。

清单包含一个单独的 JSON 对象，其中包含一些定义 PWA 外观或行为的成员集合。以下一个相当简单的清单，只包含两个成员：“name” 和 “icons”。

//manifest.json
{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply 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": "web"
    },
    {
      "platform": "play",
      "url": "http://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}

background_color

为 web 应用程序预定义的背景颜色。此值在应用程序样式表中可以再次声明。它主要用于在样式表加载之前，当加载 manifest，浏览器可以用来绘制 web 应用程序的背景颜色。在启动 web 应用程序和加载应用程序的内容之间创建了一个平滑的过渡。

description

提供有关 Web 应用程序的一般描述。

dir

指定名称、短名称和描述成员的主文本方向。与 lang 一起配置，可以帮助正确显示右到左文本。
可选值：

  • ltr (由左到右)
  • rtl (由右到左)
  • auto (由浏览器自动判断。

display

定义开发人员对 Web 应用程序的首选显示模式。
显示模式 描述 后备显示模式

  • fullscreen 全屏显示，所有可用的显示区域都被使用，并且不显示状态栏chrome。
  • standalone 让这个应用看起来像一个独立的应用程序，包括具有不同的窗口，在应用程序启动器中拥有自己的图标等。这个模式中，用户代理将移除用于控制导航的 UI 元素，但是可以包括其他 UI 元素，例如状态栏。
  • minimal-ui 该应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏。样式因浏览器而异。
  • browser 该应用程序在传统的浏览器标签或新窗口中打开，具体实现取决于浏览器和平台。这是默认的设置。 (None)

icons

指定可在各种环境中用作应用程序图标的图像对象数组。例如，它们可以用来在其他应用程序列表中表示 Web 应用程序，或者将 Web 应用程序与 OS 的任务切换器和/或系统偏好集成在一起。
图像对象可能包含以下值：
字段 描述

  • sizes 包含空格分隔的图像尺寸的字符串。
  • src 图像文件的路径。如果src是一个相对 URL，则基本 URL 将是 manifest 的 URL。
  • type 提示图像的媒体类型。此字段的目的是允许用户代理快速忽略不支持的媒体类型的图像。

lang

指定name和short_name成员中的值的主要语言。该值是包含单个语言标记的字符串。

name

为应用程序提供一个人类可读的名称，例如在其他应用程序的列表中或作为图标的标签显示给用户。

orientation

定义所有 Web 应用程序顶级的默认方向 browsing contexts.
方向可以是以下值之一：

  • any
  • natural
  • landscape
  • landscape-primary
  • landscape-secondary
  • portrait
  • portrait-primary
  • portrait-secondary

prefer_related_applications

指定一个布尔值，提示用户代理向用户指示指定的相关应用程序（请参见下文）可用，并建议通过 Web 应用程序。只有当相关的本地应用程序确实提供了某些 Web 应用程序无法做到的事情时，才应该使用它。

related_applications

指定一个“应用程序对象”数组，代表可由底层平台安装或可访问的本机应用程序 – 例如可通过 Google Play Store 获取的原生 Android 应用程序。这样的应用程序旨在替代提供类似或等同功能的 Web 应用程序 – 就像 Web 应用程序的本机应用程序版本一样。

"related_applications": [
  {
    "platform": "play",
    "url": "http://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "http://itunes.apple.com/app/example-app1/id123456789"
  }]

应用程序对象可能包含以下值：

  • Member Description
  • platform 可以找到应用程序的平台。
  • url 可以找到应用程序的 URL。
  • id 用于表示指定平台上的应用程序的 ID。

scope

定义此 Web 应用程序的应用程序上下文的导航范围。这基本上限制了 manifest 可以查看的网页。如果用户在范围之外浏览应用程序，则返回到正常的网页。

如果scope是相对 URL，则基本 URL 将是 manifest 的 URL。

short_name

为应用程序提供简短易读的名称。这是为了在没有足够空间显示 Web 应用程序的全名时使用。

start_url

指定用户从设备启动应用程序时加载的 URL。如果以相对 URL 的形式给出，则基本 URL 将是 manifest 的 URL。

theme_color

定义应用程序的默认主题颜色。这有时会影响操作系统显示应用程序的方式（例如，在 Android 的任务切换器上，主题颜色包围应用程序）。
兼容：
渐进式 Web 应用（PWA）插图(2)

离线和后台操作（可离线）

通常，网站非常依赖于可靠的网络连接和用户在浏览器中打开的页面。如果没有网络连接，大多数网站就无法使用，如果用户没有在浏览器标签页中打开网站，大多数网站就无法做任何事情。

然而，考虑以下场景：

音乐应用程序允许用户在线播放音乐，但可以在后台下载音乐，然后在用户离线时继续播放。
用户撰写一封长邮件，按下“发送”，然后失去网络连接。设备在网络再次可用时在后台发送邮件。
用户的聊天应用程序收到其中一个联系人的消息，尽管应用程序没有打开，但它在应用程序图标上显示一个标记，让用户知道他们有新的消息。
这些都是用户期待从已安装的应用程序中获得的功能。在这份指南中，我们将介绍一套技术使 PWA 能够：

即使设备网络连接不稳定，也能提供良好的用户体验
当应用程序未运行时更新其状态
通知用户在应用程序未运行时发生的重要事件
本指南介绍的技术包括：

service worker API
后台同步 API (en-US)
后台获取 API (en-US)
周期性后台同步 API (en-US)
推送 API
通知 API

网站和 worker

我们在本指南中讨论的所有技术的基础是 service worker。在这一部分，我们将提供一些关于 worker 的背景信息以及它们如何改变 Web 应用程序的架构。

通常，整个网站在一个线程中运行。这包括网站自己的 JavaScript 和所有渲染网站 UI 的工作。这样做的一个结果是，如果你的 JavaScript 运行了一些长时间的操作，网站的主 UI 会被阻塞，网站对用户来说似乎无响应。

service worker 是一种特别类型的用来实现 PWA 的 Web worker。像所有 web worker 一样，service worker 在与主 JavaScript 代码不同的另一个线程中运行。主代码创建 worker，向 worker 脚本传入 URL。worker 和主代码不能直接访问彼此的状态，但可以通过互发消息来进行通信。worker 可以用于在后台运行计算密集型任务：因为它们在一个单独的线程中运行，所以在应用程序中的主 JavaScript 代码（即实现应用程序 UI 的部分），可以保持对用户的响应。

所以 PWA 总是有一个高级别的架构，可分为：

主应用，包含 HTML、CSS 和实现应用程序 UI 的 JavaScript 部分（例如处理用户事件）
service worker，处理离线和后台任务
在本指南中，当我们展示代码样本时，我们将用像 // main.js 或 // service-worker.js 这样的注释来指出代码属于应用的哪个部分。

离线操作

离线操作允许 PWA 即使在设备没有网络连接时也能提供良好的用户体验。这是通过向应用程序添加 service worker 来实现的。

service worker 控制应用的部分或全部页面。在安装 service worker 后，它可以从服务器获取它控制的页面的资源（包括页面、样式、脚本和图片等），并将它们添加到本地缓存中。使用 Cache 接口将资源添加到缓存中。在 service worker 全局作用域内，可以通过 caches 属性访问 Cache 实例。

然后，每当应用程序请求一个资源（例如，因为用户打开了应用程序或点击了内部链接），浏览器在 service worker 的全局作用域内触发一个名为 fetch (en-US) 的事件。通过监听此事件，service worker 可以拦截请求。

fetch 事件的事件处理器会接收到一个 FetchEvent 对象，该对象：

使用 Request 实例提供对请求的访问
提供 respondWith() 方法来响应请求。
service worker 可以采用“缓存优先”策略来处理请求。在这种策略中：

如果请求的资源存在于缓存中，从缓存中获取资源并返回给应用。
如果请求的资源不在缓存中，尝试通过网络获取资源。
如果能获取到资源，将资源添加到缓存以备下次使用，并返回给应用。
如果无法获取资源，返回一些默认的备用资源。
以下代码示例显示了对此的一种实现：

// service-worker.js
const CACHE_NAME = 'ServiceWorker';
self.addEventListener('install', async event => {
try {
const cache = await caches.open(CACHE_NAME);
// 缓存资源
await cache.addAll([
'/index.html',
'/manifest.json',
'/images/logo_192.png',
'/images/logo_168.png',
'/images/logo_144.png',
'/images/logo_96.png',
'/images/logo_72.png',
'/images/logo_48.png'
]);
event.waitUntil(self.skipWaiting());
} catch (e) { }
});
self.addEventListener('activate', async event => {
const cacheList = await caches.keys();
// 清除旧的缓存数据
cacheList.forEach(cacheName => {
if (cacheName !== CACHE_NAME) {
caches.delete(cacheName);
}
});
event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', event => {
const req = event.request;
const url = new URL(req.url);
// 不缓存 跨域
if (url.origin !== self.origin) {
return;
}
if (url.request.includes('/api')) {
event.respondWith(networkFirst(req));
} else {
event.respondWith(cacheFirst(req));
}
});
// 网络优先
async function networkFirst (req) {
const cache = await caches.open(CACHE_NAME);
try {
const fresh = await fetch(req);
cache.put(req, fresh.clone());
return fresh;
} catch (e) {
const cached = await cache.match(req);
return cached;
}
}
// 缓存优先
async function cacheFirst (req) {
const cache = await caches.open(CACHE_NAME);
const cached = await cache.match(req);
if (cached) {
return cached;
} else {
const fresh = await fetch(req);
return fresh;
}
}

这意味着在许多情况下，即使网络连接不稳定，Web 应用程序也能正常运行。从主应用程序代码的角度来看，这完全是透明的：应用程序只需发出网络请求并获取响应。此外，由于 service worker 在单独的线程中运行，主应用程序代码可以保持对用户输入的响应，同时获取和缓存资源.

判断是否是pwa打开

function pwa (e) {
// 判断是否是pwa打开
if (window.matchMedia('(display-mode: standalone)').matches) {
console.log("🚀 ~ pwa打开")
} else if (window.navigator.standalone === true) {
console.log("🚀 ~ pwa打开")
} else {
console.log("🚀 ~ 网页打开")
}
}

vue中使用pwa

可自行下载npm包 —– @vue/pwa
具体方法自行参考官方文档

实时

早前不少开发者注意到在 iOS 17.4 测试版中，如果用户位于欧盟，则原本系统提供的 PWA 即渐进式网络应用程序相关功能不正常，最初以为这是 BUG。

不过随着 iOS 17.4 测试版更迭，这个 BUG 不仅没有修复，PWA 相关功能被删除的更多，这引起了一些开发者的担忧。

随后苹果证实该公司有意在欧盟删除 PWA 应用的支持，原因在于 iOS 需要在欧盟开放浏览器内核，如果要继续提供 PWA 支持的话，需要重新开发一个框架，但苹果认为 PWA 用户量太少，不值得重新开发框架。

现在这事儿已经有结果了，苹果在开发者网站发布更新：

此前，Apple 宣布计划在欧盟删除主屏幕 Web 应用程序功能，作为我们遵守 DMA 努力的一部分。与网络应用程序相关的复杂安全和隐私问题决定了删除该功能的必要性，以支持替代浏览器引擎，这需要构建 iOS 目前不存在的新集成架构。

我们已收到继续为 iOS 中的主屏幕 Web 应用程序提供支持的请求，因此我们将继续在欧盟提供现有的主屏幕 Web 应用程序功能。这种支持意味着主屏幕 Web 应用程序继续直接构建在 WebKit 及其安全架构上，并与 iOS 上本机应用程序的安全和隐私模型保持一致。

可能因 iOS 测试版在欧盟删除主屏幕 Web 应用程序而受到影响的开发者和用户可以预计，随着 3 月初 iOS 17.4 的发布，主屏幕 Web 应用程序的现有功能将会回归。

总结

  • pwa类似于快应用，但是不用去平台注册。
  • 依托于浏览器，兼容性较低，自测移动端chrome浏览器和safiri外其他大部分浏览器都不支持（具体看文档中的兼容表）
  • 写法简单，个人感觉和浏览器插件类似
  • 国内浏览器版本众多，生态差，除非有特殊业务需求，不建议使用
本站无任何商业行为
个人在线分享 » 渐进式 Web 应用（PWA）
admin

admin 钻石

分享到：

相关推荐

E-->