标签: progressive-web-apps

我有一个具有安全连接 (https) 的已部署应用程序。
我设法使用 Google Chrome 中的此功能将其添加到我的 Android 主屏幕：

问题是，如果我不在应用程序中添加执行此操作的按钮，用户不太可能执行此操作。

经过一番研究后，我尝试将此处的代码改编为我的 React 应用程序。
所以我改变了这个：

let deferredPrompt;
const addBtn = document.querySelector(".add-button");
addBtn.style.display = "none";
window.addEventListener("beforeinstallprompt", (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to notify the user they can add to home screen
  addBtn.style.display = "block";

  addBtn.addEventListener("click", (e) => {
    // hide our user interface that …

我正在使用sw-precache通过Polymer CLI构建过程生成我的服务工作,因此它旨在更新更新文件的哈希,以表示需要更新缓存.但是我的更新内容没有在缓存中被替换,所以如果我用ctrl + r刷新它会得到一个旧版本但是如果我用ctrl + shift + r刷新则会得到新版本.原因可能是我的服务工作者没有更新.

该文件指出

如果服务工作文件中的字节差异与其当前的差异,则认为它是新的.

,但是如果我的新服务工作者没有更改字节呢？(如果只有一个哈希发生了变化就会发生).如何配置sw-precache以在每次新请求时更新服务工作？

我开始学习PWA(渐进式Web应用程序),我遇到问题,控制台"抛出"错误未捕获(在承诺中)TypeError:无法获取.

任何人都知道原因可能是什么？

let CACHE = 'cache';

self.addEventListener('install', function(evt) {
    console.log('The service worker is being installed.');
    evt.waitUntil(precache());
});

self.addEventListener('fetch', function(evt) {
    console.log('The service worker is serving the asset.');
    evt.respondWith(fromCache(evt.request));
});
function precache() {
    return caches.open(CACHE).then(function (cache) {
        return cache.addAll([
            '/media/wysiwyg/homepage/desktop.jpg',
            '/media/wysiwyg/homepage/bottom2_desktop.jpg'
        ]);
    });
}
function fromCache(request) {
    return caches.open(CACHE).then(function (cache) {
        return cache.match(request).then(function (matching) {
            return matching || Promise.reject('no-match');
        });
    });
}

因此,create-react-app 默认包含服务工作者功能,这很可爱 - 我的所有静态资产都可以开箱即用于离线使用.很酷,但现在我想更进一步,并使用indexedDB缓存一些动态内容.

问题是,没有要修改的service-worker.js文件.它在构建过程中生成.

有没有办法添加额外的逻辑,而无需弹出create-react-app或重做所有漂亮的静态缓存内容？

我需要开发一个集成推送通知的渐进式Web应用程序.在网上搜索我发现了关于这个主题的不同意见.如果我已经正确理解,目前我们不能在Safari的Safari中使用推送通知(但仅适用于桌面).这样对吗？

您有什么建议可以获得相同的结果(我不是iOS专家)吗？我想知道可能只为推送通知目的开发本机应用程序可能是一个不错的选择,直到推送通知也准备好为safari移动.

PS我正在使用Angular 2开发PWA.

谢谢你的支持.

我想QR Code Scanner在我的渐进式Web应用程序（也称为PWA）中使用A。

使用方法：想象一下，一家商店的商品和产品都有很多QR码。每当用户扫描QR码时，我都想将商品添加到购物车中。

问题：是否有任何实现的组件？怎么样？

我正在尝试构建 PWA（渐进式 Web 应用程序），但 Chrome devtools 控制台警告说它阻止了我的 css 和图标文件。

Request was blocked by DevTools: "https://example.com/styles/style.css".

我无法找到有关此自动发生的任何信息，据我所知，只有在用户手动请求阻止脚本时才会发生。除了被阻止之外，Chrome 不提供有关警告的任何其他信息。

在应用程序切换期间，我在 iOS 13.4.1 (iPhone 8) 上的 PWA 应用程序遇到了一些问题 - 当我切换到其他一些应用程序然后返回到我的 PWA 应用程序时它会冻结。如果我重复此操作（应用切换和返回） - PWA 应用会解冻。

前段时间我开发了其他 PWA 应用程序，直到现在它都运行良好。也许某些 iOS 更新破坏了 PWA 功能？

现在有什么方法可以指定 PWA 的“manifest.json”中的 SVG 图标应该用于所有可能的大小？（Chrome/chromium 是我现在的主要目标。Firefox 有望跟进。）

    "icons": [
        {
            "src": "path-to-icon.svg",
            "purpose": "maskable any",
            "sizes: "???"
        }
    ],

是否可以使用 Web Share Target API 将移动图库中的照片上传到 IOS 中的 PWA 中？我在一些文章中读到该功能仅适用于 Android 设备，但我在 IOS 中找不到此功能的替代品。