什么样的网页吸引人(非常有趣的网站)

spider_172_249

<p>
    在Android版的Chrome上会显示一个app banner为你的网站吸引用户将网页添加到主屏幕上。接下来就具体聊一下这么好的吸引用户的方法有哪些要求？
   </p><p>
    App banner只有在网页满足特定要求并且用户“经常”（“经常”在此指间隔5分钟会有至少2次的访问）访问这个网页时才会显示。（注：这时的时间框架已经随着时间的推移而改变，并有可能再次改变）
   </p><p>
<strong>
     要求
    </strong>
</p><p>
    要想使得你的网页上的app banner上出现“添加到主屏幕”的对话框，需要满足一定的条件。网页需要一个有效的manifest、Service Worker和https的站点
   </p><p>
    首先，你的网站需要有一个有效的manifest。为了整合manifest，你需要通过一个带有attribute manifest 的meta标签连接到它。
    <img image_type="1" img_height="134" img_width="600" mime_type="image/jpeg" src="https://p3-sign.toutiaoimg.com/c13000010e0153bf629~tplv-tt-origin-asy2:5aS05p2hQOaZuuiDveekvg==.image?_iz=58558&amp;from=article.pc_detail&amp;x-expires=1693863927&amp;x-signature=s9960Jd%2BbyK%2BKe350AZQTBSBH0A%3D" web_uri="c13000010e0153bf629"/>
</p><p>
    这是一个很明显的例子：
    <img image_type="1" img_height="480" img_width="600" mime_type="image/jpeg" src="https://p3-sign.toutiaoimg.com/bd90004bace6f5db3b5~tplv-tt-origin-asy2:5aS05p2hQOaZuuiDveekvg==.image?_iz=58558&amp;from=article.pc_detail&amp;x-expires=1693863927&amp;x-signature=%2FM0fK%2BU8%2By7JqRBgPlyaKvRW2wc%3D" web_uri="bd90004bace6f5db3b5"/>
</p><p>
    从一些测试来看，你至少需要一个192×192的图标，才能进入app banner，但是至少增加384×384和512×512的图标会更好。
    <img image_type="1" img_height="222" img_width="600" mime_type="image/jpeg" src="https://p3-sign.toutiaoimg.com/bd90004bae4f9331aa0~tplv-tt-origin-asy2:5aS05p2hQOaZuuiDveekvg==.image?_iz=58558&amp;from=article.pc_detail&amp;x-expires=1693863927&amp;x-signature=ghx3T5Xch1tjRMylfxUTSMkVW2M%3D" web_uri="bd90004bae4f9331aa0"/>
</p><p>
    你可以在developers.google.com/，了解更多关于尺寸的信息。
   </p><p>
<strong>
     Service Worker
    </strong>
</p><p>
    你需要Service Worker得到app banner。而作为Service Worker也要求TLS体现在网页上。
   </p><p>
<strong>
     测试
    </strong>
</p><p>
    为了测试“Add to homescreen”，打开Chrome浏览器和Devtools。接下来激活设备模式（按Ctrl + Shift + M），然后打开屏幕右上方的菜单。点击“Request app banner…”，会有一个对话框，将站点添加到shelf（桌面）。如果你没有得到提示，可以在控制台看看。比如：如果图标是不适合，你将收到以下消息：“app banner未显示：manifest不包含适当的图标 - PNG格式，需要至少144 x 144的像素，大小属性必须设置”。
    <img image_type="1" img_height="296" img_width="941" mime_type="image/png" src="https://p3-sign.toutiaoimg.com/c130000116e58fff9b9~tplv-tt-origin-asy2:5aS05p2hQOaZuuiDveekvg==.image?_iz=58558&amp;from=article.pc_detail&amp;x-expires=1693863927&amp;x-signature=ohk7xODMMsyPxThpLdzNTOOeuzc%3D" web_uri="c130000116e58fff9b9"/>
</p><p>
    如果你没有看到“Request app banner…”，可以尝试以下操作：
   </p><p>
    1.将Chrome更新至最新版本
   </p><p>
    2.启用“Devtools Experiments”chrome://标志/ # enable-devtools-experiments并重启chrome
   </p><p>
    3.启用“App banner support”Devtools - &gt;设置 - &gt;实验
   </p><p>
    4.启用“Add to shelf” chrome:/ /标志/ # enable-add-to-shelf
   </p><p>
    还有一个Manifest Validator可以测试你的Manifest，并找到潜在的错误。
   </p><p>
<strong>
     显示app banner
    </strong>
</p><p>
    被关心得最多的问题是，是否有可能在用户交互显示app banner。简而言之，不可能。换句话说就是这个永远都不会成为可能，主要是因为害怕被滥用从而带来不好的影响。你可能还记得在ios和Android上向用户展示怎么将网页添加到主屏幕的弹出窗口。各大浏览器尽力去展示app banner，如果一个用户可能会再次访问该网站，会需要一个额外的图标在主屏幕上。
   </p><p>
    如果每一个网站都在用户交互上触发app banner，一段时间之后，大部分用户将会对所有的提示感到厌烦并且对app banner产生许多负面情绪。这就是为什么最好使用浏览器显示app banner的原因。
    <img image_type="1" img_height="206" img_width="600" mime_type="image/jpeg" src="https://p3-sign.toutiaoimg.com/bda0004b93dba1a4f70~tplv-tt-origin-asy2:5aS05p2hQOaZuuiDveekvg==.image?_iz=58558&amp;from=article.pc_detail&amp;x-expires=1693863927&amp;x-signature=xbSRo8ey7LO4lxc0xVhKe4T4Dbs%3D" web_uri="bda0004b93dba1a4f70"/>
</p><p>
    如果你的网站满足所有的要求并且用户经常访问你的网页，你将得到自动显示app banner。
   </p><p>
    APP banner只能在Android版的Chrome显示（截止2016年4月），但其他浏览器不久肯定就会增加这一功能。如果你要建立一个PWA一定要测试是否符合所有的标准。
   </p>

z3FYC442546

小手一抖，积分到手！

uri6E50455

抢沙发！