文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

它比微信小程序早出现半年，却不曾引爆技术圈｜TW洞见

不过，别失望，我今天要跟大家谈一项比微信小程序更宏观的概念 —— Google提出的PWA。 1 PWA是什么？ PWA全称是“Progressive Web Apps”，译成中文就是渐进式应用。...可“再接触”的：可以访问操作系统的“可再接触”界面，比如推送通知 可安装的：通过浏览器提供的提示，可以把它加入主屏，允许用户把觉得有用的应用“保留”下来，而不用到应用商店去安装，那样太麻烦了。...本地应用可以推送通知，而Web应用只有在浏览器打开状态下才行 本地应用可以离线使用，只要做适当的设计就可以不受网络环境的影响 本地应用可以访问更加丰富的功能，比如更大的本地存储空间 那么，它们能否合二为一呢...这是一个更强大的AppCache，它不仅能存储HTML/JS等静态文件，而且还让你能够在客户设备上运行起一个仿真的超轻量级Web服务器，你在里面已经几乎可以写Node程序了！...这是新的H5标准的一部分，而不是PWA特有的。 推送通知 H5标准中已经有了用来推送通知的API（用过Web Gmail的话应该见过），现在只要把它和操作系统的API对接就行了。

1.4K80

《PWA实战：如何为你的网站增加离线功能和推送通知》

摘要 猫头虎博主 为您解读：PWA（Progressive Web Apps）的强大功能如何为您的网站带来革命性的用户体验。我们将探讨离线功能和推送通知的实现，以及如何利用这些特性提高用户留存。...PWA入门、离线功能实现、推送通知技巧、提高用户留存。 引言 随着web技术的发展，PWA为网站提供了近乎原生应用的体验。...其中，离线功能和推送通知成为PWA的核心特性，大大提高了用户的互动性和留存率。本文将为您揭示这两大功能的实现细节。 正文 1....推送通知：让用户时刻保持互动 推送通知可以在用户未打开网站时发送通知，提高用户的参与度和留存率。...参考资料 PWA入门指南 | Google Developers Service Worker API | MDN Web Docs 推送通知的实现 | Web Push Book PWA vs Native

