Added serviceworker and web-manifest #154

lucacasonato · 2019-03-09T00:20:31Z

I added a basic web-maifest (using webpack-pwa-manifest) and a workbox based service-worker (using workbox-webpack-plugin). The service worker gets generated automatically by workbox and gets auto injected by webpack. If more advanced service-worker functionality is needed this can still be achieved with workbox-webpack-plugin. More info about this can be found on https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin.

Workbox is currently set to cache all resources created by webpack (default). This can be changed with some options. The service-worker is only injected in prod, not dev (someone should test this please).

I just put in some basic stuff into the manifest, you might want to change the name or description. I did not know where to put the logo image for the manifest so I created a new assets folder. You might want to move this too.

kylecarbs

I'll give this a test. It LGTM.

lucacasonato · 2019-03-09T19:09:03Z

@kylecarbs Before this gets merged in we have to decide if we want 'StaleWhileRevalidate' caching or 'NetworkFirst'. Also how long should the cache be valid?

NetworkFirst will try to pull from network but the request doest finish within a set amount of time, it will use the cache instead (if available).

StaleWhileRevalidate will jump to cache instantly if available, and will, once the network has calmed, download up to date files from the server into the cache for use next time the page is loaded.

NGTmeaty · 2019-03-09T23:57:46Z

LGTM.

avelino

LGTM

kylecarbs · 2019-03-10T15:01:34Z

I like StaleWhileRevalidate. You should be able to test now, as both issues have been resolved!

test

kylecarbs · 2019-03-13T18:46:34Z

Does this work as expected @creativeguy2013?

webbertakken · 2019-03-15T17:56:16Z

LGTM

On a Chromebook with slow hardware this would bring a great performance increase compared to running the actual VS Code through the linux terminal while also keeping a native experience.

I guess the same would have to be applied to the /ssh route on coder.com, for a split screen experience having both of these open. I haven't found any reference in this repository, how would this be handled?

sr229 · 2019-03-17T12:51:18Z

LGTM, this would increase performance on slower networks as well.

lucacasonato · 2019-03-20T14:49:13Z

I am checking if everything works as expected now, was very busy the last few weeks. Sorry for the long wait.

lucacasonato · 2019-03-20T16:42:21Z

The service worker now properly loads. There are a few important details though. The service worker only initializes when a TRUSTED SSL certificate is used. They also don't work on non HTTPS connections. Everything else will work normally though.

I benchmarked everything a little. The service worker reduces bandwidth required by client and server by about 650x after the first request. Depending on what you do in the first session this may be higher or lower as icons are still loaded gradually. We might want to preload all icons in the background later.

You can now install code-server client as a PWA on iOS (???), Android (chrome), Windows (chrome), Mac (chrome) and Linux (chrome).

scripts/webpack.client.config.js

NGTmeaty · 2019-03-20T22:29:01Z

@Hasan123987 Please stop typing in this issue unless you have questions related to this issue.

lucacasonato · 2019-03-22T21:50:11Z

Any reason this hasn't been merged yet? Everything should be ready now.

andreimc · 2019-03-27T04:36:09Z

👍 to get this merged

avelino · 2019-03-27T09:40:56Z

@kylecarbs @multishifties feedback this issue pls

andreimc · 2019-03-29T05:07:20Z

I have been running this and I get a warning from the monaco editor:

