据我所知,一旦你在PWA的网站上点击"添加到主屏幕",浏览器就会使用提供的清单文件和源生成一个.apk,并像普通应用程序一样安装它.
我注意到,当我更新网站时,该应用程序还会显示更新的内容,这表明该应用程序只是访问该网站的包装器.我还注意到网站的更新没有立即显示,我认为这是由于内部缓存.
我的问题是,我的假设是否正确?或者更一般地说,PWA何时以及如何更新并且有没有办法在客户端计算机上强制更新?
我应该如何构建一个包含主线程(DOM)脚本和工作程序的项目?例如:
// This file must have DOM types, but not worker types.
const worker = new Worker('worker.js');
worker.onmessage = (event) => {
// Ideally, I should be able to reference types from the worker:
const data = event.data as import('./worker').HelloMessage;
console.log(data.hello);
};
Run Code Online (Sandbox Code Playgroud)
// This file must have worker types, but not DOM types.
// The global object must be one of the worker globals (how do I pick which?)
const helloMessage = {
hello: 'world',
};
export type …Run Code Online (Sandbox Code Playgroud) worker服务项目模板和windows服务项目模板有什么大的区别,哪个更好用?
我什么时候可以使用工人服务和 Windows 服务?
我们正在运行渐进式网络应用程序,并为Chrome和三星互联网启用推送通知,并鼓励我们的用户将其添加到主屏幕.我们严格记录和监控浏览器异常,以保持高质量的服务.
自2018年5月22日以来,我们注意到令人费解的JavaScript异常的突然增加,这些异常源于对先前从未失败过的标准,功能检测到的Web API的调用.
例如,以下代码将产生以下错误,尽管"推"显然是每个Permissions.query()规范的有效值:
const permissionStatus = await navigator
.permissions
.query({ name: 'push', userVisibleOnly: true });
Run Code Online (Sandbox Code Playgroud)
TypeError: Failed to read the 'query' property from 'Permissions': The provided value 'push' is not a valid enum value of type PermissionName.
经过仔细检查,我们注意到所有这些错误都发生在脚本执行过程中,而不是我们实际客户的用户代理.相反,我们在用户访问后立即看到未知客户端查询我们的应用程序:
此未知客户端执行带有特征模式的HTTP请求:
更重要的是,这些请求只能以看似受控的方式间歇性地发生,如上面的日期和下图所示:
在大多数情况下,我们检测到"添加到主屏幕"的使用情况,这让我们想知道这是否可能是与WebAPK有关的实验.然而,这是无证的,因此非常令人费解.
什么是这个未知的谷歌客户端?
它的目的是什么?
开发人员应如何检测它们,以及应采取哪些措施?
2018年8月更新:如上所述的请求现在似乎已经完全消失了......但它们可能是我们现在看到的某种类似请求的某种原型.这些新类型的请求仍然来自Google服务器,并且似乎专门针对我们的PWA的Web Manifest,因此不再触发JavaScript错误.它们都带有明确后缀的Chrome/59 +用户代理字符串(via Google-Chrome-WebAPK).其他浏览器,如三星互联网,尚未被发现.
android google-chrome service-worker progressive-web-apps samsung-browser
真的很快就要讨论了,因为我想得到不同人的意见.
我正在开发一个必须离线可用的网页应用程序.
现在要做到这一点,据我所知,您将使用应用程序缓存功能或使用服务工作者.
但是,这是我的难题.在研究应用程序缓存时,MDN明确指出:
不推荐使用:
此功能已从Web标准中删除.虽然有些浏览器可能仍然支持它,但它正在被删除.不要在旧项目或新项目中使用它.使用它的页面或Web应用程序可能随时中断.
之后,另一个对话框建议使用服务工作者.
然后,Service Workers页面继续说明Service Workers是一种实验性技术,最好参考兼容性表.
兼容性表说Safari和Internet Explorer不支持Service Workers.进一步咨询该网站,并假设它是准确的,它表示微软已经开始整合服务工作者的工作,但对于Safari,他们"正在考虑""五年计划中的短暂积极信号".
现在这是当前项目的一个问题,因为它必须与Safari兼容,但是,我也不希望它在其他浏览器中破解.
你的建议是什么?只需使用较旧的应用程序缓存并在不久的将来更新?确定用户浏览器并采取适当的行动?或者,我还有另一种方法吗?
html5 application-cache offline-caching offlineapps service-worker
(我正在解释Rich Harris在" 我希望我早点知道服务工作者的事情 "这个问题上提出的问题.)
如果我的服务工作者中的代码在事件处理程序之外运行,它何时运行?
而且,与此密切相关的是,放入install处理程序并将其完全放在事件处理程序之间有什么区别?
当服务工作者更新时,它不会正确控制页面; 它进入"等待"状态,等待激活.
令人惊讶的是,更新后的服务工作人员在刷新页面后甚至无法控制选项卡.谷歌解释说:
https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle
即使您只有一个标签打开演示,刷新页面也不足以让新版本接管.这是由于浏览器导航的工作原理.导航时,当前页面在收到响应标头之前不会消失,即使这样,如果响应有
Content-Disposition标题,当前页面也可能保留.由于这种重叠,当前服务工作者总是在刷新期间控制客户端.要获取更新,请使用当前服务工作人员关闭或远离所有选项卡.然后,当您再次导航到演示时,您应该看到马[更新内容].
此模式与Chrome更新的方式类似.Chrome在后台下载更新,但在Chrome重新启动后才会应用.同时,您可以继续使用当前版本而不会中断.然而,这在开发过程中是一种痛苦,但DevTools有办法让它变得更容易,我将在本文后面介绍.
在多个选项卡的情况下,此行为是有意义的.我的应用程序是一个需要自动更新的包; 我们不能混合和匹配旧捆绑的一部分和新捆绑的一部分.(在本机应用程序中,原子性是自动且有保证的.)
但是在单个选项卡的情况下,我称之为应用程序的"最后打开选项卡",这种行为不是我想要的.我想刷新最后一个打开的标签来更新我的服务人员.
(很难想象当最后一个打开的标签刷新时,任何人都希望旧的服务工作者继续运行.谷歌的"导航重叠"论证听起来像是一个不幸的错误的好借口.)
我的应用通常只在一个标签中使用.在生产中,我希望我的用户能够通过刷新页面来使用最新的代码,但这不起作用:旧的服务工作者将在刷新时保持控制.
我不想告诉用户,"要接收更新,请务必关闭或远离我的应用." 我想告诉他们,"只是刷新."
当用户刷新页面时,如何激活更新的服务工作者?
编辑:有一个答案我知道这是快速,简单和错误:skipWaiting在服务工作者的安装事件中.skipWaiting将使新服务工作程序在更新下载后立即生效,同时打开旧页面选项卡.这使得更新不安全地非原子化; 这就像在应用程序运行时替换本机应用程序包.那对我来说不行.我需要等到用户刷新上一个打开的选项卡的页面.
自谷歌Chrome的新版本(版本69.0.3497.92(官方版本)(64位))以后,我无法在导航器中找到serviceWorker服务.实际上,我可以按如下方式注册我的服务工作者,但现在我收到一个错误,在导航器中找不到serviceWorker:
if('serviceWorker' in navigator) {
/*
*
* Register the Service Worker
*
* */
navigator.serviceWorker.register('sw.js').then(function(registration) {
console.log('Service Worker Registered');
});
} else console.log('Your browser does not support the Service-Worker!');
Run Code Online (Sandbox Code Playgroud)
我现在如何再次使用Service Worker,或者如何让它再次运行所有Chrome版本?
我知道我可以在台式机或Android设备上使用Chrome来"添加到主屏幕".我知道我可以在Safari iOS中使用"添加到家庭屏幕".
但是,我可以在Chrome for iOS中使用"添加到主屏幕"功能吗?
谢谢,韦恩
installation google-chrome service-worker progressive-web-apps
我正在写一个图书馆,我将为第三方提供在其网站上运行服务工作者的图书馆.它需要拦截所有网络请求,但我想让他们建立自己的服务工作者,如果他们喜欢.
我可以让两个服务工作者拦截相同的提取并在它们之间提供某种优先级/顺序吗?或者我应该使用其他一些模式吗?
谢谢
service-worker ×10
android ×2
apk ×1
c# ×1
html5 ×1
installation ×1
javascript ×1
manifest ×1
offlineapps ×1
typescript ×1
web-worker ×1