百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

2024 年 PWA 无法与 Native 媲美的 7 个特性

zhezhongyun 2025-02-16 23:43 17 浏览

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

最近读到一篇关于 PWA 的文章《 WHAT WEB CAN DO TODAY?》，加上本身自己对 PWA 这个专题也比较感兴趣，所以抽空梳理了 PWA 目前主流功能以及简单功能描述，文章已经发表在《2024 年 PWA 不温不火，40 + 逆天特性已出世！》。

本文重点列举 PWA 目前还没有实现的主流功能，包括：Contacts API、SMS/MMS、NFC、Ambient Light、Inter-App Sharing、Geofencing API、Proximity Sensors 等等。

Contacts API

Contacts API 为特权 Web 应用程序提供了对系统中维护的用户地址簿的编程访问权限。截至 2020 年初，唯一的实现可在 Google Chrome 80+ 中使用。 Contacts API 专门针对选择仅在客户端应用程序中使用的联系人的只读场景，而且该 API 不支持任何修改。 Contacts API 调用平台级联系人选择器，并仅向查询应用程序公开用户选择的数据。仅适用于 Android

Contacts API 的初始版本是在 2013 年为 Firefox OS 创建的，并在 Firefox 中实现，其允许通过类似 vCard 的格式读取和修改联系人， 但由于实施缺陷很快就被禁用了。

无论是否以编程方式访问 Contacts API 的可用性，Web 应用程序都可能要求借助表单元素的 autocomplete 属性值从设备地址簿中预填充表单数据。

function readContacts() {
  var api = (navigator.contacts || navigator.mozContacts);
  if (api && !!api.select) {
    // 新的 Chrome API
    api.select(['name', 'email'], {multiple: true})
      .then(function (contacts) {
        consoleLog('Found' + contacts.length + 'contacts.');
        if (contacts.length) {
          consoleLog('First contact:' + contacts[0].name + '(' + contacts[0].email + ')');
        }
      })
      .catch(function (err) {
        consoleLog('Fetching contacts failed:' + err.name);
      });
  } else if (api && !!api.find) {
    // 老的 Firefox OS API
    var criteria = {
      sortBy: 'familyName',
      sortOrder: 'ascending'
    };
    api.find(criteria)
      .then(function (contacts) {
        consoleLog('Found' + contacts.length + 'contacts.');
        if (contacts.length) {
          consoleLog('First contact:' + contacts[0].givenName[0] + ' ' + contacts[0].familyName[0]);
        }
      })
      .catch(function (err) {
        consoleLog('Fetching contacts failed:' + err.name);
      });
  } else {
    consoleLog('Contacts API not supported.');
  }
}
function consoleLog(data) {
  var logElement = document.getElementById('log');
  logElement.innerHTML += data + '\n';
}

SMS（Short Message Service）/MMS（Multimedia Messaging Service）

Messaging API 的目标是允许 Web 应用程序完全访问设备上的 SMS 和 MMS 消息系统，旨在涵盖本机移动消息应用程序的功能，包括：浏览、创建和管理消息。 Messaging 的早期版本与后来的 Messaging API 提案不同，仅在现已不复存在的 Firefox OS 上实现，并且它是 Web 中 SMS 消息传递的唯一实际实现 。由于隐私和安全原因，没有浏览器供应商实现。

然而，存在一个 Web OTP API 提案，重点关注使用 SMS 作为传输方式传递一次性密码消息的更狭窄的任务。

navigator.messaging.sms.send(number, message, serviceId)
navigator.messaging.mms.send(content)
navigator.messaging.findMessages(filter, options)
// 下面是火狐实现
navigator.mozSms.send(number, message)
navigator.mozSms.getMessages(filter)

NFC

Web NFC API 是一种底层 API，使站点能够读取和写入附近的 NFC（近场通信）设备。其允许启动扫描，在 NFC 标签被点击时发出通知，其还提供了一种通过 NFC 写入消息的方法。

