仅灯塔中的PWA问题“请求被DevTools阻止” - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用浏览器工具调试PWA

清单提供了很多应用被安装到到设备该如何表现的细节说明。任何的错误定义清单将会报告问题。 ? 清单中可以看到应用的名字（首屏上的简短名字），图表预览，以及一些展现的细节。...Service Workers技术使得PWA可以离线工作，同时允许您拦截网络请求并使用Cache API在本地存储资源。 ? 通过此屏幕，您可以通过启用选项卡中离线复选框来强制离线模式： ?...绕过网络可以完全关闭Service Worker启用的缓存。当您希望从网络直接访问时，这会阻止应用程序使用缓存的资源。调试时也非常有用。...像Chrome一样，当用Cache API使用被“开发工具”的“网络”面板中的Service Worker缓存的资源时，在Transferred列下列出了『Service Worker』： ?...Google还提供Lighthouse作为其浏览器工具的一部分，可以在Chrome DevTools中单独安装。

3.7K4 0

【译】一文洞察 Chrome DevTools 近半年新增了哪些功能

PWA 分类使用新的徽章计分系统。 ?...可以查看由 service worker 发起（initiated）或可能被其修改（intercepted）的请求。...新版本中，Breakpoints面板中有 3 行。 DevTools（Chrome 76）的新增功能根据 CSS 值自动补全属性名输入 CSS 值，根据值找到对应的属性名称。 ?...检查是否可以将 PWA 添加到 iOS 主屏幕。请求数量、文件大小。报告各种类别的网络请求总数和文件大小，例如 documents, scripts, stylesheets, images 等。...使用 Request Blocking 选项卡禁用有问题的脚本。然后再次审核页面： ? 阻止有问题的脚本后，性能得分提高到了 97。

2K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

【译】一文洞察 Chrome DevTools 近半年新增了哪些功能

PWA 分类使用新的徽章计分系统。 ?...可以查看由 service worker 发起（initiated）或可能被其修改（intercepted）的请求。...新版本中，Breakpoints面板中有 3 行。 DevTools（Chrome 76）的新增功能根据 CSS 值自动补全属性名输入 CSS 值，根据值找到对应的属性名称。 ?...检查是否可以将 PWA 添加到 iOS 主屏幕。请求数量、文件大小。报告各种类别的网络请求总数和文件大小，例如 documents, scripts, stylesheets, images 等。...使用 Request Blocking 选项卡禁用有问题的脚本。然后再次审核页面： ? 阻止有问题的脚本后，性能得分提高到了 97。

1.7K3 0

PWA 入门: 写个非常简单的 PWA 页面

准备一个 HTML 文件, 以及相应的 CSS 等: 添加 manifest.json 文件为了让 PWA 应用被添加到主屏幕, 使用 manifest.json 定义应用的名称, 图标等等信息。...处理动态缓存网页抓取资源的过程中, 在 Service Worker 可以捕获到 fetch 事件, 可以编写代码决定如何响应资源的请求: 真实的项目当中, 可以根据资源的类型, 站点的特点, 可以专门设计复杂的策略...从 DevTools 可以看到, 普通页面刷新时, 列表当中的静态资源都是从 Service Worker 获取的: 更新页面页面被缓存之后, 就需要适当处理缓存失效时页面的更新。...在这个 Demo 当中, 被缓存的资源是无法发起请求判断是否被更新的, 只有 sw.js 会自动根据 HTTP 缓存的机制尝试去判断应用是否被更新。...DevTools 看到 sw.js 被安装和激活。

2.8K5 0

JavaScript 开发者需要了解的15个 DevTools 技巧

