PWA:强制 window.open 打开浏览器而不是 PWA

2024-01-11

我构建了一个带有角度前端的 ASP.NET Core 应用程序。角度应用程序有@angular/pwa节点包设置,因此它是一个渐进式 Web 应用程序,可以安装在 android/windows 上,表现得像本机应用程序。

我已经使用 Microsoft.AspNetCore.Identity 设置了外部登录(Microsoft、Google、Facebook、Twitter)。从我的角度应用程序中,我打开一个外部登录页面的弹出窗口:

  this.authWindow = window.open(`${this.baseUrl}/web/v2/Account/${this.action}/${medium}/${this.platform}`, null, 'width=600,height=400');

弹出窗口的 url 路由到 ASP.NET Core 端点,我在其中有return Challenge()调用,返回特定外部提供商(Microsoft、Google、Facebook、Twitter)的登录页面。

在 Windows 上的 Chrome 中,单击触发 window.open() 的按钮以打开带有外部登录页面的窗口。成功登录后,您将被重定向到回调页面,这是一个剃刀页面,它将消息发送到包含角度应用程序的主窗口。正在处理消息并且正在关闭弹出窗口。

Problem

当我在 Android 版 Chrome 上使用该网站时,我可以将 PWA 安装为应用程序,这会在我的 Android 主页上添加一个图标。当我打开 PWA 并单击按钮打开弹出窗口时,该弹出窗口正在我的 PWA 的弹出窗口中打开,因此没有问题。

当我在 Android 上打开 Chrome 并访问该网站时,在安装了 PWA 的情况下,window.open()调用不会打开 Chrome 浏览器的弹出窗口,而是尝试打开渐进式 Web 应用程序的弹出窗口。既然如此,PWA 内的弹出窗口无法通知 Chrome 中的网站登录成功(废话……)。

但是当没有安装PWA时,window.open()工作正常并在 Chrome 本身中打开弹出窗口。

所以底线是,PWA安装在android上。我希望能够打电话window.open()从我的 Chrome 网站中打开弹出窗口Chrome浏览器而不是 PWA。