t.logOnceWebWorkerWarning @ simpleWorker.ts:35
t._getOrCreateWorker @ editorWorkerServiceImpl.ts:355
t._getProxy @ editorWorkerServiceImpl.ts:363
t._withSyncedResources @ editorWorkerServiceImpl.ts:378
t.computeLinks @ editorWorkerServiceImpl.ts:403
(anonymous) @ editorWorkerServiceImpl.ts:65
Promise.then (async)
provideLinks @ editorWorkerServiceImpl.ts:65
(anonymous) @ getLinks.ts:75
d @ getLinks.ts:74
(anonymous) @ links.ts:249
l @ async.ts:23
(anonymous) @ links.ts:249
(anonymous) @ tslib.es6.js:97
(anonymous) @ tslib.es6.js:78
(anonymous) @ tslib.es6.js:71
u @ tslib.es6.js:67
e.beginCompute @ links.ts:238
e.onModelChanged @ links.ts:226
(anonymous) @ links.ts:207
e.fire @ event.ts:584
t.setModel @ codeEditorWidget.ts:421
(anonymous) @ textFileEditor.ts:153
Promise.then (async)
(anonymous) @ textFileEditor.ts:135
Promise.then (async)
t.setInput @ textFileEditor.ts:134
t.doSetInput @ editorControl.ts:178
t.openEditor @ editorControl.ts:70
t.doShowEditor @ editorGroupView.ts:792
t.restoreEditors @ editorGroupView.ts:420
t @ editorGroupView.ts:144
t.create @ types.ts:169
e._createInstance @ instantiationService.ts:104
e.createInstance @ instantiationService.ts:69
t.createFromSerialized @ editorGroupView.ts:59
t.doCreateGroupView @ editorPart.ts:515
fromJSON @ editorPart.ts:894
t.deserializeNode @ grid.ts:460
t.deserializeNode @ grid.ts:453
t.deserialize @ grid.ts:489
t.doCreateGridControlWithState @ editorPart.ts:888
t.doCreateGridControlWithPreviousState @ editorPart.ts:850
t.doCreateGridControl @ editorPart.ts:822
t.createContentArea @ editorPart.ts:799
t.create @ part.ts:53
hn.createEditorPart @ workbench.ts:1280
hn.renderWorkbench @ workbench.ts:1236
hn.doStartup @ workbench.ts:439
hn.startup @ workbench.ts:385
(anonymous) @ main.ts:130
Promise.then (async)
(anonymous) @ main.ts:109
Promise.then (async)
n.open @ main.ts:107
t.main @ main.ts:333
(anonymous) @ workbench.ts:199
(anonymous) @ tslib.es6.js:97
(anonymous) @ tslib.es6.js:78
(anonymous) @ tslib.es6.js:71
u @ tslib.es6.js:67
e.initialize @ workbench.ts:167
(anonymous) @ client.ts:28
(anonymous) @ tslib.es6.js:97
(anonymous) @ tslib.es6.js:78
(anonymous) @ tslib.es6.js:71
u @ tslib.es6.js:67
(anonymous) @ client.ts:20
(anonymous) @ client.ts:92
(anonymous) @ tslib.es6.js:97
(anonymous) @ tslib.es6.js:78
s @ tslib.es6.js:68
Promise.then (async)
c @ tslib.es6.js:70
(anonymous) @ tslib.es6.js:71
u @ tslib.es6.js:67
e.task @ client.ts:80
r.initialize @ client.ts:20
e @ client.ts:57
r @ client.ts:18
(anonymous) @ client.ts:118
(anonymous) @ client.ts:118
r @ bootstrap:63
(anonymous) @ index.ts:1
r @ bootstrap:63
(anonymous) @ index.ts:2
r @ bootstrap:63
(anonymous) @ bootstrap:195
(anonymous) @ bootstrap:195
simpleWorker.ts:37 Cannot find module './workerMain.js'

andreimc · 2019-03-29T05:10:54Z

looking at this: https://github.com/Microsoft/monaco-editor-webpack-plugin -> I think it should be added so monaco uses service workers

kylecarbs · 2019-04-02T15:37:49Z

@andreimc does that warning break functionality?

Once conflicts are in I'd be happy to merge.

andreimc · 2019-04-03T07:43:05Z

@kylecarbs, it doesn’t. I have a PR ready to actually enable Monaco via service worker. But it needs this to go in first.

andreimc · 2019-04-03T08:13:06Z

I fixed conflicts and added MonacoWebpackPlugin on this PR @kylecarbs #411

lucacasonato · 2019-04-03T08:57:17Z

I think we should merge this PR now and then add the monaco worker via a separate PR from master. Then the two PRs can stay split.

lucacasonato · 2019-04-03T09:06:04Z

Related: #411 (comment)

