我的第一个PWA开发记录

发表于 | 分类于 |

注：本文主要记录了创建一个PWA应用的过程，方便日后再次开发类似应用时参考。
github链接：shenlvmeng/Distance: 一次PWA的尝试

准备

安装http-server方便本地测试。

本地开辟文件夹，加入.editorconfig和.gitignore（根据样例适当修改）

1
2
3
4
5
6
7
8
9
10
11
# http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

创建index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Away from home</title>
  <link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
  <h1>My first PWA Application</h1>
  <p>See console for more!</p>
</body>
</html>

在目标文件夹路径下执行http-server，bingo！第一步完成

清单文件

创建清单文件manifest.json，描述应用添加到主屏幕需要的信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "Distance from Home",
  "short_name": "Distance",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "#8888ff",
  "background_color": "#aaaaff",
  "icons": [
    {
      "src": "compass.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ]
}

并在index.html中引入：

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

添加Service Worker

Service Worker这个东西可以实现页面的缓存和离线访问，让应用逼近app的体验。

可以在HTML里插入<script>标签引入，这里单独定义一个app.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// app.js
// Registering ServiceWorker
if ( 'serviceWorker' in navigator ) {
  navigator.serviceWorker.register( 'sw.js' ).then(function(registration) {
    // Registration was successful
    console.log( 'ServiceWorker registration successful. Scope: ' + registration.scope )
  }).catch(function(err) {
    // Registration failed with error
    console.log( 'ServiceWorker registration failed' + err);
  });
}

在index.html中引用。

下面实现service worker。主要是三个时机：

  • 脚本安装时，写入缓存
  • 脚本获取数据时，先查找缓存
  • 缓存更新版本时，删除原先版本的缓存
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 脚本安装时
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheStorageKey)
      .then(cache => cache.addAll(cacheList))
      // 保证在页面更新过程中，新的Service Worker脚本能立即激活生效
      .then(() => self.skipWaiting())
  )
});
// 通过脚本fetch数据
self.addEventListener('fetch', event => {
  event.respondWith(
    // 先在cache中找
    caches.match(event.request).then(res => {
      // cache中没有再使用fetch
      return res || fetch(event.request.url);
    })
  )
});
// 更新静态资源
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(cacheNames.map(name => {
        if (name !== cacheStorageKey) {
          return caches.delete(name);
        }
      }));
    })
  );
});

其中，有下面一些名词：

  • self: Service Worker作用域, 也是全局变量
  • caches: 缓存接口
  • waitUntil，ExtendableEvent.waitUntil()方法——这会确保Service Worker 不会在waitUntil()里面的代码执行完毕之前安装完成。
  • skipWait，表示强制当前处在waiting状态的脚本进入activate状态

在浏览器中打开localhost:8080/即可，注意PWA必须运行在HTTPS的环境下。

加入百度地图支持

参考官方API接入支持。

添加文件index.js，写入如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const url4PC = 'https://api.map.baidu.com/api?v=2.0&ak=你的秘钥&callback=init';
const init = window.init;
let map = null;
// 为了能成功调用到callback
window.init = () => {
  map = new BMap.Map('map');
  map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
  map.enableScrollWheelZoom(true);
  window.init = init;
}
function loadMap() {
  const script = document.createElement('script');
  script.src = url4PC;
  document.body.appendChild(script);
}
window.onload = loadMap;

当然需要添加一点CSS，这里从略。

Service Worker支持跨域

接下来问题来了，打开网页测试，页面刷新时Service Worker会抛出跨域相关的错误。

Ahb0hR.png

再正常不过了，未经配置的情况下，fetch是不允许跨域的。注意sw.js中的一段：

1
2
3
4
caches.match(event.request).then(res => {
  // cache中没有再使用fetch
  return res || fetch(event.request.url);
})

这里我们不仅有跨域请求，还使用着JSONP的方式。后续地图数据和地图图片的展示请求也比较复杂。再经过多次加入respondWith()响应块失败后，干脆跳过这部分跨域的处理。不过还是留下了一个函数，方便后面拓展。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function isCORSRequest(url) {
  return url.search(host) === -1;
}
// 并存该函数为日后拓展所用
function handleFetchRequest(req) {
  const request = isCORSRequest(req.url) ?
    new Request(req.url, { mode: 'cors' })
    : req;
  fetch(req);
}
// 通过脚本fetch数据
self.addEventListener('fetch', event => {
  if (isCORSRequest(event.request.url)) {
    return;
  }
  event.respondWith(
    // 先在cache中找
    caches.match(event.request).then(res => {
      // cache中没有再使用fetch
      return res || handleFetchRequest(event.request);
    })
  );
});

目标点管理

核心功能之一是，可以新增计算距离的目标点。在我的设计里，有两种用户友好的添加方式：

  • 找不到地点时，可以搜索出地点，通过搜索结果设置
  • 明确地图上位置时，直接通过鼠标操作设置