每个会话都会以干净的状态开始，所以非常适合测试登录功能、首次渲染性能和PWA程序。 2....查找未使用的 JavaScript Chrome 的 Coverage 面板可以让你能够快速找到 JavaScript 有没有被使用。...这可以帮助你确定性能瓶颈的原因： ? 7. 过滤网络请求 DevTools 的 Network 面板提供了几个过滤器，其中包括一个仅显示 JavaScript 请求的 JS 按钮。...调试一些三方库(React, Vue.js, jQuery等)或第三方脚本中的问题通常都没什么用，你也不能改这些库。...这些请求会显示在 DevTools Network 面板中，可以使用 XHR 按钮进行过滤。 DevTools 显示了很多信息，但是有时你需要重新运行一次 Ajax 调用。

4.9K2 0

备受乔布斯推崇的 PWA，为什么还没有杀死原生应用？

PWA 的身份识别问题关于这个话题，我已经写过很多，但 PWA 仍然被认为是二流 App——或者更糟，在某些情况下，甚至根本就不被认为是 App。...因此，在某些情况下，Chrome（和其他浏览器）会自动阻止推送通知请求——这导致希望合法使用通知功能的开发者更难请求访问该功能。...已安装的 PWA 可以被自动授予对 Push API 的访问权限。只对已安装的 PWA 开发 Push API 访问权限，一般的网站不能请求访问该权限。将权限请求绑定到多个浏览器 API。...或者更简单一点，在 PWA 请求权限时，不让 Chrome 自动阻止推送通知。...因此，最好的办法是将它们分别托管在自己的目录中（例如 example.com/pwa1/ 和 example.com/pwa2/）。管理作用域是非常反直觉的，我喜欢将这个问题称为尾部斜杠问题。

1.5K1 0

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

字面上直译为“先进的web应用”，而维基百科中给出的解释是——PWA是一个用来表示使用了最新技术的Web应用的术语。PWA是可靠的、迅速的、吸引人的、体验好的Web App的代名词。...的，但是可能需要修复某些问题才能使内容可访问。..."跳转" 确认方法：加载PWA中的各种页面，并确保内容或UI不会在页面加载时“跳转”。...按返回，确保列表视图滚动到与细节链接/按钮被点击之前相同的位置。改善方法：当用户按“返回”时，恢复列表中的滚动位置。有些路由库可以帮你完成这个功能。...■还一些技巧，主要专注于加载较少的脚本，确保使用尽可能多的脚本异步加载，并确保渲染阻止CSS被标记为这样。

3.2K7 0

JavaScript 的时间消耗

脚本传输的字节越多, 花费的时间越长, 用户连接的就越慢. network 即使在网络发达的国家, 这也是需要面对的一个问题, 因为用户有效的网络连接类型不一定就是 3G、4G 或者 Wifi....在 Chrome DevTools 的性能面板中, JS 的解析和编译是 Scripting time 中的黄色部分. parse 从 Bottom-Up/Call Tree 可以看到更精确的解析/编译时间...在 JavaScript 性能一文中, 我注意到在低配手机和高配手机上解析约 1M 被解压后的脚本文件所用的时间是不同的....当浏览器回收内存时, JS 的执行会被暂停, 所以 JS 被暂停执行的频率和浏览器回收内存的频率是正相关的, 因此需要避免内存泄漏和频繁的内存回收导致的 JS 执行暂停, 保持页面的流畅度....浏览请请求一个最小化的功能页面(仅由当前路由需要的 HTML/JS/CSS 组成), 当有更多资源请求时, 应用可以进行资源懒加载, 然后逐步解锁更多功能. pwa Loading code proportionate

8637 0

H5 APP开发中的性能优化

