HanG321 Blog
Be Shine, Be Smile, Be Wild
  • Home
  • Blog
    • 好文閱讀 readings
    • 生活記事 diary
    • 時事評論 commentary
    • 科技資訊 technology
    • 電腦編程 programming
    • 金融財經 finance
    • 音樂電影 music/movie
  • About

ionic 4: capacitor & pwa

January 2, 2019|capacitor, cordova, ionic, pwa, service-worker|電腦編程
Home » Blog » 電腦編程 » ionic 4: capacitor & pwa
ionic 4: capacitor & pwa

This blog post is recording my journey on proof of concept development on ionic 4 capacitor & PWA development in December 2018, just note down some obstacles I faced or founding in the journey, and this is not a tutorial.

Although Progressive Web Apps (PWA) are installable without app store, as of today business requirement may still need the distribute channel via app store. With ionic (UI) and Cordova framework, one single code base can serve native apps and web apps together.

ionic 4

Capacitor or Stencil

Capacitor is still in Release Candidate in Dec 2018, and 1.0 production in 2019. Integrate with Angular. Cross platform: iOS, android, Web, Electron (win & macOS)

Stencil: web component (similar to ploymer), reusable, independent (angular, react, vue)

selected Capacitor as per requirement.

Toolings: Intellij Idea (as subscribed), or Visual Studio Code (free)

Installation

follow the official documentation.  run $ ng build  to create /www folder

Creation on iOS & android projects is smooth and easy. ionic team really did a great job there. However, PWA isn’t that user-friendly.  npm install @ionic/pwa-elements only adding UI component.

PWA services worker

angular-worker: basic usage,  npm install -g @angular/cli ; ng add @angular/pwa  ngsw-config.json.
workbox: advance usage. pre-caching, background sync …etc

very difficult to setup, due to angular builder. Need to manually add “glob”: “workbox-<Component>.<dev|prod>.js” to angular.json . See https://golb.hplar.ch/2018/06/workbox-serviceworker-in-angular-project.html for more details

Development

$ ionic server –> live reload on source folder, so PWA doesn’t work as pre-caching & routing info in /www (build) folder, not src/service-worker.js

edit package.json, add  "dist": "ng build && workbox injectManifest"  Then run $ npm run dist to build.  Then run $ npx cap serve 

alternatively, http-server can be used, that will use /www file. e.g.  http-server www -c-1 -o -a -S localhost -p 8200

HTTPS: PWA works on localhost, 192.168.x.x . Others need HTTPS. It won’t work on non-SSL, took some time to find out, as office wifi is not Class C network. Yet it runs okay at home.

 

 

 

January 2, 2019 admin

Recent Posts

  • Serverless Cloud Run Development: Challenge Lab
    Serverless Cloud Run Development: Challenge LabFebruary 7, 2021
  • ionic 4: capacitor & pwa
    ionic 4: capacitor & pwaJanuary 2, 2019
  • Open file limit of tomcat and mysql in Linux server
    Open file limit of tomcat and mysql in Linux serverDecember 1, 2018

Popular Posts

  • Install XPEnology (DSM) 5.1 on ESXi 6 (HP MicroServer Gen 8)
    Install XPEnology (DSM) 5.1 on ESXi 6 (HP MicroServer Gen 8)June 8, 2015
  • assembly
    assemblyFebruary 11, 2006
  • 呢幾日個blogger 有問題….
    呢幾日個blogger 有問題….October 28, 2004
← Open file limit of tomcat and mysql in Linux server
Serverless Cloud Run Development: Challenge Lab →

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.




最新文章 Recent Posts

  • Serverless Cloud Run Development: Challenge Lab
  • ionic 4: capacitor & pwa
  • Open file limit of tomcat and mysql in Linux server
  • avoid subquery in mysql update statement
  • hacktoberfest

最新留言 Recent Comments

  • admin on LikeCoin
  • Edmond on LikeCoin
  • John Smith on Install macOS High Sierra on VMware
  • admin on Install macOS High Sierra on VMware
  • nana on Install macOS High Sierra on VMware




熱門文章 Popular Posts

  • Install XPEnology (DSM) 5.1 on ESXi 6 (HP MicroServer Gen 8)
    Install XPEnology (DSM) 5.1 on ESXi 6 (HP MicroServer Gen 8) June 8, 2015
  • 呢幾日個blogger 有問題….
    呢幾日個blogger 有問題…. October 28, 2004
  • assembly
    assembly February 11, 2006
  • 新工作
    新工作 January 6, 2009
  • 嫁人要嫁工程師
    嫁人要嫁工程師 April 27, 2006

標籤雲 Tag Cloud

CentOS Character chroot Cluster crash cryptography DD-WRT debug Domino DSM Dual Core DWA email ESXi GCP git google HylaFax IE Java Javascript JRE LikeCoin Linux log LotusScript mint MX MySQL nginx PKI PowerShell Qwiklabs srt telent VMware vpn vSphere WinXP wordpress XPEnology 專欄 網絡資訊 選股 風帆

日曆 Calendar

January 2019
M T W T F S S
  « Dec   Feb »  
 123456
78910111213
14151617181920
21222324252627
28293031  

Follow Me

Follow Us on RSSFollow Us on TwitterFollow Us on YouTube

文章存檔 Archives

Copyright © 2004-2021 hang321.net. All Rights Reserved