将博客变成PWA

#前端#Blog

我是少数派的一个读者,成为少数派已经419天

从少数派里面学到了很多东西,也丰富了自己的眼界,所以少数派APP也是我手机上的常用应用之一,在去年将手机换成了Android后,发现到现在为止Android的APP已经很久没有更新过了,Android客户端一直处于一个“年久失修”的状态,反倒是IOS的一直在更新迭代,更新了UI以及一些新的功能,这让我十分眼红。

但是在少数派3月31号发布的文章中,他们为Android客户端做出了一个解释,并且提出了一个更优解

继去年少数派网站改版升级后,更符合新版设计的少数派 iOS 客户端 2.0 也在不久前正式上线。可惜由于开发能力实在有限,Android 平台繁杂的机型适配和兼容性问题也着实令人头疼,少数派的 Android 客户端此前一直处于「年久失修」的状态。

好在少数派最终为 Android 客户端找到了一个「更优解」——渐进式网页应用(以下简称 PWA)。在保证内容呈现完整的前提下,PWA 有着比客户端应用更轻量、比网页版功能更强大的全新体验,同时还能兼容 Android、iOS 甚至 Windows 等多个平台。

关于PWA这个概念我是第一次知道,抱着新奇的态度开始Google……

关于PWA

PWA 是 Google 于 2016 年提出的概念,于 2017 年正式落地,于 2018 年迎来重大突破,全球顶级的浏览器厂商,Google、Microsoft、Apple 已经全数宣布支持 PWA 技术。

PWA 全称为 Progressive Web App,中文译为渐进式 Web APP,其目的是通过各种 Web 技术实现与原生 App 相近的用户体验。

纵观现有 Web 应用与原生应用的对比差距,如离线缓存、沉浸式体验等等,可以通过已经实现的 Web 技术去弥补这些差距,最终达到与原生应用相近的用户体验效果。

好吧说完上面的官方发言,地道一点说下我自己的体验,就是一个Web页面拿掉了浏览器的壳子,以一个近似app的形式存在手机桌面,与一般的将网页添加到桌面不同,它还有本地通知的能力以及一个缓存的能力,除此以外它可以兼容Android、IOS以及Windows多个平台,对我来说它在打开的时候还有一个页面logo闪屏,很有吸引力。

将自己的博客变成PWA

在体验过少数派的PWA后,我萌生了能否把自己的博客变成PWA的想法,在网上查询了资料后发现入门意外的简单,接下来说说我自己的操作。

添加 manifest.json

这里新建一个manifest.json文件,主要是配置应用图标以及名称等信息,然后这里分享下我的配置,具体的配置介绍可以参考下MDN

{
    "dir": "ltr", //指定名称、短名称和描述成员的主文本方向
    "lang": "zh-cn", //语言
    "name": "Magren's Blog", //名字
    "short_name": "Magren's Blog", //短名称
    "theme_color": "#ffffff", //主题颜色
    "background_color": "#d4d4d4", //启动时闪屏的背景颜色
    "display": "standalone", //定义开发人员对Web应用程序的首选显示模式。
    "start_url": "./index.html", //开始加载的url
    "icons": [ //程序图标
      {
        "src": "avatar152.png",
        "sizes": "152x152",
        "type": "image/png"
      },
      {
        "src": "avatar192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "avatar384.png",
        "sizes": "384x384",
        "type": "image/png"
      },
      {
        "src": "avatar512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ],
    "splash_pages": null
  }

接着就要在我们的HTML文件中引入啦,如果你也是博客的话就去翻翻你的主题文件夹,在里面找下吧。

<link rel="manifest" href="manifest.json" />

添加 Service Worker

这个API是用来实现页面缓存和离线,还有后台通知,不过因为这就是我的一个个人博客,所以我没有加上通知的功能。

首先判断浏览器是否支持serviceWorker,如果支持则调用函数来注册站点的service worker,service worker 只是一个驻留在我们的 app 内的一个 JavaScript 文件。

在html的页面下加上:

    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function () {
                navigator.serviceWorker.register('/sw.js', {scope: '/'})
                    .then(function (registration) {
                        // 注册成功
                        console.log('ServiceWorker registration successful');
                    })
                    .catch(function (err) {
                        // 注册失败:(
                        console.log('ServiceWorker registration failed');
                    });
            });
        }
    </script>

接着是sw.js,即我们的serviceWorker,这里可以定义需要缓存的路径, 以及需要缓存的静态文件的列表, 这个列表也可以通过 Webpack 插件生成,我这里就只缓存了首页。

//监听service worker事件
self.addEventListener('install', function (event) {
  var homePage = new Request('index.html');
  event.waitUntil(
    //请求首页并将首页存入缓存
    fetch(homePage).then(function (response) {
      //建立cache-homePage缓存
      return caches.open('cache-homePage').then(function (cache) {
        return cache.put(homePage, response);
      });
    })
  );
});

//请求页面
self.addEventListener('fetch', function (event) {
  event.respondWith(
    fetch(event.request).catch(function (error) {
      //请求失败,从缓存中读取缓存的页面
      return caches.open('cache-homePage').then(function (cache) {
        return cache.match('index.html');
      });
    })
  );
});

//刷新首页
self.addEventListener('refreshHomePage', function (response) {
  return caches.open('cache-homePage').then(function (cache) {
    //将刷新后的页面缓存
    return cache.put(offlinePage, response);
  });
});

最后

最后说说如何使用pwa吧,在手机上,只需通过支持的浏览器(如 Chrome以及小米自带的浏览器)访问 PWA 页面地址,Chrome会在加载完页面后弹出添加页面的提示,如果没有的话(如IOS的Safari),需要手动点击浏览器的更多,然后直接添加到桌面上即可。

PC端的话Chrome的右上角(网页链接的最右端)有一个下载按钮,点击后就会添加到电脑桌面。如果要卸载的话只是删除电脑桌面的快捷方式是不可以的,需要打开来然后在PWA页面的上方点击卸载按钮。