H5 APP的性能优化是提升用户体验的关键，尤其是在移动端，性能问题会直接影响用户留存率。以下是H5 APP开发中常见的性能优化策略。...避免长任务：将长时间运行的任务拆分为多个小任务，使用setTimeout或requestAnimationFrame分步执行。5.优化网络请求减少请求体积：使用Gzip或Brotli压缩传输数据。...使用Chrome DevTools的Memory工具检测内存泄漏。使用高效的数据结构：根据场景选择合适的数据结构（如Map、Set代替普通对象）。...设置性能阈值，触发报警及时修复问题。10.其他优化技巧减少第三方库的使用：避免引入过多不必要的第三方库，优先使用原生API。使用HTTP/2：启用HTTP/2，支持多路复用和头部压缩，提升加载速度。...总结H5 APP的性能优化需要从加载、渲染、网络、代码等多个方面入手。通过合理的优化策略和工具支持，可以显著提升应用的性能，为用户提供流畅的体验。在实际开发中，建议结合具体场景，持续监控和优化性能。

1001 0

PWA介绍及快速上手搭建一个PWA应用

，由于 Safari 支持度的问题，所以在 IOS 上并不可以），并且还能进行 ”推送通知” 。...浏览器支持顺便带一句：目前只能在 HTTPS 环境下才能使用SW，因为SW 的权利比较大，能够直接截取和返回用户的请求，所以要考虑一下安全性问题。...installing 事件失败和 activating 事件失败的信息我们可以在 Chrome 浏览器的 DevTools 中查看一个很不错的全面介绍sw的教程：https://www.villainhr.com...] 通过存放到 Cache Storage 中，我们下次访问的时候如果是弱网或者断网的情况下，就可以不走网络请求，而直接就能将本地缓存的内容展示给用户，优化用户的弱网及断网体验。...页面中出现了刚刚添加的P标签，我们再看一下 Cache Storage 中的缓存名字，已经被修改。

2.3K13 0

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

安全：PWA使用https进行通信加密，防止了被第三方获取数据以及数据被篡改推送：做到在不打开网页的前提下，推送新的消息可安装：能够将 Web像 APP 一样添加到桌面,可以在主屏幕上创建图标为什么是渐进式...一旦被 install，就永远存在，除非被 uninstall 可编程拦截代理请求和返回，缓存文件，缓存的文件可以被网页进程取到（包括网络离线状态）能向客户端推送消息出于安全的考虑，必须在 HTTPS...service worker 自定义请求响应处理动态缓存: 每次任何被 Service Worker 控制的资源被请求到时，都会触发 fetch 事件，Service Worker 添加一个 fetch...桌面浏览器可以直接通过 http://localhost:8088 访问, 从 DevTools 的 Application 标签可以看到 Service Worker。...Apps 大部分功能，甚至还优化了硬件性能消耗、应用频繁出现广告内容的问题。

2.7K1 0

H5 APP开发的注意事项

导航设计：设计简洁的导航结构，避免用户迷失。支持手势操作（如滑动返回）。离线支持：使用Service Worker实现离线缓存（PWA）。提供离线状态提示。...防止XSS攻击：对用户输入进行严格的校验和过滤。避免直接使用innerHTML插入动态内容。防止CSRF攻击：使用Token验证请求来源。设置CORS策略，限制跨域请求。...Meta标签优化：设置合适的title、description和keywords。6.调试与测试调试工具：使用Chrome DevTools、Safari Web Inspector等工具调试。...7.PWA支持渐进式Web应用：使用Service Worker实现离线访问和缓存。添加Manifest文件，支持添加到主屏幕。提供推送通知功能。性能提升：通过PWA技术提升加载速度和用户体验。...版权问题：确保使用的图片、字体、代码等资源具有合法授权。内容合规：确保应用内容符合当地法律法规。总结开发H5 APP时，需从性能、兼容性、用户体验、安全性、SEO、测试等多个方面综合考虑。

1041 0

在“小程序”PWA上开发WebRTC

