CATALOG.md: Add Spotify (PR #1187)

Co-authored-by: Knallli <41125802+Knallli@users.noreply.github.com>
Co-authored-by: Adam Weeden <adamweeden@gmail.com>
Co-authored-by: Ronan Jouchet <ronan@jouchet.fr>

CATALOG.md

@@ -41,3 +41,71 @@ nativefier 'https://www.udemy.com/'
 ```
 
 Note: most videos will work, but to play some DRMed videos you must pass `--widevine` AND [sign the app](https://github.com/nativefier/nativefier/issues/1147#issuecomment-828750362).
+
+## Spotify
+
+```sh
+nativefier 'https://open.spotify.com/'
+  --widevine
+  -u 'useragent of a non-Chrome browser, e.g. the current stable Firefox'
+  --inject spotify.js
+  --inject spotify.css
+```
+
+Notes:
+
+- [Inject](https://github.com/nativefier/nativefier/blob/master/docs/api.md#inject) the following javascript as `spotify.js` to prevent "Unsupported Browser" messages.
+```javascript
+function dontShowBrowserNoticePage() {
+    const browserNotice = document.getElementById('browser-support-notice');
+    console.log({ browserNotice })
+    if (browserNotice) {
+        // when Spotify displays the browser notice, it's not just the notice, but the entire page is focused on not allowing you to proceed.
+        // So in this case, we hide the body element (so nothing shows) until the JS can delete the service worker and reload (which will actually load the player)
+        document.getElementsByTagName('body')[0].style.display = 'none';
+    }
+}
+
+function reload() {
+    window.location.href = window.location.href;
+}
+
+function nukeWorkers() {
+    dontShowBrowserNoticePage();
+    if ('serviceWorker' in navigator) {
+        caches.keys().then(function (cacheNames) {
+            cacheNames.forEach(function (cacheName) {
+                console.debug('Deleting cache', cacheName);
+                caches.delete(cacheName);
+            });
+        });
+        navigator.serviceWorker.getRegistrations().then((registrations) => {
+            registrations.forEach((worker) =>
+                worker.unregister().then((u) => {
+                    console.debug('Unregistered worker', worker);
+                    reload();
+                }).catch((e) =>
+                    console.error('Unable to unregister worker', error, { worker })
+                )
+            );
+        });
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    nukeWorkers()
+});
+
+if (document.readyState === "interactive") {
+    nukeWorkers();
+}
+```
+
+- It is also required to [sign the app](https://github.com/nativefier/nativefier/blob/master/docs/api.md#widevine), or many songs will not play.
+- The [icon](https://github.com/nativefier/nativefier/blob/master/docs/api.md#icon) also needs to be changed manually.
+- To hide all download links (as if you were in the actual app), [inject](https://github.com/nativefier/nativefier/blob/master/docs/api.md#inject) the following CSS as `spotify.css`:
+```css
+a[href="/download"] {
+    display: none;
+}
+```

src/build/prepareElectronApp.ts

@@ -121,7 +121,7 @@ async function maybeCopyScripts(srcs: string[], dest: string): Promise<void> {
     }
 
     const postFixHash = generateRandomSuffix();
-    const destFileName = `inject-${postFixHash}.${path.extname(src)}`;
+    const destFileName = `inject-${postFixHash}${path.extname(src)}`;
     const destPath = path.join(dest, 'inject', destFileName);
     log.debug(`Copying injection file "${src}" to "${destPath}"`);
     await copyFileOrDir(src, destPath);