PWA可以做什么？

一个PWA应用首先是一个网页，可以通过Web技术编写出一个网页应用，随后添加上App Manifest和Service Worker来实现PWA的安装和离线等功能。

  • 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
  • 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
  • 实现了消息推送

看了PWA的功能是不是激动不已，网页也可以像app一样使用了！

如何部署？

虽然PWA技术是在2016年6月才推广的项目，但是网上已经有很多介绍其原理以及如何应用的文章，这里不再赘述，仅仅记录一下如何将其简单部署到该博客上。

将项目变成一个简单的PWA应用，分为三步：

  1. 在index.html中<head>中添加<link rel="manifest" href="/manifest.json">，
    在<body>中添加： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <script>
        if(navigator.serviceWorker != null) {
            window.addEventListener('DOMContentLoaded', function() {
            // 执行注册
                navigator.serviceWorker.register('/service-worker.js')
                .then(function(registration) {

                }).catch(function(err) {
                // Eat it!
                });
            });
        }
    </script>

  2. 添加manifest.json文件，以及合适像素的图片作为应用的图标

  3. 添加service-worker.js文件