what is the difference between ionic-pwa-toolkit and ionic 4 + service worker enabled?
voordev opened this issue · 5 comments
I find the documentation very unclear on the differences between PWAs toolkit and
and ionic 4 with service worker enabled.
Could someone point out the difference perhaps here and in the docs?
The documentation states that adding the service worker to index.html converts an ionic app to a 'pwa' but then this PWA Toolkit creates another project in different format.
For example using ionic serve does not work one a project generated with the PWA Toolkit.
Thus, also ionic serve -c to testdrive the mobile part of the PWA does not work on a mobile.
Very unclear hope someone could share some more light on this.
Im sure im not the only one.
Then not add, capicitator is part of PWA Toolkit but also a standalone project that can be integrated in other projects? Thus, is capicitator part of the PWA Toolkit?
Hi voordev,
The PWA toolkit builds Progressive Web App right out of the box. Now a PWA has the following features:
- Available/hosted on the web - so it bypasses app stores, and updates are served as soon as code is updated.
- Able to be accessed offline or using poor internet connection - this is where the service worker comes in. The service worker caches the app so that it is still available when offline.
- Able to be installed onto a user's device where support for installing Progressive Web Apps is available.
As well the PWA Toolkit uses Stencil which is a tool used to create Web Components, which are part of Ionic 4. In Ionic 4 all components are also Web Components which means they are compiled by the browser, not by the framework. This improves performance and also allows you to create the UI without a framework.
Ionic 4 with service worker enabled would be an ionic app that is cached by service worker and can be accessed and used offline or with poor internet connection.
Josh Morony explains Capacitor in his book Building Mobile Apps with Ionic and Angular:
Capacitor allows you to wrap your web based application in a native shell, and acts as a bridge to the native device. Capacitor will create a native application for each platform you are targeting (e.g. iOS and Android), it will set up a web view in that application, and then it will load your web application into that web view. The end result is a native application (that looks no different to any other native mobile application) that is running your web code.
So Capacitor is not part of the PWA toolkit. You would use Capacitor or PhoneGap to build an app for the app stores using mostly the same code as for building the PWA.
@voordev ionic 4 are web components build with stencil that can be used on Angular, and hopefully React and VUE; probably you've used them in an angular project. This toolkit instead, actually it seems more a boilerplate honestly, uses stencil components directly. For PWA i think it will be better to use google workbox directly.
Try google workbox.
https://github.com/enaizi/pwa-sidemenu. Already configured with google workbox.
Very clear.
Thank you to all contributions.
I forgot to close the issue.
Hope it contributes to future reference