Ionic 4 / Angular with PWA
IonicDay 19
WARNING: This is a Google translated (originally Chinese) and reposted article that probably is mostly comfortably understandable for senior JavaScript developers.
Will it come out with RC this summer and the official version will be released like autumn? Although Ionic 4 is not yet released as it normally is, aside from Angular, it can be used also from React, Vue and the search results when it gogged in the future will become grueling like AngularJS and Angular It is kponda who thinks I am afraid if it is told that it is difficult.
I am planning to write about PWA correspondence with Ionic 4 / Angular though it is still before release.
Ionic 4 / Angular personally feel the most benefit is that routing is now using Angular Router instead of original Ionic. Although Ionic 3 also had a function for publishing as a Web application, there was also a slight difficulty in understanding because there was a feeling that we made correspondence of the Web application afterwards in the mobile application framework.
To enable Ionic 3 to display the URL of the page, set the dynamic link.
can be used as a function without problems, in a standard setting, a hash (#) is included in the URL, the setting is changed If you remove the hash, you often feel stressed that you do not work well if you reload the browser at ionic serve.
Since Ionic 4 can use the function of Angular Router as it is, I hope that it will make it easier to use with a record of usage and information volume.
Regarding PWA compliance, it seems that you will not be troubled by using Angular's method as it is.
I'd like to make a simple application and make PWA compliance.
Create project
I will make a project for Ionic 4 for the moment. --type=angularPlease do not forget to attach.
$ ionic start myapp blank --type=angular
PWA compatible
Actually it is not clear what is PWA compliant with what, but for the time being, preparation of service workers and Web manifests seems necessary. Angular adds the @ angular / pwa package to prepare a stationery. In Ionic 4, since @ angular / pwa can be used as it is, I will add it to the project.
$ of add @ angular / pwa
Anyway this is complete!
Try deploying to Firebase Hosting
Publish the file under www built as a Web application to the Web server.
Try to publish it at Firebase Hosting that you can use with ease.
Firebase Tools
Operating Firebase from the CLI For Firebase Tools, please refer to the following page etc.
Enable Hosting with firebase init command.
wwwSet up the public directory as a set Yes, for the setting of single-page app for the first time.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? www
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote dist/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
Deploy
Build it and use www below as it is to deploy it.
$ ionic build --prod
$ firebase deploy
Confirmation
https://firebaseのプロジェクト名.firebaseapp.comYou will be able to access with.
Although I do not understand well with the browser of the PC, I ホームに追加can confirm that a dialog is displayed when accessing with the browser of the smartphone .
Finally
It's too easy and it's almost completely empty.
Since contents are too much, I decided to write about server side rendering (SSR) using Firebase Functions to publish as a Web application, but I tried it a lot yet I still can move SSR at Functions well at Ionic 4 / Angular Is not ...
I will organize it and publish it separately if I can do it well.
Anyway, I am looking forward to releasing Ionic 4.