为了让你的应用程序被Chrome分类为PWA，应用程序需要加载服务工作线程和某种脱机功能。至少，你必须能够在连接断开时提供服务。文件处理需要特别注意的一点是，服务工作线程文件的位置非常重要。...权限为了能够将推送通知发送到用户的手机上，你首先必须申请权限。在页面打开时立即请求推送通知的权限通常被认为是不佳的形式。请确保用户知道为什么他们需要这些推送，并及时地向他们提供增值服务。...阻止通知也很容易，所以最好不要指望被应用程序准许的通知能够按预期设想一样有效。技巧和窍门相机的方向在手机上使用WebRTC时，你需要特别注意相机的方向。...完全不同的是，在开发WebRTC智能手机客户端时，你必须考虑大部分的手机都是具有两个摄像头的。getUserMedia API允许你请求一个首选摄像头，因此确保用户使用前置摄像头。...想获取有关如何设置和使用它的更全面的指南，请参阅https://developers.google.com/web/tools/chrome-devtools/remote-debugging/。

1.2K1 0

如何重新认知性能优化及其度量方法

接着是 Navigation timing，定义的是文档，导航过程中完整的性能度量及文档，从发起请求到完成加载的各阶段号时，其中页面的导航性能可以通过 performance 的 timing 接口来获得...关于这个 API 我们需要注意的一个点是对于跨域资源的性能数据，我们需要正确返回 Time-Allow-Origin 请求头，子资源的性能才能被页面获取到。 ? 我们再来看一些比较新的 API。...SSR 是用在端外，端内可以有更好的方案。这里就是我们后面要介绍的 NSR 渲染方案。第三个问题，信息流，信息流团队为什么没有选择 PWA。...PWA 有一个问题就是 Service Worker 的启动和保活成本很高，耗时大概在 100 毫秒到 1000 毫秒不等。...我们看到信息流在优化过程中，技术方案从 CSR 变成了 NSR 这里带来一个这里带来一个工程化的问题，就是说原来前端只要一个 CSR 的 Bundle 包就够了，但是做了技术改造之后，我们需要同时支持

1.1K3 1

史诗级更新，VSCODE 可无缝调试浏览器了！

