问题标签 [progressive-web-apps]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
19841 浏览

service-worker - 我可以让多个服务人员都拦截相同的获取请求吗?

我正在编写一个库,我将为第 3 方提供在其站点上运行服务人员的库。它需要拦截所有网络请求,但如果他们愿意,我想允许他们构建自己的服务工作者。

我可以让两个服务人员拦截相同的提取并在它们之间提供某种优先级/排序吗?或者我应该使用其他一些模式吗?

谢谢

0 投票
2 回答
6716 浏览

javascript - Serviceworker Bug event.respondWith

我的 serviceworker 的逻辑是,当发生 fetch 事件时,首先它会获取一个包含一些布尔值(不是 event.request.url)的端点并根据我调用event.respondWith()的值检查该值当前 fetch 事件,我在其中提供来自缓存的响应。但是我收到以下错误,

未捕获(承诺中)DOMException:无法在“FetchEvent”上执行“respondWith”:获取事件已得到响应

在这里检查了当m_state不等于Initial时会抛出此错误

我怀疑由于我有一个额外的 fetch 事件,它以某种方式消耗了以前的 fetch 事件,它正在更改 m_state 变量,尽管我没有获取事件 url。我不确定可能是什么原因以及是什么它的解决方案。但为什么它说

我在下面粘贴我的代码片段。

event.respondWith部分抛出错误。请建议如何解决这个问题。

编辑 :

0 投票
1 回答
1294 浏览

service-worker - 我的 PushRegistration 对象上不存在 keys 属性

我正在尝试在渐进式网络应用程序中实现推送通知,并在 Chrome 中使用新的有效负载支持。

我正在尝试将端点和密钥发送到服务器,但在 PushSubscription 对象上看不到 keys 属性...

如何访问密钥以便将它们发送到服务器?

0 投票
1 回答
1343 浏览

android - 修改 Progressive Web App 背景颜色

我有一个可以添加到主屏幕的 Progressive Web App。当(在移动设备上)点击主屏幕图标时,在打开实际应用程序之前会出现一个带有图标的(某种)欢迎页面。

我已将该欢迎屏幕的背景颜色设置为蓝色menifest.json。我需要把它变成棕色。我已经修改了menifest.json文件并更新了网站。但是手机似乎已经永久缓存了它,它仍然显示为蓝色。

我已经多次刷新页面并将网络应用程序多次添加到主屏幕。但它永远不会改变。

我还更改了service-worker.js. 然而没有运气!

0 投票
1 回答
3736 浏览

node.js - 使用 Angular2 的 Service Worker 推送通知

我试图拼凑通过服务工作者向用户推送通知的一般工作流程。

我已经遵循了这个Google Developers 服务工作者推送通知教程,目前正在考虑如何在一个基于用户的小型网络应用程序中实现这种事情以进行实验。

在我看来,支持推送通知的 Web 应用程序的一般工作流程如下:

  • 客户访问应用程序
  • 服务工作者产生一个推送通知端点
  • 客户端将端点发送到服务器
  • 服务器将端点与为其生成端点的当前用户相关联
  • 每当您的应用程序认为值得通知的事情发生时,服务器都会抓取与用户关联的推送通知端点,并点击它以向任何用户设备发送推送通知(可能在 Chrome 50+ 中带有数据有效负载) , ETC)

基本上我只是想确认我对这项技术的总体实施想法是准确的,否则如果我遗漏了什么,请获得反馈。

0 投票
1 回答
7106 浏览

google-chrome - use "navigator.serviceWorker.controller.postMessage" it will alway "TypeError: Cannot read property 'postMessage' of null"

I have the problem that after registering the service worker the navigator.serviceWorker.controller always is null.

I want to use postMessage to send a message to the service worker. However, navigator.serviceWorker.controller always returns null, and shows the error TypeError: Cannot read property 'postMessage' of null.

Sometimes I can use navigator.serviceWorker.controller.postMessage, but at other times navigator.serviceWorker.controller returns null, I am not sure how to deal with this issue...

I have done some research, but I still cannot fix my issue...

Has anybody any ideas?

Thanks, Terry

Here is the test page that I created. https://terrylee7788.github.io/test_web_worker.html

0 投票
3 回答
15205 浏览

wordpress - 将 WordPress 网站转换为 Progressive Web App

我正在构建一个渐进式 Web 应用程序,但到目前为止,在线文档和支持很少。我在这封电子邮件中列出了我所有的问题。

  1. Service Worker API(离线模式)目前对桌面的支持是什么?我写了一个小应用程序,它在移动设备(Android-Chrome)的离线模式下工作,但不适用于我的桌面(Chrome 42)。我们需要为此配置开发环境,因此我们需要知道我们需要什么来测试我们的应用程序。它甚至不适用于 IOS-Safari/Chrome。

  2. 服务工作广泛使用缓存,并且有一种很好的方法可以在 Dekstop Chrome 上调试或未注册的服务工作者内部;但是如果我在移动设备上运行我的应用程序,我将如何删除服务工作者缓存?

  3. 如果我有一个响应式应用程序(一个 WordPress 站点)并且需要将其转换为 PWA;我是否需要再次使用移动版本的 RestAPI 重写应用程序?(阅读 PWA 的 App Shell)。在 PWA 中,应用程序外壳与数据是分开的,但在 WordPress 等 CMS 中,数据并不与 UI 分开。

我一直在寻找这些答案很长时间,但无法找到任何适当的支持。

0 投票
1 回答
127 浏览

google-chrome - 推送通知:如何处理 Chrome 49 到 Chrome 50 的升级?

Chrome 49 不支持消息体;Chrome 50(计划于 2016 年 4 月 19 日发货可以。当用户从 Chrome 49 升级到 Chrome 50 时,我应该如何将他们从没有消息体的推送通知升级到消息体的推送通知?

0 投票
2 回答
1685 浏览

web-push - 我应该如何处理 pushsubscriptionchange 事件?

根据规范,一个pushsubscriptionchange事件表示“推送订阅已失效,或即将失效”。处理此事件的最佳做法是什么?

0 投票
2 回答
3078 浏览

web-push - 如何测试 pushsubscriptionchange 事件处理代码?

pushsubscriptionchange当推送通知服务器希望客户端重新订阅时,浏览器会触发该事件。如何手动触发此事件进行测试?