前面的利用AutoComplete类，完成自动补全和搜索功能。值得注意的一个坑是，在初次设置好map对象后，每次的搜索结果都会以第一次初始化地点为中心搜索结果。解决方案是，每次<input>框聚焦时，重新构造一个AutoComplete类。

1
2
3
4
<div class="search">
  <input class="searchbox" type="text" id="position" size="20" placeholder="输入地点或在地图上双击点选" />
  <div id="searchBtn" class="searchBtn"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
function initSearchLocation() {
    // 工厂方法，每次聚焦时新创建一个AutoComplete对象
    function setAutoComplete() {
      const lastVal = doc.getElementById('position').value.trim();
      // 建立一个自动完成的对象
      const searchBox = new BMap.Autocomplete({
        input: "position",
        location: map
      });
      doc.getElementById('position').value = lastVal;
      // 鼠标点击下拉列表后的事件
      searchBox.addEventListener("onconfirm", event => {
        const value = event.item.value;
        const searchWord = `${value.province}${value.city}${value.district}${value.street}${value.business}`;
        setPlace(searchWord);
      });
    }
    function setPlace(searchWord){
      map.clearOverlays();
      // 搜索
      const cleverSearch = new BMap.LocalSearch(map, {
        onSearchComplete: () => {
          pauseUpdate();
          if (!cleverSearch.getResults().getPoi(0)) {
            alert('未找到指定地点，换个关键词试试？');
            return;
          }
          // 获取第一个智能搜索的结果
          const res = cleverSearch.getResults().getPoi(0).point;
          const marker = new BMap.Marker(res);
          map.centerAndZoom(res, 18);
          map.addOverlay(marker);
          addToBeacons(marker);
        }
      });
      cleverSearch.search(searchWord);
    }
    // 不使用自动补全，直接回车或点击图标
    doc.getElementById("position").addEventListener("focus", event => {
      setAutoComplete();
    });
    // 省略了其他的绑定事件
  }

下一步是支持标记点（BeaconNodes）的管理，离线持久化采用localStorage，技术上倒没有什么难度。用户交互上，考虑用右键点击（for PC）和长按操作（PC Mobile）添加，点击标记删除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// 从页面新增目标点
function addToBeacons(point) {
  let tag = win.prompt("给Beacon点起个名字吧");
  if (tag === null) {
    return;
  }
  tag = tag.trim().substr(0, 20) || `未知地点#${seq}`;
  // 第一个点默认活跃
  beaconNodes.push({
    id: seq,
    point,
    tag,
    isActive: !beaconNodes.length
  });
  addBeacon(seq, point, tag, beaconNodes.length === 1);
  paintDropdown();
  localStorage.setItem(STORAGE_KEY, JSON.stringify(beaconNodes));
}
function removeFromBeacon(id) {
  if (!beaconNodes.length) {
    return;
  }
  beaconNodes.splice(beaconNodes.findIndex(node => node.id == id), 1);
  paintDropdown();
  localStorage.setItem(STORAGE_KEY, JSON.stringify(beaconNodes));
}
// 在地图上新增目标点，方便复用
function addBeacon(id, point, tag, isActive) {
  const icon = new BMap.Icon(`imgs/location-${2-isActive}.png`, new BMap.Size(50, 50));
  const mark = new BMap.Marker(point, { icon, enableMassClear: false });
  const label = new BMap.Label(tag,{ offset: new BMap.Size(32, 2) });
  label.setStyle({
    border: "#dedede",
    padding: "3px 5px",
    "font-size": "14px",
    "font-weight": "bold"
  });
  mark.setLabel(label); 
  mark.getLabel().setTitle(tag);
  mark.addEventListener('click', event => {
    if (win.confirm(`确认要删除Beacon:${mark.getLabel().getTitle()}`)) {
      map.removeOverlay(mark);
      removeFromBeacon(id);
    }
  });
  map.addOverlay(mark);
  seq = id + 1;
}
// ...
function initMap() {
  // 根据storage填充地图
  // 注意这里必须使用Point类
  beaconNodes.forEach(node => {
    addBeacon(node.id, new BMap.Point(node.point.lng, node.point.lat), node.tag, node.isActive);
  });
  // ...
  // 避免和其他事件冲突，使用暂无占用的右键点击
  map.addEventListener("rightclick", event => {
    addToBeacons(event.point);
  });
  // 支持移动设备，长按
  map.addEventListener("longpress", event => {
    addToBeacons(event.point);
  })
}

在管理上，新增了下拉菜单管理当前所有节点，这里需要将离线的BeaconNodes映射成DOM结构，考虑到文件已略大，且这一部分比较繁琐，和业务关系不大，故单独抽出一个文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// dom.js
/*
 * 无状态，与业务弱相关
 * 只渲染下拉菜单
 */
