标签: pwa
Vue Cli 3如何使用官方PWA插件(Service Worker)
在我的第一个vue项目试图与官方PWA插件(https://github.com/yyx990803/register-service-worker)搏斗.我的具体问题:捕获已注册的服务工作者并将其用于任何事情.github自述文件显示了生成的确切文件,并且在实例化后,似乎没有关于如何使用此服务工作者的文档(我是否捕获了注册实例？如果是,如何？)
我发现了这个问题:https://github.com/vuejs/vue-cli/issues/1481 并提供了一个更好的讨论这个问题的地方,因为我找不到任何示例代码或明确的文档如何与此合作.
如果有人有一些示例代码,请分享.Vue和新的cli是令人难以置信的工具,记录这样的事情是增加平台采用的必要步骤
推荐指数
解决办法
查看次数
服务工作者可以缓存POST请求吗？
我尝试在fetch事件中缓存服务工作者的POST请求.
我用了cache.put(event.request, response),但退回的承诺被拒绝了TypeError: Invalid request method POST..
当我尝试使用相同的POST API时,caches.match(event.request)给了我未定义的内容.
但是当我为GET方法做同样的事情时,它起作用了:caches.match(event.request)因为GET请求给了我一个响应.
服务工作者可以缓存POST请求吗？如果他们不能,我们可以使用什么方法使应用程序真正脱机？
推荐指数
解决办法
查看次数
Angular Service Worker SwUpdate.available未触发
我很难将angulars服务工作者整合到我的应用程序中.我按照指南进行操作至今.我可以在主屏幕上创建一个快捷方式并启动到我的应用程序中.问题是我的应用程序不知何故不更新.如果我改变一个按钮的名称,构建应用程序,并把它放到我的服务器应用程序仍显示旧版本,直到我打了F5(重新启动应用程序并没有帮助).
我试着将以下代码放入我的应用程序的ngOnInot中,但它没有帮助
ngOnInit() {
if (this._SwUpdate.isEnabled) {
setInterval( () => {
this._SwUpdate.checkForUpdate().then(() => console.log('checking for updates'));
}, this.updateInterval);
this._SwUpdate.available.subscribe(() => {
console.log('update found');
this._SwUpdate.activateUpdate().then(() => {
console.log('updated');
window.location.reload();
});
});
}
}
该应用程序正在我的apache2 linux机器上运行.我的apache缓存了什么,或者为什么我的应用程序没有意识到有新版本？
在此先感谢您的帮助 :)
编辑:
我的ngsw-config.json
{
"index": "/index.html",
"assetGroups": [{
"name": "roomPlan",
"installMode": "prefetch",
"resources": {
"files": [
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}]
}
编辑2:
如果我使用"http-server"在本地运行应用程序,但是当我将文件复制到我的apache时,它不会检测到更新.在网络选项卡中,我可以看到间隔工作,应用程序每隔3秒从服务器获取一个新的"ngsw.json".如果我更新我的应用程序,我可以看到"ngsw.json"的响应中有新的哈希值.之后,浏览器从我的服务器加载新的"index.html"和"main.***.js",但应用程序不应用新版本.根据我的代码,它应该说"发现更新",但没有任何反应.
推荐指数
解决办法
查看次数
从外部URL打开已安装的PWA
是否有任何方法可以在iOS-Safari中安装的PWA中打开网站(PWA)网址？
使用案例:我正在发送电子邮件链接以登录我的PWA,如何使用已安装的PWA而不是浏览器直接打开此URL？
推荐指数
解决办法
查看次数
Web NFC api可用于渐进式Web应用程序吗？
我需要在PWA中实现NFC(近场通信)(渐进式网络应用)
我测试的每个浏览器(Chrome MacOSX,Safari MacOSX,Safari iOS,Chrome for android)都不包含navigator.nfc导航器中的对象,似乎无法使用此API:https://w3c.github.io/web-nfc/#conformance.
是否可以在PWA中以任何方式使用NFC？或者我是否必须为此功能开发本机应用程序？
推荐指数
解决办法
查看次数
PSR如何与SSR结合使用
如何使用PWA（渐进式Web应用程序）进行SSR（服务器端渲染）？
据我了解，
固态继电器
SSR运行时将加载页面并运行必要的脚本以将数据加载到页面上。然后返回呈现的html。这对于不运行javascript的Web爬网程序和没有脚本的浏览器很重要。至少第一印象将可用。
PWA
除其他外，PWA需要具有一个外壳，该外壳将被缓存，并且数据将在其之后。这意味着，即使用户处于脱机状态，shell也将被加载。
？
因此，如果我们要预先渲染数据，那么如何缓存与数据分开的外壳呢？
推荐指数
解决办法
查看次数
我的PWA网络应用程序在Safari上发布新版本后仍然显示旧版本(但在Chrome上工作正常)？
我在现有的基于Angular 5的网络应用程序中添加了PWA和服务工作者.在第一次发布时,一切看起来都很好.但是,当我尝试发布更新时,会发生一些奇怪的事情.
在使用Chrome的PC上,我没有问题.每次发布后,我都会收到警报,要求我更新新版本,这很棒.
但是,iOS上缺少此警报,这可能没问题,因为iOS不支持自动更新,但据我所知.如果我在iOS上使用Chrome,我可以在手动刷新后获得新版本(有时需要刷新一些内容).但是,Safari浏览器通常不会显示新版本.如果我不断刷新页面,最终会出现新版本,但是在我关闭并重新打开它之后会再次出现.在我玩的时候,我到达新版本的唯一方法是先手动清除Safari缓存.这对普通用户来说是不可接受的.
我知道iOS对PWA的支持有限,但这是我们在iOS上获得的最多的东西吗？如果没有自动更新,iOS用户如何知道新版本并更新它？
推荐指数
解决办法
查看次数
如何防止PWA在新的Safari窗口中打开链接和Auth0单点登录验证
我有一个问题,我已经创建了一个有角度的PWA,我的应用程序使用auth0-lock作为其身份验证,现在我的问题是..当您单击其中一个单一登录选项(例如Google)时,您将被取出PWA和野生动物园,有什么办法可以阻止这个？
我已经尝试将此代码放在我的index.html中
<!-- Prevent app from opening new safari page -->
<script type="text/javascript">
(function(document,navigator,standalone) {
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode=e.target;
while (!(stop).test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
// Condidions to do this only on links to your own app
// if you want all links, use if('href' in curnode) instead.
if('href' …推荐指数
解决办法
查看次数
PWA manifest.json - “theme_color”和“background_color”不起作用，启动画面未显示在安卓设备上
当我在 Chrome DevTools 中查看 manifest.js 时，我可以看到徽标和颜色都在那里。但是，当我在 Android 设备上从主屏幕启动网站时，既没有加载背景颜色也没有加载主题颜色，也没有显示启动画面。知道为什么吗？
清单.json：
{
"short_name": "Example",
"name": "Example",
"icons": [
{
"src": "images/logo_192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/logo_512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./",
"display": "standalone",
"theme_color": "#a300c4",
"background_color": "#c46a00"
}
截屏：
编辑
我发现了错误。我使用 Chrome DevTools 通过远程设备浏览网站。端口转发到 localhost:3000 不符合 https 要求触发启动画面。
现在 pwa 以独立模式启动，颜色和闪屏显示正确。
但是，没有显示初始屏幕徽标，我不知道为什么。图像的路径是正确的，并且图像存在正确的文件名和类型。
有什么建议？
推荐指数
解决办法
查看次数
同一个域中的多个 PWA
是否可以在同一端点下托管多个 PWA。比如说，我在 root 下有三个不同的 PWA，然后 root 应该以这样的方式托管这 3 个 PWA，这样当我通过链接或菜单切换到任何其他应用程序时，它不应该在不同的窗口中打开。目前，每当我点击不同的应用程序时，它都会作为网络应用程序在不同的窗口中打开。
谢谢，拉胡尔
推荐指数
解决办法
查看次数