Ionic PWA Example - Moment

An offline camera app built with PWA without any native framework.

Onboarding	Installation	Capturing

Photo Details	Dark Theme	I18n

Installation

Design

• Organize the project structure by features
• Emulate native behavior on clicking Android hardware back button by
  • using undocumented NavController in Ionic
  • removing and re-adding the iframe element on its src is changed
• Import common components, pipes, directives, services and modules to SharedModule
• Use mocks in test with testing injectables in DI
• Use virtual slides to greatly reduce memory usage on displaying full size images
• (WIP) use virtual scroll to reduce memory usage on displaying thumbnails

Features

• Support offline mode after installed
• Store data locally
• Take photos in app (without using external camera app)
• Switch ALL different cameras on devices
• Collect GPS on taking photos
• Support i18n dynamically for English and Tranditional Chinese
• Localize date format dynamically
• Share photos to other apps
• Download photos to device storage
• View next/previous photo with swiping gesture
• Show EXIF of captured photos
• Show camera with device information
• View and zoom fullscreen photos with gesture
• Opt-in automatic error report
• Load thumbnail only for small size images

Tech Stack

• Ionic Angular: front-end UI framework
  • Strict template check
  • ESLint for TypeScript and Angular
• RxDB: reactive database fully provide rxjs Observable APIs
• @angular/pwa: PWA with Angular service worker
• CD with GitHub Action PWA on GitHub Pages
• Transloco: support i18n and localized date format
• WebRTC: for in-app camera access and preview
  • Experimental ImageCapture API: provide full resolution image capturing
• Web Geolocation API: provide native GPS information
• Web Share API level 2: provide native sharing APIs
• ExifReader: extract image metadata
• UAParser.js: user agent parser
• Pinch zoom for Angular: image viewer
• Swiper Angular: swiping slides
• Sentry: error report
• Compressor.js: create thumbnail
• NgRx/component: provide structural directive and pipe to handle Observable efficiently and safely

Development

Start Live-Reload

This live-reload will not enable PWA features such as service worker.

npm run serve

Unit Test

npm run test.ci

Lint

npm run lint

Live-Reload PWA

npm run build.watch.pwa
lite-server --baseDir="www"