Existing App does not get Service Worker capabilities #8779
Comments
|
Same problem, with same versions. |
|
Can you confirm you've followed the guide, in particular with respect to step 3: https://angular.io/guide/service-worker-getstart#step-3-import-and-register-the-service-worker |
|
Hello @alxhub I can confirm I followed the guide. Only piece of code which differs on my side is this part: which I excluded. |
|
Hi @sntmrtn, Can you publish a repo which reproduces the problem? Thanks, |
|
@alxhub I confirm I've followed those steps, I can not publish that repo, it's an app for a client. |
|
I am seeing the same. I followed the guide to the T but service worker won't load. |
|
@alxhub Please see the following repo: |
|
@sntmrtn thanks for the reproduction! Can you confirm exactly what steps you're taking to build and serve the project, where you would expect to see the Service Worker? As mentioned in the documentation, |
|
Hi @alxhub First, thanks a lot for your help! I confirm that I build the project through I expect to see the SW registered and activated in the "Application" tab of Chrome devtools, but nothing shows up. From my terminal: And the result: EDIT: It actually works on https, see: https://dist-zobmrubhnx.now.sh/ However, I still did not manage to make it work on my client's project. |
|
I have the same issue for an existing app. I followed the steps mentioned on https://angular.io/guide/service-worker-getstart but still no luck :( |
|
I encountered also this issue on my existing app. So I tried to generate a new app like so and after a Then I tried to generate a new app like so I then followed the steps described in the guide and it did also work as expected. I have no ideas what could be the root cause of this interaction between this line of code and the service worker as no errors are thrown in the console neither at compile time nor at runtime, but maybe this experience could help solving this issue. The last thing I did is moving the assignment in a method that is never called at the startup of the app so I could have both a service worker registered and an instance of Pusher running. |
|
The same here... |
|
Service worker won't run because of ng app is not stable (ApplicationRef.isStable (https://angular.io/api/core/ApplicationRef#members), application is not becoming stable if there is a code which runs intervals (setInteral or Observable.timer and etc. which come from setInterval or setTimeout (related with NgZone.hasPendingMicrotasks)). As example of such behaviour:
Workaround for such behaviour wrap - wrap all timer-code to Full code import 'rxjs/add/observable/interval';
import { Component, ApplicationRef, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
constructor(private applicationRef: ApplicationRef) {
}
ngOnInit() {
this.applicationRef.isStable.subscribe((s) => { // #1
if (s) { // #2
setInterval(t => { console.log('Ping')}, 500);
} // #3
}); // #4
// If you uncomment 1-4 - service-worker will not run
this.applicationRef.isStable.subscribe(t => {
console.log('App stable: ' + t);
});
}
} |
|
I also had this issue, the culprit seams to be angularFire2. I worked around it by registering the service worker in main.ts. platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
if ('serviceWorker' in navigator && environment.production) {
navigator.serviceWorker.register('/ngsw-worker.js');
}
}).catch(err => console.log(err)); |
|
I had the same problem. In my case it was caused by the default route in the app.module.ts
With these settings the ngsw-worker.js didn't load. |
|
This has definitely not been resolved yet. HNY! |
|
I had the same problem as @ChokeBilly. The problem was that in template shell.component.html, which is my root component corresponding to |
|
@Argentan : Thanx. Your solution works in my project. :-) At least, the service worker is registered in Chrome. But I'm still facing a problem with caching. When I'm going offline (service worker tab) and reload the page, the app is loaded (HTML, CSS) , but the Google icon font is missing. On a second page reload, the page is empty and the console has no log entry. |
|
Did yesterday: if you follow @angular's website tutorial for getting started with SWs everything works fine. I had some issues, but all mine, @angular/core@^5.2 and @angular/cli@^1.6.6 are working fine. |
|
@alxhub , I am trying to make my existing app into pwa and for that I am following https://angular.io/guide/service-worker-getting-started. Now, the point is I have ejected ng command and hence using webpack. Upon the running the build command, ngsw.json is not getting created in dist folder although, ngsw-worker.js file is getting created. For your review, I am pasting the snippets below. angular-cli.json code
`{ }` ngsw-config.json file `{ }` main.ts file `import { enableProdMode } from '@angular/core'; import { AppModule } from './app/app.module'; if (environment.production) { platformBrowserDynamic().bootstrapModule(AppModule) `import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; // import { HelloPoseidonModule } from 'kognifai-poseidon-hello-poseidon'; @NgModule({ Having said that, while running the build command say npm run build-prod-ngsw it gives below error
(node:23044) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: Cannot read property 'startsWith' of undefined
I have also attached screenshots for your review. Kindly, let me know what is wrong going here? Thanks, |
|
I have fixed the above issue, now ngsw.json is getting generated in dist folder and I am seeing that no service worker registered is coming. Here is the screen shot. I am also confused about 'ngsw-worker.js' or 'woker-basic.min.js'. Like which one I should be using? Thanks, |
|
@rahulsahay19 Try to post a question @ http://stackoverflow.com |
|
@odahcam not a problem. Its fixed. Thanks! |
|
@rahulsahay19 , can I know what the fix is? |
|
@zendizmo In my case, my ngsw-config.json file was not on latest schema. When I took the sample config, then it worked later on moved my changes in there! |
|
This issue is still marked as open. Can I get a solid confirmation that Angular CLI now fully supports Service Worker? Has anyone put a larger Angular app in production with Service Worker enabled successfully? Cheers |
|
Apparently there are cases that prevent PWA work properly in Angular, but they are not clearly stated in documents or any errors get returned while building your app. If you are only dealing with Angular's own packages you are supposed to be fine, when you are using external libraries (even ones developed by Google's own people, like AngularFire2) chances are it will fail by default, then you search and patch your code to make it work. So I believe now it's rather a problem of properly informing erroneous cases & documentation issue than service worker part of Angular itself. Still it didn't work for me as is. |
|
@bjornharvold, for me it doesn't 😢 |
|
One more question wanted to check, whether below urls can be relative. { |
|
I've solved this issue with a workaround, what it does is register the service worker and simulate the messages that ServiceWorkerModule sends. |
|
I tried Pedro-vk's solution. Worked better than other solutions - on Chrome. Works great and out of the box (sort of... ) What I managed to pinpoint is on both (FireFox and Chrome) workers are active, do a checkForUpdates and download the new altered files. What I cannot put my finger on is that on Chrome signaling works as expected on this line of code: But Firefox messages never get 'UPDATE_AVAILABLE', but always 'STATUS' Stuck... Some print screens:
|
filipesilva
added
area: @angular-devkit/build-angular
and removed
comp: cli/build
labels
|
@Argentan 's solution about regiter service worker in main.ts worked perfect to me! |
|
Hi, a quick note, updated to angular 6, firebase 5 and angularfire2 5rc10 and the fix is no longer needed, service workers works out of the box. |
|
Based on #8779 (comment), this seems to have been resolved. |
* Added all forms of Castform to pokedex * Reduced font size of pokemon selection dropdown * Removed interval check for service worker update, which was causing the service worker to fail (angular/angular-cli#8779 (comment)) * Added @angular/pwa dependency * Added static.dpsplus.app to PWA caching URLs
|
I struggled with something similar for a long time, but my problem was different. I used I just changed it to Maybe that will help someone. |
ghost
mentioned this issue
|
@dirand analysis solved my problem: SW did not get registered because of some external code running intervals in the default routed component. To detect it, I simply started to comment everything suspicious and then go by exclusion, wrapping the unstable code in this.applicationRef.isStable.subscribe((isStable) {}. @dirand Thanks for your great contribution, I struggled with this way to much! |
|
With angular-cli 6.2.5 and angular 6.1.10, this issue still exists. Also related to angular#20970, thanks @dirand 's solution |
|
As of Angular CLI 7.1.3 and PWA 0.11.3, @Argentan 's fix is still required. Had this problem today and could not for the life of me figure out why this was not working, but had it working in older apps. |
|
thanks @ChokeBilly! I had similar messed up default route redirect. |
|
This costs me few hours to find out what is not working. My service worker dont register in whatever. The problem is, service worker only worked on HTTPS(secure content) |
|
The solution from @Argentan works and is more simple. |
|
I know its an old old thread and @Argentan's solution has worked for me for most browsers. However for some weird reason it sends back a rejected promise in Safari 12.1.1 This is the error i get: Am i the only one who is having this problem? I get the same error if i try to register Service Worker directly from safari developer console: P.S: I am on Angular v8.0.1 and latest NG CLI.
|
|
Apparently its an issue with the latest Angular 8 release. |
|
@hassanasad I am also having the same issue. With Version 8.2.2 Chrome is detecting Manifest but not detecting Service Workers... Angular CLI: 8.2.2
Node: 10.16.3
OS: linux x64
Angular: 8.2.3 |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
and others
Uh oh!
There was an error while loading. Please reload this page.
Versions
Repro steps
Have an existing app with no PWA capability and apply steps to upgrade it as described in docs.
Observed behavior
Despite the fact it builds with no error and
distfolder has files likengsw.json&ngsw-worker.jsas expected, they are not loaded on network request when browsed. (Tested with incognito mode as well)No service-worker effect at all in app.
Desired behavior
Service Worker added to built app when steps in official docs are applied.
Mention any other details that might be useful
On the same machine, a new app generated with Angular-CLI 1.6.0 with
--service-workerflag. That app loads service worker as expected.The text was updated successfully, but these errors were encountered: