WIP: Dev service worker

[qinyuhang]

Fixes #

Proposed Changes

• Add PWA offline cache, make installed PWA app can work offline.

TODOs

[] In my test, I found out some apis are not cached in the first run. So when I turn my phone to Airplane mode, I navigate to some route, there is no data at all. Maybe There should be one clear list of resources to cache.

[] Cannot offline view a game. It seems the request to sgf is not cached. I shall dig into it.

How to test, The Basic Concept.

1 Your need Proxy https://online-go.com/sw.js to your local build dist sw.js. This requires hijack to https, because it service work requires https to work. And the service works js file must using the same domain with the main site.
2 You need access to your device's browser console to execute code to register service worker. navigator.serviceWorker.register('./sw.js'). We need this code to register service work js file.
3 Above 2 steps must be done in the same device, In the test case it's my iPhone.

[qinyuhang]

How to test（with a iPhone and Mac):

1. Install Charles SSL-Certifacate

Using Charles.app to Proxying SSL, And INSTALL Certification to iPhone and Mac (IMPORTANT! MUST install in both devices!).

Official Manual to install ssl-certifacates

2. Build the sw.js from source code.

3. Configure Charles.app

From tool bar map local (Tools => Map Local) to map https://online-go.com/sw.js to actual sw.js which is build from source code.

4. Configure iPhone WebInspect

Via Settings => Safari => Advanced => WebInspect.

5. Connect both iPhone and Mac in the same wifi, for Example 'My_Wifi', then get your Mac's IP, for Example 192.168.1.150

6. Configure iPhone Proxy, via Settings => WLAN => My_Wifi => HTTP Proxy => Manual.

Set Server to Mac's IP, 192.168.1.150, port 8888(Charles default port).

7. Using Mac to inspect Safari on iPhone

Connect iPhone to Mac via cable. Using Safari Mac => Development to inspect iPhone Page

8. Load św.js

In Inspect, call navigator.serviceWorker.register('./sw.js').

9. Finish!

Congratulations! You have done all steps! Now using iPhone Safari Share menu to install to HomeScreen. Then open screen icon. Next set Airplane Mode on. You can see the PWA app works offline.

[qinyuhang]

The final result.

RPReplay_Final1614913156.2.MP4

[qinyuhang]

How to test, The Basic Concept.

1 Your need Proxy https://online-go.com/sw.js to your local build dist sw.js. This requires hijack to https, because it service work requires https to work. And the service works js file must using the same domain with the main site.
2 You need access to your device's browser console to execute code to register service worker. navigator.serviceWorker.register('./sw.js'). We need this code to register service work js file.
3 Above 2 steps must be done in the same device, In the test case it's my iPhone.

[qinyuhang]

Update It is occasionally.

Update. Although service worker cache JS CSS file. I found out the response of some JS file is not promising, Add it to todo.

1.7s to réponse jQuery
4.6s to response vender.js

[anoek]

Feel free to re-open this PR if you decide to resume this effort