iOS PWA：如何（重新）启用拉动刷新？

Question

Stack Overflow 上有几个问题询问如何禁用下拉刷新，无论是在本机 iOS Safari 浏览器中访问其 Web 应用程序，还是作为独立（主屏幕）应用程序访问。

我的问题是如何启用它。不知何故，在我的应用程序中，拉动刷新功能在 Safari 中运行良好，但当应用程序作为独立的主屏幕应用程序打开时则不然。

我想添加所需的任何相关信息，但我不知道要指定什么。这是缩写

manifest.json

:

{
  "name": "x",
  "short_name": "x",
  "description": "x",
  "dir": "auto",
  "id": "https://www.myapp.io/",
  "lang": "en-US",
  "display": "standalone"
}

Answer 1

似乎对于 iOS 上的独立和全屏 PWA 应用程序明确禁用了拉动刷新。

我最终通过独立检查、pulltorefresh.js和一些 JavaScript 胶水重新实现了它。

const standalone =
  navigator.standalone ||
  window.matchMedia("(display-mode: standalone)").matches;
if (!standalone) {
  return; // not standalone; no pull to refresh needed
}

PullToRefresh.init({
  onRefresh() {
    location.reload();
  },
});

Answer 2

基于@Joonas，用于反应。

npm install pulltorefreshjs
npm install @types/pulltorefreshjs

我将其添加到我的根文件（main.tsx）

import PullToRefresh from "pulltorefreshjs"

...

const standalone = window.matchMedia("(display-mode: standalone)").matches
console.log("standalone:", standalone)
if (standalone) {
    PullToRefresh.init({
        onRefresh() {
            window.location.reload()
        },
    })
}