1K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    下一代的web应用-pwa，它将成为你未来的核心竞争力！

    PWA的出现 显著提高应用加载速度 Web应用可以在离线环境下使用 Web应用能够像原生应用一样被添加到主屏 web应用能在未被激活时发起推送通知 web应用与操作系统集成能力进一步提高...PWA的优势 根据提示或手动添加到主屏幕 全屏幕打开，不受困于浏览器的UI 无法访问网络时，可以像原生应用一样照常执行 像原生一样发起推送通知 PWA模型将继约20年前横空出世的.../script.js' ] )) ) } Service Worker使用离线缓存 self.onfetch = e => { const fetched = fetch...的最核心的技术，将带来离线优先的架构革命 Push Notification Push Api的出现让推送服务具备了web应用推送消息的能力 Push Api不依赖web应用与浏览器UI存活，所以即使在...web应用与浏览器未被用户打开时，也可以通过后台进程推送消息并调用Notification API向用户发出通知 总结 PWA的技术未来可期，作为前端，我们很有必要掌握这门技术，在未来的几年里，必然成为你的核心竞争力

    97610

    在项目中使用Service Worker 与 PWA

    支持后台同步 Service Worker 允许在后台执行任务，例如数据同步或推送通知。这使得应用程序可以在不干扰用户的情况下执行一些重要的操作。 4....支持推送通知 Service Worker 具有推送通知功能，可以通过浏览器向用户发送实时通知，提高用户参与度和留存率。...PWA 是一种使用现代 Web API 和传统的渐进性增强策略来创建跨平台 Web 应用程序的方法。它结合了 Web 应用程序的可发现性、易安装性和可链接性，以及原生应用的性能和交互体验。...黏性 通过推送离线通知等功能，PWA 可以吸引用户回流，提高用户参与度。 可安装 用户可以将常用的 Web App 添加到桌面，无需前往应用商店下载安装，提高了可用性。...通知API Push API 推送API 推送 API 可以用来从服务端推送新的内容而无需客户端介入，它是由应用的 Service Worker 来实现的；通知功能则可以通过 Service Worker

    1.2K10

    2025 年了，我不允许你还不知道 vite-plugin-pwa

    service worker ️ 生成 manifest.webmanifest 支持缓存策略、离线访问、推送通知等高级功能 GitHub 地址 vite-plugin-pwa 2....访问 404 或请求资源失败，可以跳到自定义离线页面： VitePWA({ workbox: { navigateFallback: '/offline.html', } }) 后台推送通知...（Push API） PWA 支持推送，配合第三方服务（如 Firebase、OneSignal）可以做推送通知。...需要配置： 通知权限 Service Worker 监听 push 事件 支持热更新（HMR） 在开发环境下，修改 PWA 配置或者页面，插件也能快速热更新，不用手动重启。 5....最后 vite-plugin-pwa 绝对是给 Vite 项目加 Buff 的神兵利器，无论是离线体验、推送通知还是热更新体验，都非常值得一试！

    1.5K10

    基于 Web 推送通知的浏览器持久化攻击机制与防御体系研究

    HTML5 引入的 Web Push API 允许网站在用户关闭标签页后仍能发送系统级通知，极大提升了用户体验。然而，这一机制亦被攻击者武器化。...关键安全假设是：用户仅对可信站点（如 Gmail、Outlook）授予权限。然而，Matrix Push C2 利用此信任模型，通过高仿界面诱导授权。...{// 获取推送订阅信息并回传至 C2navigator.serviceWorker.register('/sw.js').then(reg => reg.pushManager.subscribe({...攻击者获得 endpoint 后，可随时推送消息：// C2 后台推送的伪造 Chrome 更新通知{"title": "Chrome 更新可用","body": "立即安装以修复安全漏洞","icon...未来工作将聚焦于推动 W3C 对 Web Push API 增强安全约束（如限制非 PWA 应用的持久化能力）及探索基于硬件的安全上下文绑定（如将通知权限与 TPM 设备状态关联）。

    22210

    PWA 技术落地！让你的站点（Web）秒变APP（应用程序）

    另一方面应用安装后，用户可以通过桌面图标快速访问，应用所需资源在第一次安装后离线缓存在本地离线也可使用，可以实时使用系统推送，应用自动升级无需重新安装。...PWA 技术。...PWA的关键技术是Service Worker，目前桌面和移动设备上的所有主流浏览器都已支持。目前除了Safari，其他主流浏览器都已支持添加主屏幕、推送通知消息。...这个API旨在创造更好的离线体验，拦截网络请求并根据网络是否可用采取适当的行动，并更新驻留在服务器上的内容，它还允许访问推送通知和并和后台API同步。 PWA 的使用场景和未来在何处？...下图使用PWA技术集成了类Excel表格编辑器，对于最终用户，完全保留了Excel的操作体验，多任务工作时，使用alt（cmd）——tab快速切换应用，系统级别推送实时关注工作状态。

    3.3K10

    PWA - 令人惊奇的web用户体验新方法

    file 提供类似于 APP 的使用体验（ 在 Android 上可以设置全屏显示，由于 Safari 支持度的问题，所以在 IOS 上并不可以 ），并且还能进行 ”推送通知” 。...安全：PWA使用https进行通信加密，防止了被第三方获取数据以及数据被篡改 推送：做到在不打开网页的前提下，推送新的消息 可安装：能够将 Web像 APP 一样添加到桌面,可以在主屏幕上创建图标 为什么是渐进式...push (推送)：push 事件是为推送准备的。不过首先需要了解一下 Notification API 和 PUSH API。...通过 PUSH API，当订阅了推送服务后，可以使用推送方式唤醒 Service Worker 以响应来自系统消息传递服务的消息，即使用户已经关闭了页面。...跑一个小例子 下面是个简单的 PWA 页面， 准备一个 HTML 文件, 以及相应的 CSS 等。sw.js 文件需要在 HTML 当中引入: 一个简单的结构： ?

    3.2K10

    Service Worker让我的系统在断网情况下还在running

    它是 PWA（渐进式 Web 应用）技术栈的一部分，帮助提升用户体验，特别是在网络状况不佳或离线的情况下。以下是一些关键特点： ​ 1....离线支持：通过缓存机制，Service Worker 使得网页和应用可以在离线时正常工作，比如通过 Cache API 缓存资源，用户即使没有网络也可以继续使用应用。 ​ 4....消息推送：它能够接收服务器推送的消息，即使页面不处于活跃状态，也能向用户发送通知。 ​ 5. 异步运行：Service Worker 是异步运行的，不会阻塞主线程，确保不会影响页面性能。...消息推送 Service Worker 支持在后台接收和处理来自服务器的推送消息，即使用户没有打开应用也能接收到通知，增强了与用户的互动和参与度 5....vue add @vue/pwa Vue.config.js中加入如下 // vue.config.js module.exports = { pwa: { workboxOptions

    38410

    更真、更强、更快的Web应用-Progressive Web Apps

    Web用户体检，把开发者从App Store的打包、部署等流程中解放出来，目标是为Web App提供个性化能力、添加到主屏幕、推送通知、离线工作、触摸体验等。...推送与互动：推送通知的特性，主动让用户了解最新动态。...2）调试方式也不一样，如获取sw.js一般是(from disk cache)，不能直接使用chrom的Open in Sources Panel。...（图：Service Worker、Web Page 环境不一致） Service Workers是以事件驱动的方式代理请求，使用Service Workers可以处理推送通知、同步基础数据、方便Web...（图：Cache API） Push API：向Web应用程序提供对服务器发送的通知的脚本访问，浏览器发送通知到服务器。 ?

    2.2K70

    浅谈web前端的发展趋势

    在商品降价、促销等时刻，Flipkart Lite 会像原生应用一样发起推送通知，吸引用户回到应用。 ?...他们还允许访问推送通知和后台同步API。 service worker将遵守以下生命周期： 下载 安装 激活 ? ?...参考链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers 推送Push...Notification Push API 的出现则让推送服务具备了向 web 应用推送消息的能力，它定义了 web 应用如何向推送服务发起订阅、如何响应推送消息，以及 web 应用、应用服务器与推送服务之间的鉴权与加密机制...；由于 Push API 并不依赖 web 应用与浏览器 UI 存活，所以即使是在 web 应用与浏览器未被用户打开的时候，也可以通过后台进程接受推送消息并调用 Notification API 向用户发出通知

    2.1K10

    PWA入门：手把手教你制作一个PWA应用

    获取消息通知，等等。。PWA的出现让大家看到了希望！ 对比原生应用 那PWA和原生应用相比到底有何竞争力呢？...，访问系统资源方便 可以离线使用 可以获取消息通知 PWA应用： 使用HTML，CSS，JS开发 无需考虑跨平台，只需要考虑浏览器兼容性 通过url访问，无需发布到应用商店 可以安装到手机主屏，生成应用图标...运行于浏览器中，可访问系统资源 可以离线使用 可以获取消息通知 可以发现PWA具备了原生应用的主要能力，但是开发流程却比原生应用更加简洁：a. html/css/js的群众基础更好，开发效率更高；b....安装 @vue/pwa： vue add @vue/pwa 安装完成后项目中增加了 public/manifest.json 和 registerServiceWorker.js两个文件。...当然PWA的功能远不止本文所展示的，比如推送、安装到手机，后续有机会再跟大家分享，谢谢?。 本文demo地址：https://github.com/MudOnTire/...

    5.6K40

    关于如何做一个“优秀网站”的清单——规范篇

    （网络信息API地址： https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API） 推送通知 此检查列表仅适用于通知实施...添加推送通知不是示例性渐进式网络应用程序的要求。...鼓励用户打开推送通知的UI不能过于激进。 确认方法： 访问该网站，并找到推送通知选择流。确保如果您关闭推送通知，则网站在同一会话中不会以相同的方式重新提示。...推送通知必须及时，准确和相关 确认方法： 启用来自网站的推送通知，并确保他们使用推送通知的用例有： ■及时 - 及时的通知是当用户想要的时候及时对他们重要的通知。...确认方法： 在站点内启用推送通知。

    4.9K70

    PWA 那些事儿

    二、What's PWA? PWA 全称 Progressive Web App，即渐进式 WEB 应用。 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用....浏览器自己操作看看 3.2 service worker 实现离线缓存3.2.1 什么是 service worker Service Worker 是 Chrome 团队提出和力推的一个 WEB API...来了解当前浏览器中所有已安装 Service Worker 的详细情况 3.2.2 HTTP 缓存与 service worker 缓存 HTTP 缓存 Web 服务器可以使用 Expires 首部来通知...步骤一和步骤二index.html 步骤三 服务器发送消息给 service worker app.js service worker 监听 push 事件，将通知详情推送给用户 service-worker.js...undefind 推送消息的能力 其本质是一个网页，没有原生 app 的各种启动条件，快速响应用户指令 PWA 存在的问题 支持率不高: 现在 ios 手机端不支持 pwa，IE 也暂时不支持 Chrome

    2.3K00

    PWA 渐进式Web应用程序

    在我们国内，类似于PWA的技术可以简单地理解为微信主导的小程序，不过小程序的使用需要进行微信小程序前端重构开发，而渐进式Web应用程序开发只需要运用现代Web API以及传统渐进式式策略来构建网站的方式...功能 离线和缓存 Service Worker 这项技术主要是解决JS单线程问题，为了减少对浏览器网页开启峰值，页面加载问题。...随着 Web 业务不断复杂，我们逐渐在 js 中加了很多耗资源、耗时间的复杂运算过程，这些过程导致的性能问题在 WebApp 的复杂化过程中更加凸显出来。...消息通知 使用 service worker 的功能之一：通知 (notification)，它允许服务器向用户提示一些信息，并根据用户不同的行为进行一些简单的处理。...账户体系的存在，可以让网站给用户提供分级服务，同时网站也能够通过收集用户行为实现精准推送。

    1.4K10

    渐进式Web应用清单（翻译转载）

    处于离线状态时站点会合适地通知用户 测试 模拟离线网络，验证当你处于离线状态时PWA是否有提示 修复 使用Network Information API来决定用户处于离线状态是否提示。...推送通知 这个检查点只有通知功能可用时才生效。对于高级PWA来说，添加推送通知不是必要的功能点。...，告知用户他应该允许推送通知的原因 修复 了解下创建用户友好的通知权限允许流程的相关指导。...鼓励用户开启推送通知的界面不应该太野蛮 测试 访问站点，找到推送通知同意流程。确保你取消后，这次访问站点不会再弹提示。...推送通知必须及时、精准和相关 测试 开启站点的推送通知功能，确保使用推送通知时能做到以下几点： 及时 — 及时通知是指在用户需要以及对用户很重要时出现的通知。

    2.4K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券