9

I want to publish my app as PWA so what i did is

insert this script to index.html

<!--script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    }
</script-->

then install

npm run ionic:build --prod

it looks like it deploy it but my questions are:

  1. what files I need to upload to host for publish the app as PWA?

  2. why when I change something in the app and run ionic serve nothing changed and it changed only in the index.html of the WWW folder? why?(because now it's PWA??)

  3. when I open www folder and I run open index.html when i press on button that open alert dialog it not open that. why?

  4. when I run the command? only in the end of development?
Manspof
  • 598
  • 26
  • 81
  • 173

3 Answers3

18

Run

ionic cordova platform add browser

ionic build browser --prod --release

Then go to [project_folder]/platforms/browser/www and copy the content at you http server.

Gowri
  • 16,587
  • 26
  • 100
  • 160
Pablo Albaladejo
  • 2,950
  • 1
  • 17
  • 21
  • When I do that? when i finish the development of the app? because I run now and when I change something in my app and run ionic serve i don't see the changes. – Manspof May 26 '17 at 09:29
  • It is supposed to be done with `ionic emulate browser --livereload`. But there are some issues with it (https://stackoverflow.com/questions/44178594/ionic-run-browser-livereload-not-working) (https://github.com/driftyco/ionic-cli/issues/790) – Pablo Albaladejo May 26 '17 at 10:00
  • when I run ionic cordova emulate add browser --livereload it shows me "You add platform does not have Api.js" – Manspof May 26 '17 at 10:56
  • `ionic emulate add browse` is not correct. First add platform, then emulate. – Pablo Albaladejo May 26 '17 at 13:33
  • just `ionic emulate browser --livereload` (remove the `add` from your sentence) – Pablo Albaladejo May 26 '17 at 13:40
  • okay, since I'm using Ionic v3 so the command is ' ionic cordova emulate browser --livereload ' – Manspof May 27 '17 at 17:38
  • I tried Bro, but there is no index.html file there and no image, css any file there. – shurvirpm Nov 09 '19 at 06:43
10

Don't bother with Cordova for a PWA. Just use npm run build --prod and upload the /www folder.

PWA is more of a collection of concepts, so it's not just "on" or "off". At a minimum though you probably want to add a manifest file so you can make it more "app like" by hiding the browser frame, setting your icon, app name etc. Uncommenting the line to add service worker doesn't magically make it a PWA if you haven't put anything "useful" into service worker (which you may or may not need to do, depending on how your app works). Also note that you will need HTTPS to use a service worker.

You will also need to manually remove the line from index.html that includes cordova.js (which will be a 404 error if you just upload /www).

Rory
  • 3,270
  • 1
  • 20
  • 23
  • 1
    This approach will impact the development architecture, for example, excluding the native plugins that support browser platform. – Pablo Albaladejo May 29 '17 at 07:54
  • 2
    That is correct. I haven't seen too many that work "well" in a browser though, so would typically check for platform in my code and hide certain buttons etc. The rest of the native specific code already checks for availability but yes of course depending on your type of app you might have to go with cordova browser, but I think that is the exception for apps that "can" function as a PWA. – Rory May 29 '17 at 10:49
  • Please elaborate on the advantages (or disadvantages) of adding the platform browser to Ionic. What does it do and why might I need it? From what I understand SOME Cordova plugins (or Ionic Native) can also target the browser and will fall back to this automatically if you run it as a PWA? The plugins that do not support browser will need to have a wrapper and fallback service for the web - is that correct? – Rodney Oct 06 '17 at 18:18
  • 2
    @Rodney The decision basically comes down to using cordova (platform browser) or not (www folder). If you're only targetting a PWA then there isn't really anything you'd want from cordova as most of the plugins browser wrappers will only give you a tiny fraction of the functionality you'd get on a phone, so you'd like not want to use them for a web app. – Rory Oct 07 '17 at 21:04
  • It also really depends on the plugin/s you're using, but from what I've seen you'd rather want to check for the presence of the plugin and if not rather offer the user a different/better experience than what most of the wrappers provide. – Rory Oct 07 '17 at 21:05
  • Ok, thanks, I'll have a look at each plugin's web implementation – Rodney Oct 10 '17 at 17:30
  • BTW, has anyone figured out how to deploy different versions of the index.html depending on the build type (PWA or native?) https://stackoverflow.com/questions/46734066/how-to-deploy-a-different-version-of-index-html-for-pwa-and-native-apps-with-ion – Rodney Oct 13 '17 at 16:15
1

I use this command for building web app

ionic cordova build browser

Then copy the contents from IONIC-PROJECT/platforms/browser/www to the web server.

Tejpal Sharma
  • 432
  • 6
  • 14