ionic-team / ionic-cli

The Ionic command-line interface
MIT License
1.99k stars 652 forks source link

Removing service worker for Cordova builds #3800

Open askilondz opened 5 years ago

askilondz commented 5 years ago

For a project that builds both Cordova native apps and PWAs via ng add @angular/pwa would be nice if the CLI removed the service worker when doing a Cordova build. Currently have to set the serviceWorker field in angular.json to false and remove the ServiceWorkerModule register in app.module.ts otherwise the Cordova build will try to register a service work and output an error (which it should). But would be nice if the CLI was able to handle this automatically based on if I'm doing a ionic build --prod for PWA or ionic cordova run android for native.

Slavrix commented 5 years ago

I don't know if you ended finding a workaround for this or not, but her is what I am doing currently.

In my angular.json I created more configurations.

angular.json
...
          "production-pwa": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod-pwa.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "4mb",
                  "maximumError": "5mb"
                }
              ],
              "assets": [
                {
                  "glob": "**/*",
                  "input": "src/assets",
                  "output": "assets"
                },
                {
                  "glob": "**/*.svg",
                  "input": "node_modules/ionicons/dist/ionicons/svg",
                  "output": "./svg"
                },
                "src/manifest.json",
                "src/OneSignalSDKUpdaterWorker.js",
                "src/OneSignalSDKWorker.js"
              ],
              "serviceWorker": true
            },
           "production-android": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod-android.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "4mb",
                  "maximumError": "5mb"
                }
              ],
              "serviceWorker": false
            },
...

which are called using these npm run commands

package.json
...
"build:pwa:prod": "npm run ionic:build:before && ng build --configuration=production-pwa",
"prepare:android:prod": "ionic cordova prepare android --configuration=production-android"
...

in the environment.ts files, they have any specifics for each platform, and they also have the current platform in it, so i can access it in app.module.ts

environments.ts 

export const environment = {
  production: true,
  platform: 'android',
  'firebase': {
     ...
  },
};

the pwa environment environment.prod-pwa.tshas platform: 'pwa

app.module.ts

...
imports: [
...
ServiceWorkerModule.register('OneSignalSDKWorker.js', { enabled: environment.platform === 'pwa' }),
...
]
mrahmadt commented 5 years ago

I don't know if you ended finding a workaround for this or not, but her is what I am doing currently.

In my angular.json I created more configurations.

angular.json
...
          "production-pwa": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod-pwa.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "4mb",
                  "maximumError": "5mb"
                }
              ],
              "assets": [
                {
                  "glob": "**/*",
                  "input": "src/assets",
                  "output": "assets"
                },
                {
                  "glob": "**/*.svg",
                  "input": "node_modules/ionicons/dist/ionicons/svg",
                  "output": "./svg"
                },
                "src/manifest.json",
                "src/OneSignalSDKUpdaterWorker.js",
                "src/OneSignalSDKWorker.js"
              ],
              "serviceWorker": true
            },
           "production-android": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod-android.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "4mb",
                  "maximumError": "5mb"
                }
              ],
              "serviceWorker": false
            },
...

which are called using these npm run commands

package.json
...
"build:pwa:prod": "npm run ionic:build:before && ng build --configuration=production-pwa",
"prepare:android:prod": "ionic cordova prepare android --configuration=production-android"
...

in the environment.ts files, they have any specifics for each platform, and they also have the current platform in it, so i can access it in app.module.ts

environments.ts 

export const environment = {
  production: true,
  platform: 'android',
  'firebase': {
     ...
  },
};

the pwa environment environment.prod-pwa.tshas platform: 'pwa

app.module.ts

...
imports: [
...
ServiceWorkerModule.register('OneSignalSDKWorker.js', { enabled: environment.platform === 'pwa' }),
...
]

Thanks

Could you please share your full file for package.json and angular.json, I'm not familiar with their format