隽永东方关于提升Google最新PWA(Progressive Web App)得分的秘籍

2018年11月14日 | 6949 | 标签：Progressive Web App , PWA , 渐进式网页应用

最近一次的 Google PageSpeed Insights 工具，进行了一次很大幅度的更新，增加了对 PWA (Progressive Web App) –渐进式网页应用方面的得分提现，导致之前用此工具检测获得高分的网站，此次再次检测出现断崖式分数下跌，让好多网页前端开发人员一脸懵逼，而又无可奈何。

究其原因就是Google此次更新再次提升了移动互联网时代对移动端设备体验的重视，新增了很多原生态APP才具有的功能，同时也侧面再次将原生APP推向了万劫不复的深渊。

PWA (Progressive Web App) –渐进式网页应用概念介绍：

在开始此次旅程之前，我们有必要给大家简单介绍几个基础概念。

1，Chrome 支持把 PWA 网页直接保存为桌面应用，在 chrome://flags#enable-desktop-pwas中打开即可尝试。

2，Progressive Web Application，全称“渐进式网页应用”，是谷歌主导的一种新时代网页（应用）。

简单的理解，就是你的网页，可以通过某种方式达到离线使用。是不是很神奇，网页可以离线使用。

他牵扯到两个关键文件，如下：

manifest.json

这个严格意义上来说，与离线的关系不大，更确切的讲，他是手机上用到的关键，让你的网页可以具有类似App的效果，比如logo，启动页面等等。

安卓的Chrome，苹果的Safari都已经兼容，不过兼容程度有区别而已

简单DEMO如下：

{
  "short_name": "隽永东方",
  "name": "隽永东方--技术驱动型全网品牌营销公司--隽永于心 闻达东方",
  "description": "隽永东方隶属于无锡隽永信息科技有限公司旗下高端品牌营销机构，专业从事外贸网站建设、全网营销、WordPress/Shopify网站开发、SEO/SEM优化推广、域名主机、Symantec SSL、ZOHO SAAS产品代理等服务项目。",
  "icons": [
    {
      "src": "https://www.eastdesign.net/wp-content/uploads/2018/11/latest-logo-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "https://www.eastdesign.net/wp-content/uploads/2018/11/latest-logo-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#d9534f",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#d9534f"
}

在iPhone上的效果截图如下：