Service workers !== web workers

* sw/master: Changed single to double quotes Serviceworker now properly loads added caching added assets to individual module folders actually fixed images i think fixed image link added deps in package.json Added serviceworker and manifest.json

* upstream/master: Fix error when shared process exits with null Add flags for customizing user data dir and extensions dir (#420) Initialize backup service (#419) Add port in use message (#418) Improve CI caching (#416) Update notes title

andreimc · 2019-04-04T09:57:05Z

@creativeguy2013 I have added a PR on your master to fix conflicts if you merge that in this can go in. Yeah agreed the web workers can be addressed later

Fixes your conflicts so 154 can be merged

code-asher · 2019-04-04T15:32:14Z

Apologies for nit-picking: could we revert the indentation back to tabs, and use tabs for any newly added code?

code-asher · 2019-04-04T15:36:48Z

Do we need to commit the logo twice? Could we keep it perhaps in just the web directory and use the root variable to reference it via absolute path? Edit: will have to do this (or create a third copy in server) since when I run yarn start it's trying to read packages/server/assets/logo.png which doesn't exist.

scripts/webpack.client.config.js

lucacasonato · 2019-04-14T17:35:28Z

Do we need to commit the logo twice? Could we keep it perhaps in just the web directory and use the root variable to reference it via absolute path? Edit: will have to do this (or create a third copy in server) since when I run yarn start it's trying to read packages/server/assets/logo.png which doesn't exist.

I added a third copy in server. Not quite sure what you mean with root variable. If you elaborate on this I can implement it.

scripts/webpack.client.config.js

lucacasonato · 2019-04-16T19:48:30Z

About only registering the service worker for production: this seems to work fine now when run in the codercom/code-server/master. It was indeed the NODE_ENV in the Dockerfile.

Everything should be good to go now, so if there are no there comments you can merge.

* Added serviceworker and manifest.json * added deps in package.json * fixed image link * actually fixed images i think * added assets to individual module folders * added caching * Serviceworker now properly loads * Changed single to double quotes * Update lock * moved the service worker back into prod only * removed sw from general * changed background color of splash screen * added logo to server * centralized logo into single assets folder

lucacasonato added 2 commits March 8, 2019 19:57

Added serviceworker and manifest.json

cab9610

added deps in package.json

ba6aa19

lucacasonato requested review from code-asher and kylecarbs as code owners March 9, 2019 00:20

lucacasonato mentioned this pull request Mar 9, 2019

Add a service-worker to enable caching and desktop PWA #138

Closed

lucacasonato added 3 commits March 8, 2019 21:47

fixed image link

712486c

actually fixed images i think

b6bc800

added assets to individual module folders

ebb9cdd

kylecarbs reviewed Mar 9, 2019

View reviewed changes

added caching

0535fd5

avelino approved these changes Mar 10, 2019

View reviewed changes

Merge pull request #1 from codercom/master

88cb7cc

test

Kiser360 mentioned this pull request Mar 12, 2019

native apps #142

Closed

NGTmeaty mentioned this pull request Mar 16, 2019

Add favicon to binary #147

Closed

Serviceworker now properly loads

7f242e6

MichaelDesantis reviewed Mar 20, 2019

View reviewed changes

scripts/webpack.client.config.js Outdated Show resolved Hide resolved

lucacasonato and others added 2 commits March 20, 2019 18:04

Changed single to double quotes

3cddc28

Merge branch 'master' into master

61e3a70

andreimc mentioned this pull request Mar 29, 2019

Monaco editor not using web workers #375

Closed

andreimc mentioned this pull request Apr 3, 2019

Add serviceworker + Monaco Service Worker #411

Closed

andreimc added 2 commits April 3, 2019 13:10

Merge remote-tracking branch 'sw/master'

396084d

* sw/master: Changed single to double quotes Serviceworker now properly loads added caching added assets to individual module folders actually fixed images i think fixed image link added deps in package.json Added serviceworker and manifest.json

Update lock

2bd44c6

andreimc mentioned this pull request Apr 3, 2019

Fix conflicst for #154 #412

Closed

Merge remote-tracking branch 'upstream/master'

979250e

* upstream/master: Fix error when shared process exits with null Add flags for customizing user data dir and extensions dir (#420) Initialize backup service (#419) Add port in use message (#418) Improve CI caching (#416) Update notes title

Merge pull request #2 from andreimc/master

418f586

Fixes your conflicts so 154 can be merged

code-asher requested changes Apr 4, 2019

View reviewed changes

scripts/webpack.client.config.js Outdated Show resolved Hide resolved

scripts/webpack.client.config.js Show resolved Hide resolved

lucacasonato added 4 commits April 14, 2019 19:14

moved the service worker back into prod only

ade46ee

removed sw from general

9ab5e72

changed background color of splash screen

778fd15

added logo to server

0aebe36

code-asher reviewed Apr 16, 2019

View reviewed changes

scripts/webpack.client.config.js Outdated Show resolved Hide resolved

centralized logo into single assets folder

eef5c0a

code-asher approved these changes Apr 16, 2019

View reviewed changes

code-asher merged commit 22b485a into coder:master Apr 16, 2019

HenningCash mentioned this pull request May 10, 2019

service-worker script wont load from non-root path #670

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added serviceworker and web-manifest #154

Added serviceworker and web-manifest #154

lucacasonato commented Mar 9, 2019 •

edited

Loading

kylecarbs left a comment

lucacasonato commented Mar 9, 2019

NGTmeaty commented Mar 9, 2019

avelino left a comment

kylecarbs commented Mar 10, 2019

kylecarbs commented Mar 13, 2019

webbertakken commented Mar 15, 2019

sr229 commented Mar 17, 2019

lucacasonato commented Mar 20, 2019

lucacasonato commented Mar 20, 2019 •

edited

Loading

NGTmeaty commented Mar 20, 2019

lucacasonato commented Mar 22, 2019

andreimc commented Mar 27, 2019

avelino commented Mar 27, 2019

andreimc commented Mar 29, 2019

andreimc commented Mar 29, 2019

kylecarbs commented Apr 2, 2019

andreimc commented Apr 3, 2019

andreimc commented Apr 3, 2019

lucacasonato commented Apr 3, 2019

lucacasonato commented Apr 3, 2019

andreimc commented Apr 4, 2019

code-asher commented Apr 4, 2019

code-asher commented Apr 4, 2019 •

edited

Loading

lucacasonato commented Apr 14, 2019

lucacasonato commented Apr 16, 2019

Added serviceworker and web-manifest #154

Added serviceworker and web-manifest #154

Conversation

lucacasonato commented Mar 9, 2019 • edited Loading

kylecarbs left a comment

Choose a reason for hiding this comment

lucacasonato commented Mar 9, 2019

NGTmeaty commented Mar 9, 2019

avelino left a comment

Choose a reason for hiding this comment

kylecarbs commented Mar 10, 2019

kylecarbs commented Mar 13, 2019

webbertakken commented Mar 15, 2019

sr229 commented Mar 17, 2019

lucacasonato commented Mar 20, 2019

lucacasonato commented Mar 20, 2019 • edited Loading

NGTmeaty commented Mar 20, 2019

lucacasonato commented Mar 22, 2019

andreimc commented Mar 27, 2019

avelino commented Mar 27, 2019

andreimc commented Mar 29, 2019

andreimc commented Mar 29, 2019

kylecarbs commented Apr 2, 2019

andreimc commented Apr 3, 2019

andreimc commented Apr 3, 2019

lucacasonato commented Apr 3, 2019

lucacasonato commented Apr 3, 2019

andreimc commented Apr 4, 2019

code-asher commented Apr 4, 2019

code-asher commented Apr 4, 2019 • edited Loading

lucacasonato commented Apr 14, 2019

lucacasonato commented Apr 16, 2019

lucacasonato commented Mar 9, 2019 •

edited

Loading

lucacasonato commented Mar 20, 2019 •

edited

Loading

code-asher commented Apr 4, 2019 •

edited

Loading