pwa

让自己的博客支持 amp & pwa

简介

最近看了下 amp 和 pwa 的一些介绍，于是查了些资料，给自己的博客加上了 amp 和 pwa 功能，给静态博客加上这些还是比较简单的，社区已经有了很多插件支持了，具体步骤如下

1. 将 http 升级为 https

可以借助 cloudflare的cdn，大概步骤是将你的域名注册商的 dns server 更改成 cloudflare 所提供的，然后在cloudflare 上配置一些dns信息，具体做法可 google， 有很多

值得一提的是，可以让博客强行跳转到 https， 在 html 模板中加上 

<link rel="canonical" href="<%- page.permalink %>">
<script type="text/javascript">
    var host = "2fz1.me";
    if ((host == window.location.host) && (window.location.protocol != "https:"))
        window.location.protocol = "https";
</script>

然后在_config.yml中加上

rl: https://2fz1.me
enforce_ssl: 2fz1.me

2. 迁移博客到 amp

网上也有很多做法，由于我地博客是用 hexo 的，于是自然地用了 hexo 插件 hexo-generator-amp,具体方法可参考插件的文档

TIPs:

  1. 一定要修改文章页的模板，添加link[rel=amphtml]链接，要不然搜索无法找到 AMP 页面
  2. AMP 页面会自动在head中添加canonical链接回原有的文章页

完成后地效果如下

搜索结果页：

amp

amp详情页：

amp

3. 添加 pwa 功能

搜了下也能发现很多做法，既然有插件，就选了 hexo-offline， 这个插件可以自动生成 pwa 核心 ServiceWorker 代码，然后参考文档在_config.yml 中添加大概如下代码：

{
    # Offline
    ## Config passed to sw-precache
    ## https://github.com/JLHwung/hexo-offline
    offline:
    maximumFileSizeToCacheInBytes: 10485760
    staticFileGlobs:
        - public/**/*.{js,html,css,png,jpg,jpeg,gif,svg,json,xml}
    stripPrefix: public
    verbose: true
    runtimeCaching:
        # CDNs - should be cacheFirst, since they should be used specific versions so should not change
        - urlPattern: /*
        handler: cacheFirst
        options:
        origin: cdn.bootcss.com
}

然后添加 manifest.json 文件，可以参照文档自己写一份，也可以用 app-manifest自动生成一份，记得要将 manifest.json 引入你的 html 中

可以用 chrome 插件 Lighthouse 检测网站对于 pwa 支持的检测报表

pwa 离线页：

pwa

This page total views