《PWA 学习与实践》系列文章已整理至 gitbook – PWA 学习手册，文字内容已同步至 learning-pwa-ebook。转载请注明作者与出处。
本文是《PWA 学习与实践》系列的第四篇。是我在测试其他 demo 时遇到的一个问题，算是一篇 TroubleShooting。
PWA 作为时下最火热的技术概念之一，对提升 Web 应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对 PWA 感兴趣的朋友欢迎关注《PWA 学习与实践》系列文章。
引言
在前一篇文章《让你的 WebApp 离线可用》中，我们使用 Service Worker 来做缓存与离线支持。是有一个重要的问题：Service Worker 必须要在 HTTPS 协议下才能运行（或者 localhost）。当然，对于一些只有前端资源（不涉及后端服务）的 demo，我们完全可以将这些前端（静态资源）托管在一个 HTTPS 服务下，使得 Service Worker 可以使用。我选择了 google 的 FireBase 来托管 demo（其实 github page 也是个不错的选择）。
使用 FireBase 非常简单，只需要 firebase login –>firebase init–>firebase deploy 即可。但是在 firebase login 的过程中，遇到了一些问题。这篇文章主要总结了我在 firebase login 遇到的问题及解决方式：
无法获取 authorization code
Authentication Error: Your credentials are no longer valid.
有需要的朋友可以继续看。
首先，如果你对 firebase 完全不了解，下面会有一段非常简短的介绍。
什么是 FireBase
前段时间学习 PWA，在跟着官方教程完成 demo 后，想要在手机上测试一下效果。然而，遇到的一个问题就是：PWA 需要 HTTPS 协议（或者使用 localhost）。
这就需要我们有一个 HTTPS 的服务，并在其上面部署我们本地写好的 demo。而官方 demo 的最后，推荐使用 firebase 来托管你的代码。
在 FireBase 的众多使用场景中，Develop -> Hosting（托管）就是我需要用到的了。然而，在执行 firebase login（账号登录）过程中，却遇到了一些问题。
问题一：在浏览器登录账号后，无反应（无法获取 authorization code）
最开始，我在 CLI 中输入 firebase login，选择 y 后，CLI 会需要一个 authorization code；而浏览器会打开并提示你进行登录。
这里我用 google 账户进行授权登录。然而，在授权之后，却迟迟没有响应（无法得到 authorization code）。这时候，我发现浏览器显示，似乎是在等待 localhost 进行响应。
解决这个问题的方法就是：在登录时，使用 firebase login –no-localhost 进行登录。
重新使用 firebase login –no-localhost 登录。这里我选择了 google 账号进行登录，重复上面的过程：
这次，你就会在浏览器中获得一串 authorization code 值：
将它粘贴到 CLI 中即可。【问题一】解决！
问题二：Error: Authentication Error: Your credentials are no longer valid.
然而，在 CLI 中输入 authorization code 之后，在等待了较长时间的验证后，CLI 中报出了如下错误：
这是怎么回事呢？通过查阅一些资料发现，这很可能是你在电脑上使用“翻墙”工具所导致的。firebase-tool 依赖的 npm 包（faye-websocket）中，未开启代理的相关设置，因此无法进行验证。
解决这个问题的方法有两种：
方法一：在路由器上设置代理，而非本机
有些文章指出，通过在路由器上设置代理，而非在本机开启代理，可以避免这个问题。不过由于一些原因，暂时还没有尝试这种方式，不过通过一些反馈来看，应该是一个有效的方法。
方法二：(hack) 修改代码与相关环境变量
该方法较第一种方法来看，会稍微“硬”那么一些。具体的操作方式如下：
设置环境变量 http_proxy，我本机的代理使用的是 1087 端口。export http_proxy=http://localhost:1087
修改 faye-websocket，开启代理配置。faye-websocket 是 firebase 依赖的一个 WebSocket 库，需要为其 client.js 添加如下配置：
var Client = function(_url, protocols, options) {
options = options || {};
// 添加 proxy 配置
options.proxy = {
origin: ‘http://localhost:1087’,
};
…
}
如果你是全局安装的 firebase-tools，你可以通过如下方法找到 client.js
NODE_PATH=`npm prefix -g`
// client.js 的位置
$NODE_PATH/lib/node_modules/firebase-tools/node_modules/firebase/node_modules/faye-websocket/lib/faye/websocket/client.js
设置环境变量 NODE_TLS_REJECT_UNAUTHORIZED。export NODE_TLS_REJECT_UNAUTHORIZED=0
重新登录，firebase login –no-localhost，重复之前的操作。你会发现，登录成功！
【问题二】解决！
p.s. 针对这个问题，github 上也有一个 issue：Unable to deploy behind a proxy。
此外，如果你使用了代理，推荐使用全局代理的方式，使你的 CLI 也使用代理。
写在最后
最后，还是回到我开发 PWA 时的需求。文章最开始提到了，我是为了在移动端测试 PWA demo 的效果，所以使用 FireBase 来托管资源。当然，除了 FireBase，还有下面两个办法：
使用 github page。由于 github 全站都是运行在 HTTPS 下，因此在 github page 上托管的静态站点可以使用 Service Worker；
使用 localhost/127.0.0.1。了解 PWA 的话，你会知道除了 HTTPS 之外，也可以使用 localhost（这一设计是为了方便本机调试）。
本文是《PWA 学习与实践》系列中的第四篇。这篇文章并没有探讨 PWA 中实际的技术，而是记录了我在开发、调试 P 过程与遇到的问题。可能有朋友也会遇到类似问题，因此记录下来和大家分享。
在下一篇文章中，我们还是会回到 PWA 背后的技术，来了解一下，如何使用 Push API 来实现后端服务向客户端进行消息推送。
《PWA 学习与实践》系列文章
第一篇：2018，开始你的 PWA 学习之旅
第二篇：10 分钟学会使用 Manifest，让你的 WebApp 更“Native”
第三篇：从今天开始，让你的 WebApp 离线可用
第四篇：TroubleShooting: 解决 FireBase login 验证失败问题（本文）
第五篇：与你的用户保持联系: Web Push 功能
第六篇：How to Debug? 在 chrome 中调试你的 PWA
第七篇：增强交互：使用 Notification API 来进行提醒
第八篇：使用 Service Worker 进行后台数据同步
第九篇：PWA 实践中的问题与解决方案
第十篇：Resource Hint – 提升页面加载性能与体验
第十一篇：从 PWA 离线工具集 workbox 中学习各类离线策略（写作中…）