在移动设备上浏览PWA

时间:2018-03-17 11:02:10

标签: javascript android mobile progressive-web-apps

所以我今天正在探索PWA并遵循Your First Progressive Web App。它需要5分钟,并在我的笔记本电脑上工作,但问题是,我无法弄清楚如何通过我的手机浏览它。所以我搜索并找到How can I access my localhost from my Android device?但不幸的是,那里提供的答案对我不起作用。

为什么会这样? PWA是否需要一些不同类型的设置?我对此错了吗?在Adiitionally我找不到任何教程,让你实际在移动设备上浏览你的PWA。为什么呢?

3 个答案:

答案 0 :(得分:1)

虽然Your First Progressive Web App教程告诉您在localhost中启动服务器。正如@Anand所提到的,您将无法简单地访问手机中的PWA。

简单解决方案是使用ngrok。使用它将为您的Web应用程序公开一个公共URL,您可以在任何所需的设备中访问它。

只需从here安装ngrok即可。 干杯;)

答案 1 :(得分:0)

在任何设备浏览器中访问PWA与访问任何其他网站相同。您只需使用网址进行访问。

您的案例中的问题似乎是因为您在移动设备中将其作为“localhost”访问。如果您在桌面上运行Web应用程序,并且您的移动设备也连接到同一网络,请使用其IP地址访问它。说

https://192.168.1.1/myapp/代替https://localhost/myapp/。当你把localhost放在任何设备中时,它指的是本地设备(你的机器人是你的手机),它实际上并没有运行网络应用程序及其笔记本电脑,这不是本地的,而是远程的Android手机。

你也可以将你的Android应用程序打包为apk并侧载它。 Try this site.

答案 2 :(得分:0)

我有一个类似的问题。我安装了ngrok并访问了它从设备提供的URL。它完全正常。后来我通过了链接

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

在设置中,我启用了“发现USB设备并设置端口转发。然后,我能够在实际设备中浏览和调试PWA(在笔记本电脑上运行)。我知道您是否有设备在开发机器旁边,您可以使用远程设备USB调试。如果要从远程显示演示,可以使用ngrok。希望这会有所帮助!