PWA入门级

开始写PWA

前言

PWA(Progressive Web Apps)是 Google 提出的一个新的 web 体验方式,离线时也可以访问,极大的提升了用户体验。
有三个特性:
* Reliable (可靠的)
* Fast (快速的)
* Engaging (可参与的)
具体可以看官网的介绍,这里不再赘述。

技术点

PWA 有三个技术点:
* Service Worker
* Manifest
* Push Notification
SW 是最重要的技术点(缓存,离线浏览);Manifest 是定义图标、启动地址等列表清单文件(和 Android app 的 manifest 文件类似);Push Notification 是利用服务器和SW之间的通信来进行消息的订阅和推送的。

栗子

新建一个 index.html 文件如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello PWAtitle>
    <link rel="stylesheet" href="css/style.css">

head>
<body>
    <img src="images/logo.jpg">

    <script>
        if ('serviceWorker' in navigator) { // 浏览器支持SW
            navigator.serviceWorker.register('sw.js').then(function (registration) {
                console.log('ServiceWorker registration successful with scope: ', registration.scope);
            }).catch(function (err) {
                console.log('ServiceWorker registration failed: ', err);
            });
        }
    script>
body>
html>

demo有 logo.jpg 和 style.css 文件

新建 sw.js 文件如下:

var cacheName = 'hello-pwa';

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(cacheName)
          .then(cache => cache.addAll(
            [
                '/',  // 这个一定要包含整个目录,不然无法离线浏览
                './images/logo.jpg',
                './index.html',
                './css/style.css'
            ]
          )).then(() => self.skipWaiting())
    );
});

self.addEventListener('fetch', function (event) {  
    event.respondWith(
      caches.match(event.request)                    
      .then(function (response) {
        if (response) {                              
          return response;                           
        }
        return fetch(event.request);                 
      })
    );
});

到这里就一个入门级的栗子就写完了,关于 Service Worker API 可以查看文档学习
接下来通过 http-server 和 ngrok(https)进行调试查看
安装 http-server

npm install http-server -g

安装 ngrok,下载解压即可

在项目目录下执行如下命令:

http-server -c-1  // -c-1 会关闭缓存

再开启另外一个终端在 ngrok 文件的目录下执行如下命令:

./ngrok http 8080 // http-server 默认开启8080端口

效果

以下是Chrome浏览器环境测试结果:
浏览器支持 SW 打印如下:

Application 控制台可以看到 ‘hello-pwa’ 已经缓存,如下:

尝试离线刷新:

总结

  • PWA 是极限体验的技术(离线也可以访问)
  • SW 是 PWA 的技术重点
  • SW 的权限比较大,会拦截网络请求,所以需要在 https 协议下进行访问
  • 参考官网栗子
  • 参考PWA-Book

你可能感兴趣的:(前端)