我尝试过的事情

  1. 修改ngsw-config.json

    { ..., “导航网址”:[ “/", "!//.", "!//__", "!//__/“, “!/web/v2/帐户/连接//“, “!/web/v2/帐户/添加//**" ] }

  2. 打开窗户target='_system'

    this.authWindow = window.open(${this.baseUrl}/web/v2/Account/${this.action}/${medium}/${this.platform}, '_system', '宽度=600,高度=400');

  3. 打开窗户target='_blank'

    this.authWindow = window.open(${this.baseUrl}/web/v2/Account/${this.action}/${medium}/${this.platform}, '_blank', '宽度=600,高度=400');

  4. 打开窗户target='_blank'没有baseUrl,只是一个绝对路径。

    this.authWindow = window.open(/web/v2/Account/${this.action}/${medium}/${this.platform}, '_blank', '宽度=600,高度=400');

  5. 使用 ngsw 绕过

    this.authWindow = window.open(/web/v2/Account/${this.action}/${medium}/${this.platform}?ngsw-bypass=true, '_blank', '宽度=600,高度=400');

但所有技巧似乎都表现相同,并且仍然在 PWA 中打开窗口。


我最终创建了一个托管我的端点以进行外部登录的子域(ExternalLogin, ExternalLoginCallback, AddExternalLogin, AddExternalLoginCallback):

[Controller]
[Route("web/v2/[controller]")]
public class AccountController : Controller
{
    private IAccountService accountService;
    public AccountController(IAccountService accountService)
    {
        this.accountService = accountService;
    }
    
    ...

    // GET: web/Account/providers
    [AllowAnonymous]
    [HttpGet("providers", Name = "web-v2-account-external-providers")]
    public async Task<ActionResult<IEnumerable<string>>> Providers()
    {
        var result = await accountService.GetProviders();
        return Ok(result);
    }

    // GET: web/Account/connect/{provider}
    [AllowAnonymous]
    [HttpGet("connect/{medium}/{provider}", Name = "web-v2-account-external-connect-challenge")]
#if RELEASE
    [Host("external.mintplayer.com")]
#endif
    public async Task<ActionResult> ExternalLogin([FromRoute]string medium, [FromRoute]string provider)
    {
        var redirectUrl = Url.RouteUrl("web-v2-account-external-connect-callback", new { medium, provider });
        var properties = await accountService.ConfigureExternalAuthenticationProperties(provider, redirectUrl);
        return Challenge(properties, provider);
    }

    // GET: web/Account/connect/{provider}/callback
    [HttpGet("connect/{medium}/{provider}/callback", Name = "web-v2-account-external-connect-callback")]
#if RELEASE
    [Host("external.mintplayer.com")]
#endif
    public async Task<ActionResult> ExternalLoginCallback([FromRoute]string medium, [FromRoute]string provider)
    {
        try
        {
            var login_result = await accountService.PerfromExternalLogin();
            if (login_result.Status)
            {
                var model = new LoginResultVM
                {
                    Status = true,
                    Medium = medium,
                    Platform = login_result.Platform
                };
                return View(model);
            }
            else
            {
                var model = new LoginResultVM
                {
                    Status = false,
                    Medium = medium,
                    Platform = login_result.Platform,

                    Error = login_result.Error,
                    ErrorDescription = login_result.ErrorDescription
                };
                return View(model);
            }
        }
        catch (OtherAccountException otherAccountEx)
        {
            var model = new LoginResultVM
            {
                Status = false,
                Medium = medium,
                Platform = provider,

                Error = "Could not login",
                ErrorDescription = otherAccountEx.Message
            };
            return View(model);
        }
        catch (Exception ex)
        {
            var model = new LoginResultVM
            {
                Status = false,
                Medium = medium,
                Platform = provider,

                Error = "Could not login",
                ErrorDescription = "There was an error with your social login"
            };
            return View(model);
        }
    }

    // GET: web/Account/logins
    [Authorize]
    [HttpGet("logins", Name = "web-v2-account-external-logins")]
    public async Task<ActionResult<IEnumerable<string>>> GetExternalLogins()
    {
        var logins = await accountService.GetExternalLogins(User);
        return Ok(logins.Select(l => l.ProviderDisplayName));
    }

    // GET: web/Account/add/{provider}
    [Authorize]
    [HttpGet("add/{medium}/{provider}", Name = "web-v2-account-external-add-challenge")]
#if RELEASE
    [Host("external.mintplayer.com")]
#endif
    public async Task<ActionResult> AddExternalLogin([FromRoute]string medium, [FromRoute]string provider)
    {
        var redirectUrl = Url.RouteUrl("web-v2-account-external-add-callback", new { medium, provider });
        var properties = await accountService.ConfigureExternalAuthenticationProperties(provider, redirectUrl);
        return Challenge(properties, provider);
    }

    // GET: web/Account/add/{provider}/callback
    [Authorize]
    [HttpGet("add/{medium}/{provider}/callback", Name = "web-v2-account-external-add-callback")]
#if RELEASE
    [Host("external.mintplayer.com")]
#endif
    public async Task<ActionResult> AddExternalLoginCallback([FromRoute]string medium, [FromRoute]string provider)
    {
        try
        {
            await accountService.AddExternalLogin(User);
            var model = new LoginResultVM
            {
                Status = true,
                Medium = medium,
                Platform = provider
            };
            return View(model);
        }
        catch (Exception)
        {
            var model = new LoginResultVM
            {
                Status = false,
                Medium = medium,
                Platform = provider,

                Error = "Could not login",
                ErrorDescription = "There was an error with your social login"
            };
            return View(model);
        }
    }
}

在 PWA 中运行时,window.open仍会在 PWA 内的嵌入式浏览器内打开链接,并且从浏览器运行时window.open仍会在新的浏览器窗口(而不是在 PWA 中)打开链接。在这两种情况下,我仍然可以访问开启器来发送消息(window.opener.postMessage).

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

PWA:强制 window.open 打开浏览器而不是 PWA 的相关文章

  • 如何在已安装的 PWA 应用程序上推送应用程序更新?

    我的问题是 用户是否可以在无需重新安装 PWA 应用程序的情况下获取这些更改 我在生产中部署了一个 PWA 应用程序 客户端已在其移动设备中安装了已部署的 PWA 应用程序 我想在 HTTP 服务器中的 PWA 应用程序中部署另一个更新补丁
  • 聚合物服务和服务人员

    我正在尝试开始调试我的聚合物应用程序 我通过复制我的想法手工制作了它PolymerCLI Polymer init does 我不确定正在加载服务人员的是什么 开发的默认选项只做了一个console info 打电话说它已被禁用以进行开发
  • PWA:强制 window.open 打开浏览器而不是 PWA

    我构建了一个带有角度前端的 ASP NET Core 应用程序 角度应用程序有 angular pwa节点包设置 因此它是一个渐进式 Web 应用程序 可以安装在 android windows 上 表现得像本机应用程序 我已经使用 Mic
  • VueJS webpack PWA 资产图标 manifest.json

    我配置了我的 PWAmanifest json in vue config js 如下所示 如何配置 PWA 图标以引用内部的图像assets folder module exports pwa manifestOptions name p
  • 如何在 PhantomJS 中捕获 window.open(url, _blank) 打开的新窗口?

    我想用 PhantomJS 检查我的脚本是否在单击时正确打开新窗口 选项卡 open是由js事件监听触发并通过window open url blank 如何使用 PhantomJS 监听新窗口 似乎有三种方法可以做到这一点 页面创建时 C
  • Service Worker 可以缓存 POST 请求吗?

    我尝试在 fetch 事件的服务工作人员中缓存 POST 请求 I used cache put event request response 但返回的承诺被拒绝TypeError Invalid request method POST 当
  • 我应该如何处理pushsubscriptionchange事件?

    根据规格 https www w3 org TR push api the pushsubscriptionchange event a pushsubscriptionchange事件表示 推送订阅已失效 或即将失效 处理此事件的最佳做法
  • 我们可以在 PWA 应用程序中使用 SQLite 数据库吗

    我正在创建渐进式网络应用程序应用程序 我想将用户信息存储在本地设备中 那么 我该如何做到这一点 如何存储用户登录信息 以便他不必一次又一次登录 浏览器没有 SQLite 您可以使用更接近的方法索引数据库 https caniuse com
  • Service Worker skipWaiting 无法激活当前等待的软件

    描述 我们使用 sw precache 来预先缓存脚本 因此为了更新脚本 我们提供了重新加载选项 为此 我们正在监听工作人员消息 以跳过等待新安装的服务工作人员 原因未知 我们没有得到正确的结果 导入脚本 GETTING OLD SW re
  • 如何向 PWA 标题栏添加返回和刷新按钮

    我正在编写一个 PWA 应用程序 我想要的是back and refresh标题栏上的按钮 但我什么也没得到 更新 按钮应该由浏览器控制 而不是我的用户界面 The display清单文件中的属性必须是fullscreen or stand
  • 难以通过网络蓝牙连接热敏打印机

    现在我正在开发能够连接热敏打印机的网络 我正在使用 Angular 框架 并且我使用库成功将热敏打印机与 USB 连接ng thermal printer 但我希望我的网络也能够通过网络蓝牙 BLE 蓝牙低功耗 连接热敏打印机 据我所知 B
  • 如何在React项目中添加Service Worker

    我想在我的 React 项目中添加 Service Worker 项目已准备就绪 默认服务似乎不起作用 即使当我尝试导入它时 它也会出现以下错误 尝试导入错误 registerServiceWorker 不包含默认导出 导入为 regist
  • 在渐进式 Web 应用程序中使用系统应用程序打开文件

    我试图弄清楚是否可以使用默认系统应用程序从渐进式 Web 应用程序打开文件 这个想法是 PWA 将存储一些文件 例如 docx 文件 以供离线使用 并且用户无需 重新 下载它们即可打开它们 理想的情况是 PWA 能够将文件加载到内存中 使其
  • 渐进式 Web 应用程序的预期启动体验是什么?

    测试渐进式 Web 应用程序 当我在飞行模式下启动应用程序时 我得到了意外的启动 启动体验 Android Chrome 从主屏幕体验启动 我看到一个白色的屏幕 然后是 离线恐龙 的短暂闪烁 然后应用程序成功启动 一切正常 启动时间比我预期
  • 带offline.html 备份页面的Service Worker

    我无法显示offline html 页面 我不断得到The FetchEvent for https my domain com resulted in a network error response a redirected respo
  • 有没有办法在 Google Play 上提交reactjs PWA?

    我想使用 一次编写 到处运行 所以我用create react app在reactjs中创建了一个PWA 我的应用程序运行良好 我可以将其从网站放在手机的主屏幕上 不过 我也希望在移动商店中可见 从 Google Play 开始 I tri
  • 如果是 Edge 浏览器,则将自定义参数传递给 window.open

    从父窗口说 A 尝试使用 window open 打开另一个窗口 ChildWindow htm 我无法从 A 传递字符串值 var dialog window open Child Window htm title width 550px
  • IE 不会在使用 window.open 创建的窗口中加载 PDF

    问题就在这里 仅发生在 Internet Explorer IE 中 我有一个页面 其中包含指向几种不同类型文件的链接 这些文件中的链接执行一个 Javascript 函数 该函数打开一个新窗口并加载特定文件 这非常有效 除非我需要在新窗口
  • Angular PWA 离线存储

    我正在构建一个新的 Web 应用程序 即使没有互联网连接 它也需要无缝工作 我选择了 Angular 并正在构建一个 PWA 因为它具有使应用程序离线工作的内置功能 到目前为止 我已经让服务工作人员完美工作并由清单文件驱动 这很好地缓存了静
  • 如何使用 Laravel Mix 和 WorkBox?

    我正在尝试为我的应用程序构建一个 PWA 并花了近 48 小时试图弄清楚如何将 Workbox 与 Laravel Mix 结合使用 具有讽刺意味的是 谷歌说 Workbox 是为了让事情变得简单 Buh 好吧 到目前为止我已经弄清楚了 我

随机推荐

  • 找不到函数“kable_pipe”/“kable_simple”

    我正在尝试使用创建一个表knitr kable head mtcars 1 4 simple knitr kable head mtcars 1 4 pipe 虽然这应该按照https bookdown org yihui rmarkdow
  • Swift 3 - NSFetchRequest 不同的结果

    任何帮助表示赞赏 Xcode 自动更新到 8 我的目标是 IOS 9 3 已转换所有代码 但现在有一件事打破了 我在类似问题中尝试了各种建议 我的获取请求was以前的工作现在被打破了 我的目标是获得一份独特的清单 应用程序上线崩溃 let
  • 如何使用 JAXB 注释指定模式约束?

    我正在使用 JAX WS 和 JAXB 开发 SOAP 应用程序 我想为其中一个字段指定模式约束 荷兰邮政编码 d 4 A Z 2 使用这很容易做到xsd pattern 但我找不到等效的 JAXB 注释 我该如何实现这一目标 你不能 这个
  • Azure DevOps - 在 Git 子模块中使用 YAML 模板

    所以我有1个项目的11个存储库 它们都是微服务 我有一个名为 DevOps 的存储库 其中必须在 YAML 构建之间共享的所有内容都使用 Git 子模块进行共享 由于某种原因 我似乎无法引用 git 模块中的 yaml 模板 Options
  • 是否可以使用 PlantUML 绘制独立的箭头?

    我正在创建一个带有不同类型箭头 直线 虚线 点线等 的图表 但我不想为每个箭头添加标签 而是想创建一个图例 其中replica每种箭头类型的旁边都会显示其含义 有没有办法告诉 PlantUML 简单地绘制特定箭头类型的一小部分 有没有办法告
  • Django 版本更新 Django: 3.1.9 从 Django: 3.1.8 后出现错误“SuspiciousFileOperation”

    更新到 Django 3 1 9 后 我收到此错误 在 Django 3 1 8 上它工作正常 我有一个带有 FileField 的文件模型 如下所示 class JobFiles BaseModel category models Cha
  • Kestrel 是否像 Node.js 一样使用单线程来处理请求?

    Both Kestrel https learn microsoft com en us aspnet core fundamentals servers kestrel and Node js https nodejs org en ab
  • Blackberry 9800 模拟器在启动浏览器时崩溃

    Blackberry 9800 模拟器在启动浏览器时崩溃 抛出异常 JVM 错误 104 未捕获 非法状态异常 这是模拟器的全新安装 没有安装任何第三方应用程序 我非常想用它来测试 Web 应用程序 设备上的所有其他应用程序似乎都可以正常运
  • UIDEVICE方向

    大家好 我有我的启动屏幕 我想以横向模式显示它 并以纵向模式显示所有其他屏幕 我的根视图控制器充当启动屏幕我正在 viewdidload 方法中编写此代码 UIDevice currentDevice setOrientation UIIn
  • 部署 Symfony2 项目

    我们正在开发一个 Symfony2 项目 现在 它已完成并准备部署 我们将整个项目文件上传到服务器 当然通过 ftp 和数据库 现在 当我们打开它的任何页面时 我们都只是一个空白页面 空源代码 缓存是干净的 日志没有显示任何新内容 我们在
  • beautifulSoup中attrMap和attrs的区别

    我想知道有什么区别attrMap and attrs in 美丽汤 http www crummy com software BeautifulSoup 更具体地说 哪些标签有attrs以及哪些有attrMap gt gt gt soup
  • 没有为 WebJob 注册路由

    我已经设置了一个链接到网站的 Azure WebJob 工作正常 我似乎遇到了很多这样的错误 Http Action Response from host site scm azurewebsites net NotFound Respon
  • 使用实体框架迁移删除或重新创建数据库(代码优先)

    这是命令recreate or drop使用实体框架迁移时的数据库 not Initializers 我应该在上面写什么package manager console COMMENT 我正在寻找一些可以为我提供相同功能的命令Database
  • CSS 过滤器反转规则打破了 Chrome 68 上的固定位置[重复]

    这个问题在这里已经有答案了 我使用的是 Chrome 68 每当我有filter invert xxx on the 任何定位为fixed不会粘在屏幕上 它会随所有内容一起滚动 演示与filter invert xxx body heigh
  • ListBox.SelectedIndexChanged 第一次不会触发[重复]

    这个问题在这里已经有答案了 我有一个绑定到 BindingList 的 ListBox 默认情况下该 ListBox 为空 当选定的索引更改时 它应该使用选定对象中的数据更新其他控件 问题是 SelectedIndexChanged 事件不
  • 如何在 android studio (Camera2) 中获得相机分辨率

    我只需要设备的相机分辨率 以像素为单位 我已经尝试过这个 但它在我的应用程序上没有显示任何内容 我想我错过了一些东西 RequiresApi api Build VERSION CODES LOLLIPOP Override protect
  • SQL 不等于或为空

    我们想写这个查询 select from table where col1 blah and col2 something 我们希望查询包含 col1 为 null 并且 col2 something 的行 目前 查询不会对 col1 为空
  • 如何使用 Azure Monitor 或 ADF 本身触发 Azure 数据工厂 V2 中长时间运行的进程的警报通知?

    我一直在尝试找到当 ADF 任务 即 CopyActivity 或存储过程任务 运行超过 N 小时时触发警报的最佳方法 我想使用 Azure Monitor 因为它是推荐的通知之一Azure 中的服务 但是我无法找到 正在运行 的标准 因此
  • django 中的 django NoReverseMatch 异常

    我已经尝试了该网站上的许多解决方案来解决该问题 但仍然收到错误消息 我在这里放置了所有需要的信息 视图 py def about request return render to response homepage about html u
  • PWA:强制 window.open 打开浏览器而不是 PWA

    我构建了一个带有角度前端的 ASP NET Core 应用程序 角度应用程序有 angular pwa节点包设置 因此它是一个渐进式 Web 应用程序 可以安装在 android windows 上 表现得像本机应用程序 我已经使用 Mic