-1

I'm making PWA with Angular and Firebase. Using StackBlitz for developing.

I want to make "Add to home screen" Chrome standard advice working when user opens my app in browser, but I can't correctly call "service worker" JS from my code...

I created sw.js in /src folder of my project. I've added it to 'scripts' and 'assets' sections in .angular-cli.json and .angular.json. And in StackBlitz everything works fine!

But when I deploy project to Firebase (using Stackblitz build-in functionality) nothing works... Seems like server doesn't see the file in expected dir (/src/sw.js)... Did anybody face same problem?

Georgy Spassky
  • 63
  • 6
  • I've tried all possible paths (in my index.html) to JS file: /sw.js, /dist/proj-name/sw.js, /dist/proj-name/src/sw.js... Nothing works... – Georgy Spassky Nov 03 '19 at 15:33
  • I had same problem with favicons, manifest and so on (to create PWA). But this was solved - I've placed them on side server (for example, static.mywebsite.com) and linked to my app. But service worker can't be placed outside of app domain... (((( – Georgy Spassky Nov 03 '19 at 15:35

1 Answers1

0

I don't think there's a way to fix it, I'm pretty sure the problem is the stackblitz server. but luckily firebase engineers made a simple node script to replace a single file. It worked for me. As the link describes just install git, and node, and then in command prompt run these commands: git

  1. git clone https://gist.github.com/e00c34dd82b35c56e91adbc3a9b1c412.git firebase-hosting-deploy-file
  2. cd firebase-hosting-deploy-file
  3. npm install
  4. then Add your javascript file in the same file tree it is in stackblitz, for me it was in src/assets/scripts/alert.js, so i made an assets folder with a scripts folder, with my js file inside. do this all within the firebase-hosting-deploy-file directory.
  5. the run this in prompt: "node deployFile.js [commit]", for me with my file structure it was "node deployFile.js otherproject-a5722 /assets/scripts/alert.js commit"

additional info:

I tried replicating your problem, let me know if the link works. https://stackblitz.com/edit/angular-epvm8w. Basically just in index.html. the js file just has alert("alert"); in it. it works like you said but when deployed i think the stackblitz server is replacing the content with html. I think this because in chrome developers panel under sources the js file had the same html as the index template from stackblitz's github. Makes me think it's just a bug. same thing happened to a css file.

Ben
  • 80
  • 7
  • Many thanks, Ben, the idea is awesome, but the package itself looks a bit frightening... About 500 dependencies... 10000 files... How can I be sure this addon won't make a backdoor in my app? )))) – Georgy Spassky Nov 03 '19 at 22:10
  • Great! I'm very glad to hear it :) Truth be told it could be make a backdoor, i don't know, but it's very unlikely. There was only like 4 node packages referenced in the main file, three of them were pretty ubiquitous and 1 was done by a firebase team member :) Should be good – Ben Dec 30 '19 at 18:06