问题标签 [pwa]

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 投票
2 回答
12756 浏览

javascript - Web NFC api 可以在渐进式 Web 应用程序中使用吗?

我需要在 PWA(渐进式 Web 应用程序)中实现 NFC(近场通信)

我测试过的每个浏览器(Chrome MacOSX、Safari MacOSX、Safari iOS、Android 版 Chrome)都不包含navigator.nfc导航器中的对象,并且似乎无法使用此 API:https ://w3c.github.io/web-nfc /#一致性

是否可以在 PWA 中以任何方式使用 NFC?还是我必须为此功能开发本机应用程序?

0 投票
0 回答
704 浏览

ios - iPad youtube iframe embed pwa 在 youtube 应用程序中打开?

在 iPad iOS 9.3.5 上(可能在其他版本上可重现),当我们的 React 应用程序作为渐进式 Web 应用程序 (PWA) 添加到设备主屏幕时,单击视频剪辑链接会在 iframe 中打开一个带有嵌入式 youtube 链接的 div , 在 PWA 中渲染视频剪辑。

这是iframe代码:

如果 iPad 上未安装 youtube 应用程序:

  • 一切都按预期工作,单击查看视频链接时,可以看到一个 div,其中嵌入的 youtube 剪辑已准备好在 PWA 中播放和播放。

如果设备上安装了 youtube 应用程序(出现问题)

  • 单击视频链接时,它会打开 youtube 应用程序,并在那里播放视频。我们如何才能始终保持 PWA 中的体验,而无需重定向到已安装的 youtube 应用程序?

注意:如果通过 url 而不是主屏幕 PWA 访问 web 应用程序,iframe 在 safari mobile 中的 web 应用程序 url 中打开并在那里播放,正如预期的那样。只有在设备安装了 youtube 应用程序的情况下从 PWA 打开视频时才会出现此问题。

知道如何解决这个问题吗?

0 投票
1 回答
2736 浏览

ios - PWA 应用程序 - 使用 Angular 6 将图像和视频存储在本地存储中

我正在使用 Angular javascript 创建一个渐进式网络应用程序(PWA)。我需要存储从服务器下载的图像和视频。

我已经探索过本地存储和 IndexedDb,它们的存储大小都有限制。官方文件称,Safari 浏览器最多分配50 MB,Chrome 手机分配6% 的可用磁盘空间用于本地存储。

是否有任何选项可以将大尺寸的图像和视频存储在本地并在设备离线时在 PWA 应用程序中显示?

0 投票
1 回答
39 浏览

reactjs - React-管理多个页面

我正在开发使用 React 的 Progressive Web App。我遇到的问题是我不确定如何管理另一个页面。项目中有一个名为“index.html”的 html 文件。我应该创建更多并以某种方式在它们之间切换吗?我发现名为React Router的库似乎以不同的方式解决了问题(因为我也需要更改 url) .我不确定是否应该将其开发为一个动态页面,因为我将有数十个不同的页面。最好的做法是什么?

0 投票
1 回答
953 浏览

service-worker - Service Worker w offline.html 备份页面

我无法显示offline.html 页面。我不断得到The FetchEvent for "https://my-domain.com" resulted in a network error response: a redirected response was used for a request whose redirect mode is not "follow".

这是我的 service-worker.js 的片段,它应该offline.html在网络不可用时返回。

下面是我的网络请求的console.log(离线时页面刷新)

0 投票
1 回答
2495 浏览

logging - 如何记录 PWA 是否被视为网站或应用程序

我正在开发 PWA(渐进式网络应用程序),我希望能够跟踪是否有人只是将其视为网站,或者他们是否安装了它并将其视为应用程序。

有没有办法做到这一点?我想不出任何办法,因为它们都使用相同的文件(都使用 manifest.json 和 manifest.json 都指向同一个 index.html)。

Windows 10 允许从其应用商店安装 PWA。那时,您可能能够收集一些分析。不幸的是,这将是一个有限的安装基础(与仅从浏览器安装相比)。