并且更重要的是，其仅能提供最基本的控制台功能，其他的诸如 network，element 是无法查看的，我们仍然需要到浏览器中查看。...{ "version": "0.2.0", "configurations": [ { "type": "pwa-msedge", "request": "launch...比如浏览器网络线程发送的请求以及 DOM 节点信息。你可以通过「chrome devtool protocol」拿到很多信息，比如上面提到的 network 请求。...由于是 websocket 建立的双向链接，因此在 VSCODE 中改变 dom 等触发浏览器的修改也变得容易。...浏览器会根据收到的 JSON 数据进行一些操作，从效果上来看「和用户直接在手动在浏览器中操作并无二致。」

1.4K2 0

推荐一个神器！可以在浏览器运行 Node.js

支持在浏览器中调试 Node.js 。与 Chrome DevTools 的无缝集成可实现本机后端调试，无需安装扩展。默认安全。...随着 Web 开发慢慢转向像 Next.js 这样的全栈 SSR 和 SSG，设置本地的开发环境变得越来越麻烦，StackBlitz 通过利用浏览器中数十年来的速度和安全性创新来解决这些问题。...通过在浏览器中执行 Node.js，与 Chrome DevTools 的集成即开即用。无需安装，无需扩展，仅在浏览器就能进行本机后端调试： ? ?...和桌面程序一样的编辑体验借助 Chrome 的 PWA 功能，只需单击即可轻松安装 StackBlitz 。几毫秒后，你就有了一个桌面 IDE。...这使 PWA能够请求对本地文件系统的某些部分进行持久的读写访问。 ? 你能分清楚上面哪个是 StackBlitz 哪个是 VS Code 吗？

1.5K3 0

使用浏览器这么多年，你真的了解DevTools吗？

Chrome Devtools是Web测试时每天都要用的工具，它提供了很多调试功能，可以帮助我们更好的定位问题。而我们平时使用的功能只是它全部功能的子集，很多功能并没用到过。...； Performance ：设备加载性能分析； Application ：应用信息，PWA/Storage/Cache/Frames； Security ：安全分析； Audits ：审计，自动化测试工具...在源代码面板中设置断点来试 JavaScript ，或者通过 Workspaces （工作区）连接本地文件来使用开发者工具的实时编辑器断点调试；调试混淆的代码；使用开发者工具的 Workspaces...网络面板基础；了解资源时间轴；网络带宽限制；主要记录前端往服务器发的所有的http请求信息，每个请求发送了什么数据，服务器是否正常响应请求；如果响应请求，在Network标签下看到响应状态码...在Network（网络）处，看到请求返回的状态码是500。此时可以判断这个BUG是后端导致的，可以知道后端开发直接解决问题。常见的状态码：200、404、500，作为测试基本了解。

1.1K2 0

推荐一个神器！可以在浏览器运行 Node.js

支持在浏览器中调试 Node.js 。与 Chrome DevTools 的无缝集成可实现本机后端调试，无需安装扩展。默认安全。...随着 Web 开发慢慢转向像 Next.js 这样的全栈 SSR 和 SSG，设置本地的开发环境变得越来越麻烦，StackBlitz 通过利用浏览器中数十年来的速度和安全性创新来解决这些问题。...通过在浏览器中执行 Node.js，与 Chrome DevTools 的集成即开即用。无需安装，无需扩展，仅在浏览器就能进行本机后端调试： ? ?...和桌面程序一样的编辑体验借助 Chrome 的 PWA 功能，只需单击即可轻松安装 StackBlitz 。几毫秒后，你就有了一个桌面 IDE。...这使 PWA能够请求对本地文件系统的某些部分进行持久的读写访问。 ? 你能分清楚上面哪个是 StackBlitz 哪个是 VS Code 吗？

5.7K2 0

PWA 的探索与应用

PWA（Progressive Web App）起源背景传统的Web网页存在以下几个问题：进入一个页面必须要记住它的url或者加入书签，入口不便捷；没网络就没响应，不具备离线能力；不像APP一样能进行消息推送...Service Worker 支持的事件 [h8fubjhexm.png] install：Service Worker 安装成功后被触发的事件，在事件处理函数中可以添加需要缓存的文件 activate...如果新工作SW线程出现不正常状态代码（例如，404）、解析失败，在执行中引发错误或在安装期间被拒，则系统将舍弃新工作线程，但当前工作线程仍处于活动状态。...SW主要有以下几类缓存策略：不影响安装的资源预缓存渐进式缓存仅使用缓存、仅使用网络缓存优先、网络优先 // 渐进式缓存 var addToCache = function(req) {...应用可以通过开发者工具中的Application进行查看调试，如下图所示： image.png PWA优缺点总结优点可以将app的快捷方式放置到桌面上，全屏运行，与原生app无异能够在网络差和断网条件下

3.2K9 0

Chrome 安全策略 - 私有网络控制（CORS-RFC1918）

从非安全环境要求到私有网络请求已被弃用在私有网络访问规范中，只有当启动上下文是安全的时，才允许从公共网站向私有网络的请求。...如果文档以及其所有父级文档的内容都是是 HTTPS 协议，并且没有混合的内容，则该文档被认为是安全的。因此，在 Chrome 90 中，从非安全上下文发起的对私有网络的请求被正式标记为已弃用。...从 Chrome 92 开始，此类请求将被直接阻止，这是启动完整规范的第一步。使用 Reporting API 上报弃用报告 Reporting API 是 Web 的标准日志记录功能。...DevTools 警告从非安全上下文发起私有网络请求时，Chrome 在控制台中打印弃用警告：从非安全上下文发起请求时， DevTools问题面板中会显示一个问题： Chrome 92 将直接弃用...从 Chrome 92 开始，Chrome 将直接阻止从非安全上下文发起的私有网络请求，并且将在 DevTools 控制台中记录一条 TypeError 错误。

6K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