PWA Learning and Practice series articles have been compiled into gitbook-PWA Learning Handbook, and the text has been synchronized to learning-PWA-ebook. Please indicate the author and source of reprint.

This article is the fourth in the PWA Learning & Practice series. This is a problem I encountered when testing other demos, which is a TroubleShooting article.

PWA, as one of the hottest technology concepts at present, has great significance for improving the security, performance and experience of Web applications, and is worth our understanding and learning. If you are interested in PWA, please pay attention to the PWA Learning and Practice series.

The introduction

In the previous article, “Making Your WebApp Offline,” we used the Service Worker for caching and offline support. There is one important problem: Service workers must run under HTTPS (or localhost). Of course, for some demos that only have front-end resources (no back-end services involved), it is perfectly possible to host these front-end (static resources) under an HTTPS Service so that the Service Worker can use them. I chose Google FireBase to host the demo (github Page is also a good choice).

Using FireBase is as simple as FireBase login –> FireBase init–> FireBase deploy. However, during firebase Login, I encountered some problems. This article mainly summarizes the problems I encountered at Firebase Login and the solutions:

  1. Failed to obtain the authorization Code
  2. Authentication Error: Your credentials are no longer valid.

Friends in need can continue to watch.

First of all, if you don’t know anything about Firebase, here’s a very brief introduction.

What is a FireBase

Some time ago TO learn PWA, after following the official tutorial to complete the demo, I want to test the effect on the mobile phone. One problem, however, is that PWA requires HTTPS (or localhost).

This requires us to have an HTTPS service and deploy our locally written demo on it. At the end of the official demo, it is recommended to use Firebase to host your code.

Develop -> Hosting is one of many FireBase scenarios that I need to use. However, there are some problems with executing Firebase Login.

Fault 1: No response (unable to obtain authorization Code) occurs after browser login.

At first, I typed Firebase login on the CLI, and after y was selected, the CLI required an authorization code. The browser will open and prompt you to log in.

Here I use my Google account to authorize login. However, after authorization, there is no response (authorization code cannot be obtained). At this point, I notice that the browser appears to be waiting for localHost to respond.

The solution to this problem is to use firebase login –no-localhost to login.

Re-log in using Firebase login –no-localhost. Here I select a Google account to log in and repeat the process above:

This time, you’ll get a list of authorization code values in the browser:

Paste it into the CLI. [Problem 1] Solved!

Error: Authentication Error: Your credentials are no longer valid.

However, after entering the authorization code on the CLI and waiting for a long time for verification, the following error is reported in the CLI:

What’s going on here? Looking through some information, I found that it was probably caused by the “over the wall” tool you used on your computer. The NPM package (faye-websocket) on which Firebase-tool depends is disabled and therefore cannot be authenticated.

There are two ways to solve this problem:

Method 1: Set the proxy on the router, not the local computer

Some articles suggest that you can avoid this problem by setting up the agent on the router rather than enabling it locally. However, for some reasons, this method has not been tried, but according to some feedback, it should be an effective method.

Method 2 :(hack) modify the code and related environment variables

This method is slightly harder than the first method. The specific operation mode is as follows:

  1. Setting environment Variableshttp_proxyThe agent on my machine uses port 1087.export http_proxy=http://localhost:1087
  2. Modify faye- webSocket to enable proxy configuration. Faye – webSocket is a websocket library that Firebase relies on. Add the following configuration to its client.js:
var Client = function(_url, protocols, options) {
    options = options || {};
    // Add proxy configuration
    options.proxy = {
        origin:  'http://localhost:1087'}; ... }Copy the code

If you have firebase-Tools installed globally, you can find client.js as follows

NODE_PATH= 'NPM prefix -g' // Location of client.js$NODE_PATH/lib/node_modules/firebase-tools/node_modules/firebase/node_modules/faye-websocket/lib/faye/websocket/client.js
Copy the code

  1. Example Set the environment variable NODE_TLS_REJECT_UNAUTHORIZED. export NODE_TLS_REJECT_UNAUTHORIZED=0

  2. Login again, firebase login –no-localhost, and repeat the previous steps. You will find that login is successful!

【 Question 2 】 Solution!

P.S. There is also an issue on Github: Unable to deploy behind a proxy.

In addition, if you do use proxies, it is recommended to use global proxies so that your CLI also uses proxies.

Write in the last

Finally, back to my requirements when I was developing the PWA. As mentioned at the beginning of this article, I used FireBase to host resources in order to test the PWA demo on mobile. Of course, in addition to FireBase, there are two alternatives:

  1. Use the Github page. Since github’s entire site runs over HTTPS, static sites hosted on Github pages can use Service workers.

  2. Use localhost / 127.0.0.1. If you know PWA, you know that you can also use localhost in addition to HTTPS (this is designed to facilitate native debugging).

This is the fourth article in the PWA Learning & Practice series. This article did not discuss the actual technology in PWA, but recorded the process of developing and debugging P and the problems I encountered. You may have friends who have similar problems, so write them down and share them.

In the next article, we’ll return to the technology behind PWA and see how the Push API can be used to enable back-end services to Push messages to clients.

PWA Learning and Practice series

  • Start your PWA learning journey in 2018
  • Learn to Use Manifest to Make your WebApp More “Native”
  • Start making your WebApp available offline today
  • Article 4: TroubleShooting: Solving FireBase Login Authentication Failures (This article)
  • Keep in touch with Your Users: The Web Push feature
  • How to Debug? Debug your PWA in Chrome
  • Enhanced Interaction: Use the Notification API for reminders
  • Chapter 8: Background Data Synchronization using Service Worker
  • Chapter nine: Problems and solutions in PWA practice
  • Resource Hint – Improving page loading performance and Experience
  • Part 11: Learning offline Strategies from workbox