VS Code as a Progressive Web App

[bst82551]

vscode.dev would benefit greatly from the ability to install as a progressive web app. Benefits include faster load times, smoother interface, and offline access.

[joaomoreno]

What browser are you on? On Edge, you can easily install vscode.dev as a PWA.

[bst82551]

@joaomoreno I'm on Chrome on Chrome OS. User agent below:

Mozilla/5.0 (X11; CrOS x86_64 14092.66.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.95 Safari/537.36

[bst82551]

@joaomoreno I just ran an update just in case. Still no go on Chrome 94.

Mozilla/5.0 (X11; CrOS x86_64 14150.64.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.104 Safari/537.36

[filiptronicek]

What browser are you on? On Edge, you can easily install vscode.dev as a PWA.

I tested the site on Lighthouse, and it looks like it is not available to install because of a missing SW.

Web app manifest or service worker do not meet the installability requirements

Failure reason No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.

[RuiNtD]

While I can install this on my iPad as a full-screen PWA, it does have some issues, namely:

1. Lack of an icon (uses a screenshot of the webpage)
2. Signing in with GitHub redirects me to a full-screen page saying that I may now close this page. There is no “Done” or close button, so I have to close and reopen the app at that point.

[Saasmull]

While I can install this on my iPad as a full-screen PWA, it does have some issues, namely:

1. Lack of an icon (uses a screenshot of the webpage)
2. Signing in with GitHub redirects me to a full-screen page saying that I may now close this page. There is no “Done” or close button, so I have to close and reopen the app at that point.

The first problem can be solved with the

<link name="apple-touch-icon" href="/path/to/the/icon.png">

tag.

Perhaps are more tags like for the splah screen image needed.

Unfortunately isn't apple open-source and PWA friendly because this is an alternative to there AppStore😟

[Saasmull]

@joaomoreno I just ran an update just in case. Still no go on Chrome 94.

Mozilla/5.0 (X11; CrOS x86_64 14150.64.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.104 Safari/537.36

That's because Edge don't need a service worker but Chrome.

[leonhma]

+1. I'd really like to see this be available as a PWA and integrate with the available and coming browser apis. Being available as a PWA enables vscode to be discovered and used by many more people as it will be 'natively' available on tablets and (hyped!) chromebooks (the education sector). The service worker also lets you implement offline functionality, so the PWA version can be used offline. It can then also be installed from the playstore via a 'Trusted Web Activity' and the microsoft store. Eventually, with enough support by coming browser apis, it could feature-wise get close to the native vscode. (All from a single codebase!)

As for the technical side, fireship has made a great starter video: PWA get Started Video

(You can use workbox for most caching/offline functions and pwa-asset-generator for the images)

Also:

What browser are you on? On Edge, you can easily install vscode.dev as a PWA.

Thats probably whats called a 'shortcut' in Chrome.

[leonhma]

To get a basic PWA working you'd have to:

1. Add a service worker javascript file.
2. Add a script that registers a service worker in your index html file:

   <script>
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker.register('/path/to/service-worker.js').then(function(registration) {
         console.debug('ServiceWorker registration successful with scope: ', registration.scope);
       }).catch(function(err) {
         console.warn('ServiceWorker registration failed: ', err);
       });
     } else {
       console.warn('Service workers are not supported.');
     }
   </script>

Now with only these changes you should get the small 'install' button. But there are of course many more nicities of PWAs.

1. Generate all icons and splash images. run: npx pwa-asset-generator starting-icon.svg icons-dir/ -i index-file.html -m manifest-file.json This fetches the latest apple design specifications for icons and generates all needed icons and splash images (even the maskable ones!) from the starting-icon

2. Implement caching using workbox. For this, you can import workbox from a cdn and create simple caching rules using it's easy-to-use api. I'd recommend to cache the main 'vscode.dev' site and all relevant javascript, wasm, image, and font data. The user's files are stored in local IndexedDB anyways. This is what I did to get basic caching for images working using the CacheFirst strategy (everything is loaded from cache if there's a cache hit, else it's loaded over network):

   importScripts(
     "https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js"
   )
   
   workbox.routing.registerRoute(
       ({ request }) => request.destination === 'image',
       new workbox.strategies.CacheFirst()
   )

   

3. Populate the manifest with more info. There are many more supported keys that add ways to specify screenshots for PWA-stores, a background color for the loading screen, protocol-handlers, shortcuts, navigation scopes, and more.

Edit: PWAs can only be installed over secure connections, so you'd have to tunnel to your localhost via ngrok for testing locally.

[leonhma]

I think i'm actually going to add that myself and create a pr if that's possible. @joaomoreno how do i add my service-worker.js file to the build script?

[joaomoreno]

I think i'm actually going to add that myself and create a pr if that's possible. @joaomoreno how do i add my service-worker.js file to the build script?

We're not accepting PRs for vscode.dev. Thanks anyway.

As for progress here: we are currently internally working on PWA for vscode.dev, rest assured!

[leonhma]

@joaomoreno you can check my post above, should be a solid starting point

[webmaxru]

@joaomoreno if any help on getting started with / configuring / customizing / extending Workbox needed - I'm here to help!

My preferred way to use it - building a service worker with "workbox-build" module: you don't need CDN, you pick exactly modules/method you need + bundle/minify to get production-ready optimized service worker.

[leonhma]

I mean the App ist probably built using node, so you can Just import workbox and webpacks treeshaking will take care of the minifying

[joaomoreno]

This is now pushed and deployed.

[github-actions[bot]]

Invalid test plan item. See errors below and the test plan item spec for more information. This comment will go away when the issues are resolved.

Error: Test plan item should have header