Ede's Blog

前不久想在自己的博客上尝试PWA（Progressive Web App）功能，而PWA的前置条件是Https。因本域名没有在国内备案，故寻找服务商花费了几天的时间，特将结果记录于此。大致可分为两步：

域名Https（含前端源文件，如HTML、CSS、JS等）
多媒体Https（含前端多媒体资源，如png、jpg、gif等，即图床）

域名Https化

CloudFlare提供了免费的Https服务，因为联合了百度CDN，即使在国内，也能提供不错的访问速度。

步骤如下：

在CloudFlare中Add New Website，按照提示填写自己的域名，eg：edeity.me
更改域名记录，将记录类型更改为NS类型，并指向CloudFlareDNS服务解析器，anirban.ns.cloudflare.com、gail.ns.cloudflare.com，配置如下：
CloudFlare添加成功后，等待片刻，即可通过Https访问网站。
- 推荐总是启用Https，步骤：域名面板->SSL->Always use HTTPS->ON，后续访问Http时，也会跳转到Https上。

多媒体Https化

因七牛存储不再提供https二级域名，而自定义域名又需要繁琐的备案，只好放弃。

考虑博客流量不大，大方地使用了OSS（阿里云旗下的服务，收费）。

不注重访问速度，或国外的用户可考虑Yahoo的flickr，有1T的免费存储空间。

注：默认配置中，OSS的资源是是私有的（无法外网访问），需要在基础设置中，把读写权限更改为公共读。

其他：PWA！

假如没有定制化需求，建议使用Workbox3，参考：Workbox3初探：让离线缓存变得简单

以下为原纪录（不推荐）：

网站升级为Https后，尝试PWA的功能，在此仅列举一项功能：离线缓存。

参考google给出的范文。

引入Manifest.json，用于描述你的PWA：
<link rel="manifest" href="/manifest.json">

告知PWA配置文件名称，并启动：

if (navigator.serviceWorker != null) {
    navigator.serviceWorker.register('/service-worker.js')
        .then(function(registration) {
            console.log('PWA regist success');
    });
}

在配置文件service-worker.js运行离线脚本

var filesToCace = ['在此书写需要缓存的资源，如/index.html']

// 激活缓存
self.addEventListener('activate', function(e) {
    e.waitUntil(
        caches.keys().then(function(keyList) {
        return Promise.all(keyList.map(function(key) {
            if (key !== cacheName) {
                return caches.delete(key);
            }
        }));
        })
    );
    return self.clients.claim();
});

// 拦截，判断是否可从缓存中读取资源
self.addEventListener('fetch', function(e) {
    e.respondWith(
        caches.match(e.request).then(function(response) {
        return response || fetch(e.request);
        })
    );
});

由于Hexo的Url路径均是动态生成的，将所有的url都写入Service-worker.js的filesToCace中是件苦力活，可采用hexo-offline可以自动完成这份工作。
- yarn install hexo-offline --dev

由于不知名的缘故，采用hexo-offline后，文件的权限变更了。回顾chown的用法：

# 755 for 文件夹、可执行文件
# 644 fro 普通文件
# 400 for 证书
chmod 755 -R dir 
# 更改目录所有者
chown -R user

Https你的博客

域名Https化

多媒体Https化

其他：PWA！