当前的支持仅限于 Chrome 中的实验性实现，可在 Android 上的 “
experimental-web-platform-features” 标志后面使用。 还有 Firefox OS 实验性实现，但带有 moz 前缀，并且不遵循规范草案的当前状态。

async function readTag() {
  if ("NDEFReader" in window) {
    const ndef = new NDEFReader();
    // NFC Reader
    try {
      await ndef.scan();
      ndef.onreading = event => {
        const decoder = new TextDecoder();
        for (const record of event.message.records) {
          consoleLog("Record type:" + record.recordType);
          consoleLog("MIME type:" + record.mediaType);
          consoleLog("=== data ===\n" + decoder.decode(record.data));
        }
      }
    } catch(error) {
      consoleLog(error);
    }
  } else {
    consoleLog("Web NFC is not supported.");
  }
}
async function writeTag() {
  if ("NDEFReader" in window) {
    const ndef = new NDEFReader();
    try {
      await ndef.write("What Web Can Do Today");
      consoleLog("NDEF message written!");
    } catch(error) {
      consoleLog(error);
    }
  } else {
    consoleLog("Web NFC is not supported.");
  }
}
function consoleLog(data) {
  var logElement = document.getElementById('log');
  logElement.innerHTML += data + '\n';
}

下面是具体的 HTML 代码：


  
  





Based on the code snippets from specification draft.
Ambient Light
Ambient Light 允许 Web 应用程序访问设备光传感器（通常内置于设备摄像头中）测量的光强度级别。
第一种支持 Web 上光强度传感器的方法（作为独立的 API）早在 2013 年就在 Firefox 中实现了，从那时起，该规范被重写以利用新的通用传感器 API。 截至 2020 年初，这种风格仅在 Google Chrome 中实验性地实现，位于 “Generic Sensor Extra Classes” 标志后面。
function update(illuminance) {
  document.getElementById("value").innerHTML = illuminance + "lux";
  var colorPart = Math.min(255, illuminance).toFixed(0);
  document.getElementById("box").style.backgroundColor =
    "rgb(" + colorPart + "," + colorPart + "," + colorPart + ")";
}
if ("AmbientLightSensor" in window) {
    // 访问光传感器
  try {
    var sensor = new AmbientLightSensor();
    sensor.addEventListener("reading", function (event) {
      update(sensor.illuminance);
    });
    sensor.start();
  } catch (e) {
    console.error(e);
  }
}
if ("ondevicelight" in window) {
  function onUpdateDeviceLight(event) {
    update(event.value);
  }

  window.addEventListener("devicelight", onUpdateDeviceLight);
}
Inter-App Sharing
开发者曾多次尝试建立从 Web 应用程序到本机应用程序或其他 Web 应用程序的通用、多平台、异步数据交换方式。 自 2017 年以来推出的 Web Share API 实现可在 Android 和 iOS 上使用，它包含一个调用特定于平台的共享机制的方法，并向其传递命名 URL。 此外，Android 上的 Google Chrome 支持共享文件对象。
自 Chrome 71（2018 年底）以来，Android 中提供了一个补充性的 Web Share Target API，允许注册已安装的 Web 应用程序以在特定于平台的共享机制中可用，本质是基于应用程序清单文件中的 share_target 定义。 这样，用户就可以从系统中安装的任何其他应用程序（Web 或本机）将数据发送到应用程序中的指定端点。
从历史上看，几乎没有用于将数据发送到可能仍然相关的其他应用程序的基本解决方法。 本机应用程序可以注册处理程序以使用特殊的 URL 前缀从 Web 应用程序接收数据（尽管 iOS 和 Android 之间存在差异）。 还有第三方非标准服务来协调 Web 应用程序之间的数据共享。
解决 Web 数据共享问题的首次尝试，即 Web Intents 实验性 API 是在 Google Chrome 18（2012 年）中实现的，在概念上是基于 Android Intents 系统。 有兴趣接收数据的应用程序需要在 Chrome Web Store 中注册，并在清单文件中声明意图支持。 发送数据的应用程序能够调用特定类型的 Intent，并让系统处理目标应用程序的选择及其正确的调用。
由于各种互操作性和可用性问题，该 API 在 Chrome 24 中被删除，没有其他供应商实现 Web Intents。
function share() {
  if (!("share" in navigator)) {
    alert('Web Share API not supported.');
    return;
  }
  // 分享
  navigator.share({
      title: 'What Web Can Do Today',
      text: 'Can I rely on the Web Platform features to build my app? An overview of the device integration HTML5 APIs',
      url: 'https://whatwebcando.today/'
    })
    .then(() => console.log('Successful share'))
    .catch(error => console.log('Error sharing:', error));
}
function intent() {
  if (!("Intent" in window)) {
    alert('Web Intents API not supported.');
    return;
  }
  var intent = new Intent('http://webintents.org/share',
    'text/uri-list',
    'https://whatwebcando.today');
  navigator.startActivity(intent, function () {
    console.log('Successful share')
  }, function (error) {
    console.log('Error sharing:', error);
  });
}
Geofencing API
Geofencing API 允许授权的 Web 应用程序定义地理区域并在设备进入或离开这些区域时接收通知，而无需定期查询地理定位 API。 由于采用的 Service Worker 允许在所属 Web 应用程序的生命周期之外执行代码，因此当应用程序未在浏览器中打开时也可能会收到通知。
截至 2020 年初，没有供应商实现该 API，该提案似乎已被放弃。
region = new CircularGeofenceRegion({name, latitude, longitude, radius})
serviceWorkerRegistration.geofencing.add(region, options)
self.addEventListener('geofenceenter', listener)
self.addEventListener('geofenceleave', listener)
然而，Google Chrome 正在试验一个新概念，它可能会涵盖未来地理围栏的某些方面，即基于位置的通知触发器。
Proximity Sensors
Proximity Sensors API 允许 Web 应用程序访问来自设备接近传感器的数据，检测设备附近是否有物理对象。
第一种在 Web 上支持接近传感器的方法（作为独立的 API）是在 Firefox 中实现的。 从那时起，该规范被重写以利用新的通用传感器 API，但截至 2020 年初，没有供应商实现该规范。
var box = document.getElementById('box');

