Webpack prevents offline mode from working correctly on browsers

Ionic Framework ionic-v3
1

Hey,

I am currently developing a small application as a PoC (proof of concept) for a bigger project. What i am trying to do is build an app with offline mode, which once offline queues all requests and synchronizes them once the connection comes back. I have succesfully made my network manager to listen on network status changes. However, when i go offline webpack tries to load a chunk. Throwing an error below. So a chunk fails loading and somewhere along the line the code is missing definitions.

ChunkLoadError: "Loading chunk 74 failed.
(error: http://localhost:8101/74.js)"
    Webpack 11
core-feeeff0d.js:63
Unhandled Promise rejection: Cstr is undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: "Cstr is undefined"
    initializeComponent core-feeeff0d.js:1715
 initializeComponent@http://localhost:8101/vendor.js:108740:18

This is problematic because i need the app to work offline on the browser. The error happens when running the project using command ā€œionic serveā€ as well as ā€œionic cordova run browserā€. My current conclusion is that the app will never truly work offline on the browser so long as webpack tries to do its thing because at any point during offline status the app may ask the server for a chunk which just will never be succesful. With that in mind, i need to be able to load the whole app in one go on the browser in order for it to work correctly.

Any insight into the issue or solutions would be very welcomeā€¦

My ā€œionic infoā€

Ionic:
   Ionic CLI                     : 5.4.5 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1
Cordova:
   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : browser 6.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 6 other plugins)
Utility:
   cordova-res : not installed
   native-run  : 0.2.9 (update available: 0.3.0)

System:
   NodeJS : v12.13.1 (/usr/bin/node)
   npm    : 2.15.12
   OS     : Linux 5.0
1 Like
2

You can look into adding the angular service worker to cache all the chunks (if it is a web app)

ng add @angular/pwa

1 Like
3

Hey,

I am attempting your solution although i am having trouble with it working. Basically i get a console error

"Service worker registration failed with: TypeError: "ServiceWorker script at http://localhost:8100/ngsw-"worker.js for scope http://localhost:8100/ error encountered during installation. "

I have registered it in app.module.ts
ServiceWorkerModule.register(ā€˜ngsw-worker.jsā€™, {enabled: environment.production});

The environment variable is in fact set to true.

Additionally the build does generate a ngsw-worker.js file in the www directory. I am puzzled why it doesnā€™t work. I assume that ionics routing is somehow preventing the webserver from being able to find the js file and load it.

4

After looking into this issue in more depth, i found out that angular service worker will not load if you run your website using the generic command ionic serve. The service worker file ngsw-worker.js will never be found. What i did instead of this is setup WAMP and ran the project on an apache server. The service worker then loaded as exptected without any trouble. I am sure there alternative server solutions will also resolve the issue for you.

It seems like the server configuration provided by ionic serve is simply not compatible for this kind of file serving.

Overall to the initial problem i asked about in the topic, Service workers seem to be the way to go :slight_smile: