标签: progressive

当在 iframe 中加载 PWA（渐进式 Web 应用程序）时，它会正常工作（保存 Web Workers、离线可用性等）还是某些功能会被阻止？

我正在尝试构建一个上传程序,它分两步上传渐进文件:

1. 上传最小字节数以创建缩略图(0-10%)
2. 上传缩略图的其余字节.(11%-100%)

我想这样做可以提前获得缩略图,而无需上传单独的缩略图.拍摄一张图像(3426398 Byte),它是jpegtran -copy all -progressive -outfile progressive.jpg original.jpg用dd if=progressive.jpg of=thumb.jpg bs=1 count=350000我创建的,然后拍摄前350000个字节,我得到了一个有效的缩略图.

• 原文:https://dl.dropbox.com/u/5910/thumbtest/progressive.jpg
• 缩略图:https://dl.dropbox.com/u/5910/thumbtest/thumb.jpg

有没有办法找出我需要传输多少字节才能获得所有行都可用的图像？这样只会失去图像质量？

我试图基于虚拟渲染概念渲染列表.我面临一些小问题,但他们并没有阻止这种行为.这是工作小提琴http://jsfiddle.net/53N36/9/,这是我的问题

1. 最后的项目是不可见的,我假设一些我错过了索引.(固定,请参阅编辑)
2. 如果我想为此添加自定义滚动,如何计算scrollPosition.
3. 这是最好的方法还是其他方法？

我用700000件物品和70件镀铬物品进行了测试.下面是代码

(function () {
var list = (function () {
    var temp = [];
    for (var i = 0, l = 70; i < l; i++) {
        temp.push("list-item-" + (i + 1));
    }
    return temp;
}());

function listItem(text, id) {
    var _div = document.createElement('div');
    _div.innerHTML = text;
    _div.className = "listItem";
    _div.id = id;
    return _div;
}
var listHold = document.getElementById('listHolder'),
    ht = listHold.clientHeight,
    wt = listHold.clientWidth,
    ele = listItem(list[0], 'item0'),
    frag = document.createDocumentFragment();
listHold.appendChild(ele); …

我最近正在深入研究渐进式Web应用程序.我已经将我的manifest.json和sw.js链接起来了:

在index.html中

<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>static/manifest.json">

在我的main.js

if('serviceWorker' in navigator) {
        const messaging = firebase.messaging()

        navigator.serviceWorker.register('/static/sw.js').then((registration) => {
            messaging.useServiceWorker(registration)
            console.log('Service Worker registered')
        }).catch((error) => {
            console.log('Service Worker failed to register')
        })
    }

看起来它有效,但当我尝试使用DevTools将webapp添加到我的主屏幕时,它显示以下错误:"无法安装站点:未检测到匹配的服务工作者.您可能需要重新加载页面,或检查当前页面的服务工作者还控制清单中的起始URL"

在做了一些研究后,我发现有人说将sw.js和manifest.json放在项目的根目录中.但是当我这样做时,它不会链接文件(当我把它们放在静态文件夹中时,它会链接它们).顺便说一下,我正在使用标准的Vue.js模板.

有任何建议如何解决这个问题？

我有一个网络图库,我在其中显示用户上传的文件大小和分辨率不同的图像.目前所有图像都是基线.所以我想知道如果我将它们转换为渐进式图像是否会产生任何重大影响.使用渐进式图像有哪些优点和权衡.