function onDeviceProximityChanged(event) {
  document.getElementById('deviceValue').innerHTML = event.value + 'cm (' + event.min + '-' + event.max + 'cm range)';

  var size = Math.min(200, Math.max(20, 500 / (event.value || 1)));

  box.style.width = size + 'px';
  box.style.height = size + 'px';
}

function onUserProximityChanged(event) {
  document.getElementById('nearValue').innerHTML = event.near ? 'near' : 'rather far';
  box.style.backgroundColor = event.near ? 'red' : 'green';
}
// deviceproximity 事件
window.addEventListener('deviceproximity', onDeviceProximityChanged);
window.addEventListener('userproximity', onUserProximityChanged);
参考资料
https://whatwebcando.today/
https://whatwebcando.today/proximity.html
https://whatpwacando.today/
https://www.allperfectstories.com/what-is-the-future-of-pwa-apps/
https://cedcommerce.com/blog/popular-pwa-queries-of-merchants-answered/
https://appicsoftwares.com/blog/is-pwa-the-right-choice/




        
    
        

            

    






    



            

            
相关推荐

            

                                                


        
JPA实体类注解，看这篇就全会了

    

        
基本注解@Entity标注于实体类声明语句之前，指出该Java类为实体类，将映射到指定的数据库表。name(可选)：实体名称。缺省为实体类的非限定名称。该名称用于引用查询中的实体。不与@Tab...

    

    
                                


        
Dify教程02 - Dify+Deepseek零代码赋能，普通人也能开发AI应用

    

        
开始今天的教程之前，先解决昨天遇到的一个问题，docker安装Dify的时候有个报错，进入Dify面板的时候会出现“InternalServerError”的提示，log日志报错：S3_USE_A...

    

    
                                


        
用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码

    

        
在人体姿态估计领域，传统方法通常将关键点作为基本处理单元，这些关键点在人体骨架结构上代表关节位置（如肘部、膝盖和头部）的空间坐标。现有模型对这些关键点的预测主要采用两种范式：直接通过坐标回归或间接通过...

    

    
                                


        
B 客户端流RPC (clientstream Client Stream)

    

        
客户端编写一系列消息并将其发送到服务器，同样使用提供的流。一旦客户端写完消息，它就等待服务器读取消息并返回响应gRPC再次保证了单个RPC调用中的消息排序在客户端流RPC模式中，客户端会发送多个请...

    

    
                                


        
我的模型我做主02——训练自己的大模型:简易入门指南

    

        
模型训练往往需要较高的配置，为了满足友友们的好奇心，这里我们不要内存，不要gpu，用最简单的方式，让大家感受一下什么是模型训练。基于你的硬件配置，我们可以设计一个完全在CPU上运行的简易模型训练方案。...

    

    
                                


        
开源项目MessageNest打造个性化消息推送平台多种通知方式

    

        
今天介绍一个开源项目，MessageNest-可以打造个性化消息推送平台，整合邮件、钉钉、企业微信等多种通知方式。定制你的消息，让通知方式更灵活多样。开源地址：https://github.c...

    

    
                                


        
使用投机规则API加快页面加载速度

    

        
当今的网络用户要求快速导航，从一个页面移动到另一个页面时应尽量减少延迟。投机规则应用程序接口（SpeculationRulesAPI）的出现改变了网络应用程序接口（WebAPI）领域的游戏规则。...

    

    
                                


        
JSONP安全攻防技术

    

        
关于JSONPJSONP全称是JSONwithPadding，是基于JSON格式的为解决跨域请求资源而产生的解决方案。它的基本原理是利用HTML的元素标签，远程调用JSON文件来实现数据传递。如果...

    

    
                                


        
大数据Doris(六):编译 Doris遇到的问题

    

        
编译Doris遇到的问题一、js_generator.cc:(.text+0xfc3c):undefinedreferenceto`well_known_types_js’查找Doris...

    

    
                                


        
网页内嵌PDF获取的办法

    

        
最近女王大人为了通过某认证考试，交了2000RMB，官方居然没有给线下教材资料，直接给的是在线教材，教材是PDF的但是是内嵌在网页内，可惜却没有给具体的PDF地址，无法下载，看到女王大人一点点的截图保...

    

    
                                


        
印度女孩被邻居家客人性骚扰，父亲上门警告，反被围殴致死

    

        
微信的规则进行了调整希望大家看完故事多点“在看”，喜欢的话也点个分享和赞这样事儿君的推送才能继续出现在你的订阅列表里才能继续跟大家分享每个开怀大笑或拍案惊奇的好故事啦~话说只要稍微关注新闻的人，应该...

    

    
                                


        
下周重要财经数据日程一览 (1229-0103)

    

        
下周焦点全球制造业PMI美国消费者信心指数美国首申失业救济人数值得注意的是，下周一希腊还将举行第三轮总统选举需要谷歌日历同步及部分智能手机（安卓，iPhone）同步日历功能的朋友请点击此链接，数据公布...

    

    
                                


        
PyTorch 深度学习实战(38):注意力机制全面解析

    

        
在上一篇文章中，我们探讨了分布式训练实战。本文将深入解析注意力机制的完整发展历程，从最初的Seq2Seq模型到革命性的Transformer架构。我们将使用PyTorch实现2个关键阶段的注意力机制变...

    

    
                                


        
聊聊Spring AI的EmbeddingModel

    

        
序本文主要研究一下SpringAI的EmbeddingModelEmbeddingModelspring-ai-core/src/main/java/org/springframework/ai/e...

    

    
                                


        
前端分享-少年了解过iframe么

    

        
iframe就像是HTML的「内嵌画布」，允许在页面中加载独立网页，如同在画布上叠加另一幅动态画卷。核心特性包括：独立上下文：每个iframe都拥有独立的DOM/CSS/JS环境（类似浏...

    

    
                
            


            
        


                

                                    

                
一周热门

                

                    
                

            

            
            




最近发表












标签列表