function renderDropdown(obj, dom, isInit) {
  if (!obj) {
    return;
  }
  dom.innerText = "";
  // render过程
  const fragment = document.createDocumentFragment();
  obj.map(node => {
    const div = document.createElement('DIV');
    div.className = `node_wrapper${node.isActive ? " active" : ""}`;
    const innerHTML = `<span>#${node.id}</span><span class="node-tag">${node.tag}</span>`;
    div.innerHTML = innerHTML;
    const operateBtn = document.createElement('DIV');
    operateBtn.className = "operateBtn";
    if (node.isActive) {
      operateBtn.className += " active"
      operateBtn.innerText = "Deactive!"
    } else {
      operateBtn.innerText = "Active!"
    }
    div.appendChild(operateBtn);
    // 方便统一事件绑定
    div.dataset.nid = node.id;
    return div;
  }).forEach(div => {
    fragment.appendChild(div);
  });
  dom.appendChild(fragment);
  // 多次调用只监听一次
  if (isInit) {
    // 下拉事件
    dom.parentNode.children[0].addEventListener("click", event => {
      if (dom.parentNode.className.search("hide") !== -1) {
        dom.parentNode.className = "dropdown dropdown_container";
      } else {
        dom.parentNode.className += " hide";
      }
    });
  }
}

HTML和CSS部分就不再赘述了。

在下拉菜单下，可以点击条目跳转到相应位置，以及点击按钮切换当前活动的BeaconNode。这部分实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function initDropdown() {
  paintDropdown(true);
  // 事件监听
  const dropdown = doc.getElementById("dropdown");
  dropdown.addEventListener("click", event => {
    const nid = event.target.parentNode.dataset.nid || event.target.dataset.nid;
    const node = beaconNodes.find(node => node.id == nid);
    if (event.target.tagName.toLowerCase() === "div") {
      if (node) {
        const prev = beaconNodes.find(node => node.isActive);
        if (prev) {
          prev.isActive = false;
          beaconMarkers[prev.id].setIcon(new BMap.Icon("imgs/location-2.png", new BMap.Size(40, 40)));
        }
        node.isActive = true;
        paintDropdown();
        beaconMarkers[nid].setIcon(new BMap.Icon("imgs/location-1.png", new BMap.Size(40, 40)));
      }
    } else {
      node && map.panTo(new BMap.Point(node.point.lng, node.point.lat));
    }
  });
}

当然了，标记点的增删改查还剩下改没有实现，目前来看，和“改”相关的业务是能拖动标记点，方便用户随时更改标记点位置。在addBeacon()函数中新增相关代码。

1
2
3
4
5
6
mark.enableDragging();
// ...
mark.addEventListener('dragend', event => {
  editToBeacons(id, { point: event.point });
  paintDistance(lastPoint);
});

而editToBeacons()函数设计如下：

1
2
3
4
5
6
function editToBeacons(id, newProps) {
  const index = beaconNodes.findIndex(node => node.id == id);
  Object.assign(beaconNodes[index], newProps);
  localStorage.setItem(STORAGE_KEY, JSON.stringify(beaconNodes));
  // 不是所有的属性更改都有重绘，交给调用者处理重绘
}

计算距离

计算距离包括距离和方向两部分，既然能拿到两点的经纬度信息，这两个值肯定可以计算出来。计算距离上利用百度地图的API，计算角度上，通过Math.atan2换算得到。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function paintDistance(currentPoint) {
  let info;
  let target = beaconNodes.find(node => node.isActive);
  if (!target || !currentPoint) {
    info = "N/A , 未知方向";
  } else {
    let distance = map.getDistance(currentPoint, target.point) || "N/A";
    if (distance > 10000) {
      distance = `${(distance / 1000).toFixed(2)}km`;
    } else if (distance > 100) {
      distance = `${distance.toFixed(0)}m`;
    } else {
      distance = `就在附近...`
    }
    // 工具函数位于utils.js
    const deg = getDirection(target.point, currentPoint);
    info = `${distance} , ${deg}点钟方向`
  }
  // ...
}
function getDirection(p1, p2) {
  const pi = Math.PI;
  const [x2, y2, x1, y1] = [p1.lng, p1.lat, p2.lng, p2.lat];
  let rad = Math.atan2(y2 - y1, x2 - x1);
  let absRad = Math.abs(rad);
  let clockPointer;
  if (absRad < pi / 12) {
    clockPointer = 3;
  } else if (absRad < pi / 4) {
    clockPointer = rad > 0 ? 2 : 4;
  } else if (absRad < pi * 5 / 12) {
    clockPointer = rad > 0 ? 1 : 5;
  } else if (absRad < pi * 7 / 12) {
    clockPointer = rad > 0 ? 12 : 6;
  } else if (absRad < pi * 3 / 4) {
    clockPointer = rad > 0 ? 11 : 7;
  } else if (absRad < pi * 11 / 12) {
    clockPointer = rad > 0 ? 10 : 8;
  } else {
    clockPointer = 9;
  }
  return clockPointer;
}

参考