0 投票
1 回答
2232 浏览

ionic-framework - PWA 服务工作者缓存/更新预期行为

我正试图了解 Ionic Angular 应用程序的服务工作者缓存。

我的目标是弹出一个警报:“有新的更新可用,点击重新加载应用程序”,

我相信我已经根据我的阅读遵循了所有正确的做法,但是由于我无法可靠地在更新后弹出警报,所以我遗漏了一些东西。它会弹出,但最多可能需要 24 小时 - 是预期的行为吗?

我正在使用四个文件:

  • 服务工作者.js
  • 索引.html
  • myapp.page.ts
  • .htaccess

在 service-worker.js 我:

  • 命名缓存
  • 设置更新时使用的 CACHE_VERSION
  • 使用工具箱设置网络/缓存优先级

.

在 index.html 我:

  • 创建一个承诺,以便我们可以从 myapp.page.ts 挂钩到 service worker 的 onupdatefound

.

在 myapp.page.ts 我关注了这篇文章:https://medium.com/progressive-web-apps/pwa-create-a-new-update-available-notification-using-service-workers-18be9168d717

  • 聆听我们在 index.html 中创建的承诺
  • 弹出警报
  • 当用户单击重新加载时,删除缓存并重新加载页面

.

在 .htaccess 我中:

  • 设置 service-worker.js 的标头,使其不会被缓存:

.

然后我增加 const CACHE_VERSION 值以导致 service-worker.js 文件发生变化。

我的期望是,当我增加 CACHE_VERSION 并返回到应用程序的已打开版本(选项卡)或打开应用程序的新选项卡时,它应该弹出警报或至少控制台日志显示有更新。这不会立即发生,而是可能需要一天的时间才能发生。

这是预期的行为还是我错过了什么?谢谢!

0 投票
1 回答
7427 浏览

android - PWA 有没有办法访问主机设备的电话号码?

我计划为 Android 设备开发一个渐进式 Web 应用程序 - 一个主要问题是 PWA 是否可以访问主机电话号码。我们的业务是向我们的业务合作伙伴提供廉价的手机,如果我们的 PWA 可以访问设备的电话号码,我们可以更轻松地进行 2 因素身份验证。

我认为 PWA 可以访问主机电话号码的方式是当用户从手机的主屏幕启动应用程序时。

这有可能吗?不幸的是,Dan 的这个很好的回答没有涵盖这个问题: Progressive Web Apps has vs. native apps and there is what features do in Android

0 投票
1 回答
430 浏览

ios - 我需要持久存储成员 ID 和电子邮件以在 iOS 上的渐进式 Web 应用程序中恢复活动会话

我正在研究将我管理的网站制作成渐进式 Web 应用程序的可能性,而不是在 iTunes 商店中维护一个 Webview 包装器应用程序。该站点作为 PWA 运行良好,唯一的问题是登录信息丢失,并且每次将 PWA 置于后台时访问者都必须重新登录。我发现了大量关于离线缓存的信息,但这不是我需要的。我需要浏览器会话数据在 PWA 中保持持久性。我查看了 cookie、localStorage 和 indexedDB ......一旦 PWA 被(暂停)推到后台,所有这些似乎都被淘汰了。

0 投票
1 回答
111 浏览

android - Android Chrome 上 PWA 安装的不同行为

我实际上正在制作 PWA。当我在 Android 8 上从 Google Chrome 67 安装应用程序时,我会注意到两种不同的行为:

  • 当我离线时,应用程序作为 PWA 完全安装并以独立模式启动。
  • 当我在线时,该应用程序未安装。Chrome 只是向我的网站添加了一个快捷方式,该快捷方式启动到 chrome 中(不是在独立模式下)。

我的 manifest.json 似乎正确填写了所需的指令(见下文):

我对这些行为感到惊讶,我真的不知道我做错了什么。有人可以帮帮我吗 ?

谢谢。