{"id":13785961,"url":"https://github.com/seanwu1105/ionic-pwa-example-moment","last_synced_at":"2025-05-11T21:32:23.568Z","repository":{"id":40486583,"uuid":"334212455","full_name":"seanwu1105/ionic-pwa-example-moment","owner":"seanwu1105","description":"A sample camera app implemented with PWA and Ionic 5.","archived":true,"fork":false,"pushed_at":"2022-11-14T06:24:29.000Z","size":47020,"stargazers_count":28,"open_issues_count":0,"forks_count":10,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-17T22:35:57.785Z","etag":null,"topics":["angular","camera","ionic","pwa","rxdb","webrtc"],"latest_commit_sha":null,"homepage":"https://seanwu1105.github.io/ionic-pwa-example-moment/","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/seanwu1105.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-29T17:14:50.000Z","updated_at":"2024-01-25T03:34:53.000Z","dependencies_parsed_at":"2023-01-21T04:52:24.423Z","dependency_job_id":null,"html_url":"https://github.com/seanwu1105/ionic-pwa-example-moment","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seanwu1105%2Fionic-pwa-example-moment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seanwu1105%2Fionic-pwa-example-moment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seanwu1105%2Fionic-pwa-example-moment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seanwu1105%2Fionic-pwa-example-moment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seanwu1105","download_url":"https://codeload.github.com/seanwu1105/ionic-pwa-example-moment/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253638975,"owners_count":21940434,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","camera","ionic","pwa","rxdb","webrtc"],"created_at":"2024-08-03T19:01:07.319Z","updated_at":"2025-05-11T21:32:19.305Z","avatar_url":"https://github.com/seanwu1105.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Ionic PWA Example - [Moment](https://seanwu1105.github.io/ionic-pwa-example-moment)\n\n[![build](https://github.com/seanwu1105/ionic-pwa-example-moment/actions/workflows/build.yml/badge.svg)](https://github.com/seanwu1105/ionic-pwa-example-moment/actions/workflows/build.yml)\n\nAn offline camera app built with PWA without any native framework.\n\n| Onboarding                                                                                                 | Installation                                                                                               | Capturing                                                                                                  |\n| ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |\n| ![](https://user-images.githubusercontent.com/14951000/112729593-f0d7a580-8f67-11eb-8bbb-b15aac1cdf63.gif) | ![](https://user-images.githubusercontent.com/14951000/112729595-f208d280-8f67-11eb-861d-550ade2b8c28.gif) | ![](https://user-images.githubusercontent.com/14951000/112729596-f46b2c80-8f67-11eb-8e84-b53ad3052a6f.gif) |\n\n| Photo Details                                                                                              | Dark Theme                                                                                                 | I18n                                                                                                       |\n| ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |\n| ![](https://user-images.githubusercontent.com/14951000/112729598-f7feb380-8f67-11eb-9801-e567f89ca066.gif) | ![](https://user-images.githubusercontent.com/14951000/112729601-f92fe080-8f67-11eb-97ba-a7723bdfd302.gif) | ![](https://user-images.githubusercontent.com/14951000/112729602-f92fe080-8f67-11eb-8b03-834735ae802f.gif) |\n\n## Installation\n\n[![launch now](https://user-images.githubusercontent.com/14951000/112782686-2f608380-9080-11eb-970e-b1ba58cfd509.png)](https://seanwu1105.github.io/ionic-pwa-example-moment)\n\n## Design\n\n- Organize the project structure by features\n- Emulate native behavior on clicking Android hardware back button by\n  - using undocumented `NavController` in Ionic\n  - removing and re-adding the `iframe` element on its `src` is changed\n- Import common components, pipes, directives, services and modules to `SharedModule`\n- Use mocks in test with testing injectables in DI\n- Use virtual slides to greatly reduce memory usage on displaying full size images\n- (WIP) use virtual scroll to reduce memory usage on displaying thumbnails\n\n## Features\n\n- Support offline mode after installed\n- Store data locally\n- Take photos in app (without using external camera app)\n- Switch ALL different cameras on devices\n- Collect GPS on taking photos\n- Support i18n dynamically for English and Tranditional Chinese\n- Localize date format dynamically\n- Share photos to other apps\n- Download photos to device storage\n- View next/previous photo with swiping gesture\n- Show EXIF of captured photos\n- Show camera with device information\n- View and zoom fullscreen photos with gesture\n- Opt-in automatic error report\n- Load thumbnail only for small size images\n\n## Tech Stack\n\n- [Ionic Angular](https://ionicframework.com/docs/angular/overview): front-end UI framework\n  - [Strict template check](https://angular.io/guide/template-typecheck)\n  - ESLint for [TypeScript](https://github.com/typescript-eslint/typescript-eslint) and [Angular](https://github.com/angular-eslint/angular-eslint)\n- [RxDB](https://rxdb.info/): reactive database fully provide rxjs `Observable` APIs\n- [`@angular/pwa`](https://angular.io/guide/service-worker-intro): PWA with Angular service worker\n- CD with GitHub Action PWA on GitHub Pages\n- [Transloco](https://ngneat.github.io/transloco/): support i18n and localized date format\n- [WebRTC](https://webrtc.org/): for in-app camera access and preview\n  - Experimental [`ImageCapture`](https://www.w3.org/TR/image-capture/) API: provide full resolution image capturing\n- [Web Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API): provide native GPS information\n- [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) level 2: provide native sharing APIs\n- [ExifReader](https://github.com/mattiasw/ExifReader): extract image metadata\n- [UAParser.js](https://github.com/faisalman/ua-parser-js): user agent parser\n- [Pinch zoom for Angular](https://github.com/drozhzhin-n-e/ngx-pinch-zoom): image viewer\n- [Swiper Angular](https://swiperjs.com/angular): swiping slides\n- [Sentry](https://sentry.io/welcome/): error report\n- [Compressor.js](https://github.com/fengyuanchen/compressorjs): create thumbnail\n- [NgRx/component](https://ngrx.io/guide/component): provide structural directive and pipe to handle `Observable` efficiently and safely\n\n## Development\n\n### Start Live-Reload\n\nThis live-reload will not enable PWA features such as service worker.\n\n```bash\nnpm run serve\n```\n\n### Unit Test\n\n```bash\nnpm run test.ci\n```\n\n### Lint\n\n```bash\nnpm run lint\n```\n\n### Live-Reload PWA\n\n```bash\nnpm run build.watch.pwa\nlite-server --baseDir=\"www\"\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseanwu1105%2Fionic-pwa-example-moment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseanwu1105%2Fionic-pwa-example-moment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseanwu1105%2Fionic-pwa-example-moment/lists"}