├── .github ├── CODEOWNERS ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── LICENSE ├── README.md ├── ionic ├── .gitignore ├── capacitor.config.json ├── ionic.config.json ├── package-lock.json ├── package.json ├── public │ ├── assets │ │ ├── icon │ │ │ ├── favicon.png │ │ │ └── icon.png │ │ └── shapes.svg │ ├── index.html │ └── manifest.json ├── src │ ├── App.test.tsx │ ├── App.tsx │ ├── index.tsx │ ├── pages │ │ ├── Home.css │ │ └── Home.tsx │ ├── react-app-env.d.ts │ ├── serviceWorker.ts │ ├── setupTests.ts │ └── theme │ │ └── variables.css └── tsconfig.json ├── material-ui ├── .gitignore ├── README.md ├── capacitor.config.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js └── yarn.lock ├── preact ├── .gitignore ├── README.md ├── capacitor.config.json ├── package.json ├── public │ └── index.html └── src │ ├── assets │ ├── favicon.ico │ └── icons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ └── mstile-150x150.png │ ├── components │ ├── app.js │ └── header │ │ ├── index.js │ │ └── style.css │ ├── index.js │ ├── manifest.json │ ├── routes │ ├── 404 │ │ ├── index.js │ │ └── style.css │ ├── camera │ │ └── index.js │ ├── geolocation │ │ └── index.js │ └── home │ │ ├── index.js │ │ └── style.css │ └── style │ └── index.css ├── svelte-framework7 ├── .gitignore ├── README.md ├── assets-src │ ├── apple-touch-icon.png │ └── web-icon.png ├── babel.config.js ├── build │ ├── build.js │ └── webpack.config.js ├── capacitor.config.json ├── framework7.json ├── package-lock.json ├── package.json ├── postcss.config.js └── src │ ├── components │ └── app.svelte │ ├── css │ ├── app.scss │ └── icons.css │ ├── fonts │ ├── Framework7Icons-Regular.eot │ ├── Framework7Icons-Regular.ttf │ ├── Framework7Icons-Regular.woff │ ├── Framework7Icons-Regular.woff2 │ ├── MaterialIcons-Regular.eot │ ├── MaterialIcons-Regular.ttf │ ├── MaterialIcons-Regular.woff │ └── MaterialIcons-Regular.woff2 │ ├── index.html │ ├── js │ ├── app.js │ └── routes.js │ ├── pages │ ├── 404.svelte │ └── home.svelte │ └── static │ └── icons │ ├── 128x128.png │ ├── 144x144.png │ ├── 152x152.png │ ├── 192x192.png │ ├── 256x256.png │ ├── 512x512.png │ ├── apple-touch-icon.png │ └── favicon.png └── vuejs-vuetify ├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── capacitor.config.json ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── img │ └── icons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── android-chrome-maskable-192x192.png │ │ ├── android-chrome-maskable-512x512.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-180x180.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── apple-touch-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── msapplication-icon-144x144.png │ │ ├── mstile-150x150.png │ │ └── safari-pinned-tab.svg ├── index.html └── robots.txt ├── src ├── App.vue ├── components │ └── DeviceInfoCard.vue ├── main.ts ├── plugins │ └── vuetify.ts ├── registerServiceWorker.ts ├── router │ └── index.ts ├── shims-tsx.d.ts ├── shims-vue.d.ts ├── store │ └── index.ts └── views │ └── Home.vue ├── tsconfig.json └── vue.config.js /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/en/github/creating-cloning-and-archiving-repositories/about-code-owners 2 | -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | Contributor Code of Conduct 2 | 3 | As contributors and maintainers of this Capacitor Community project, we pledge to respect everyone who contributes by posting issues, updating documentation, submitting pull requests, providing feedback in comments, and any other activities. 4 | 5 | Communication through this repository must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct. 6 | 7 | We promise to extend courtesy and respect to everyone involved in this project regardless of gender, gender identity, sexual orientation, disability, age, race, ethnicity, religion, or level of experience. We expect anyone contributing to this Capacitor Community project to do the same. 8 | 9 | If any member of the community violates this code of conduct, the maintainers of this Capacitor Community and/or the Ionic project may take action, including but not limited to removing issues, comments, and PRs or blocking accounts as deemed appropriate. 10 | 11 | If you are subject to or witness unacceptable behavior, or have any other concerns, please contact the maintainer of this repository or email hi@ionicframework.com. 12 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | # Contributing to this project 3 | 4 | Describe the steps a developer should go through in order to contribute to this project 5 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | dist 3 | .sourcemaps 4 | xcuserdata/ 5 | node_modules/ 6 | cli/dist/commands/copy.js 7 | Pods/ 8 | test_project/ 9 | *.map 10 | .DS_Store 11 | Podfile.lock 12 | example/www/ 13 | example/electron/www/* 14 | example/electron/capacitor.config.json 15 | example/android/app/src/main/assets/public/* 16 | !example/android/app/src/main/assets/public/.gitkeep 17 | example/ios/IonicRunner/public/* 18 | !example/ios/IonicRunner/public/.gitkeep 19 | Build/* 20 | Index/ 21 | .*.sw* 22 | site/www 23 | android-template.iml 24 | !/build/.npmkeep 25 | lerna-debug.log 26 | capacitor-ios/ 27 | local.properties 28 | contents.xcworkspacedata 29 | .stencil/ 30 | android-template/.gradle/ 31 | android-template/app/app.iml 32 | /site/.env 33 | /site/.firebase 34 | .gradle/ 35 | .settings/ 36 | .project 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) COPYRIGHT_YEAR COPYRIGHT_HOLDER 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Capacitor Examples 2 | 3 | Capacitor works with any web technology to enable web developers to deploy their web apps natively to iOS and Android, and the web as a Progressive Web App. 4 | 5 | Capacitor drops into any new or existing web app. To see how to use Capacitor with your frontend tooling of choice, check out the examples in this repo. 6 | 7 | ## How to Run 8 | 9 | 1. Change into the UI Framework directory of choice, then run `npm install`. 10 | 2. Build the web app: `npm run build`. 11 | 3. Add a native platform: `npx cap add android` or `npx cap add ios`. 12 | 4. Copy the built web app into the native platform: `npx cap copy`. 13 | 5. Open the native IDE and run the app: `npx cap open android` or `npx cap open ios`. 14 | 15 | > Normally the top-level `android` and `ios` native project folders are committed to source control. They are excluded here to avoid bloating this repository. 16 | -------------------------------------------------------------------------------- /ionic/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # capacitor 4 | android/ 5 | ios/ 6 | 7 | # dependencies 8 | /node_modules 9 | /.pnp 10 | .pnp.js 11 | 12 | # testing 13 | /coverage 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | .vscode 25 | 26 | npm-debug.log* 27 | yarn-debug.log* 28 | yarn-error.log* 29 | -------------------------------------------------------------------------------- /ionic/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "com.capacitorjs.examples.ionic", 3 | "appName": "cap-ionic", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "build", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /ionic/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "react" 7 | } 8 | -------------------------------------------------------------------------------- /ionic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic", 3 | "version": "0.0.1", 4 | "private": true, 5 | "dependencies": { 6 | "@capacitor/core": "^2.1.2", 7 | "@ionic/react": "^5.0.7", 8 | "@ionic/react-router": "^5.0.7", 9 | "@testing-library/jest-dom": "^4.2.4", 10 | "@testing-library/react": "^9.4.0", 11 | "@testing-library/user-event": "^8.0.3", 12 | "@types/jest": "^24.0.25", 13 | "@types/node": "^12.12.24", 14 | "@types/react": "^16.9.17", 15 | "@types/react-dom": "^16.9.4", 16 | "@types/react-router": "^5.1.4", 17 | "@types/react-router-dom": "^5.1.3", 18 | "ionicons": "^5.0.0", 19 | "react": "^16.13.0", 20 | "react-dom": "^16.13.0", 21 | "react-router": "^5.1.2", 22 | "react-router-dom": "^5.1.2", 23 | "react-scripts": "3.4.1", 24 | "typescript": "3.8.3" 25 | }, 26 | "scripts": { 27 | "start": "react-scripts start", 28 | "build": "react-scripts build", 29 | "test": "react-scripts test", 30 | "eject": "react-scripts eject" 31 | }, 32 | "eslintConfig": { 33 | "extends": "react-app" 34 | }, 35 | "browserslist": { 36 | "production": [ 37 | ">0.2%", 38 | "not dead", 39 | "not op_mini all" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | }, 47 | "devDependencies": { 48 | "@capacitor/cli": "^2.1.2" 49 | }, 50 | "description": "An Ionic project" 51 | } 52 | -------------------------------------------------------------------------------- /ionic/public/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/ionic/public/assets/icon/favicon.png -------------------------------------------------------------------------------- /ionic/public/assets/icon/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/ionic/public/assets/icon/icon.png -------------------------------------------------------------------------------- /ionic/public/assets/shapes.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /ionic/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ionic App 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /ionic/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Ionic App", 3 | "name": "My Ionic App", 4 | "icons": [ 5 | { 6 | "src": "assets/icon/favicon.png", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "assets/icon/icon.png", 12 | "type": "image/png", 13 | "sizes": "512x512", 14 | "purpose": "maskable" 15 | } 16 | ], 17 | "start_url": ".", 18 | "display": "standalone", 19 | "theme_color": "#ffffff", 20 | "background_color": "#ffffff" 21 | } 22 | -------------------------------------------------------------------------------- /ionic/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders without crashing', () => { 6 | const { baseElement } = render(); 7 | expect(baseElement).toBeDefined(); 8 | }); 9 | -------------------------------------------------------------------------------- /ionic/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Redirect, Route } from 'react-router-dom'; 3 | import { IonApp, IonRouterOutlet } from '@ionic/react'; 4 | import { IonReactRouter } from '@ionic/react-router'; 5 | import Home from './pages/Home'; 6 | 7 | /* Core CSS required for Ionic components to work properly */ 8 | import '@ionic/react/css/core.css'; 9 | 10 | /* Basic CSS for apps built with Ionic */ 11 | import '@ionic/react/css/normalize.css'; 12 | import '@ionic/react/css/structure.css'; 13 | import '@ionic/react/css/typography.css'; 14 | 15 | /* Optional CSS utils that can be commented out */ 16 | import '@ionic/react/css/padding.css'; 17 | import '@ionic/react/css/float-elements.css'; 18 | import '@ionic/react/css/text-alignment.css'; 19 | import '@ionic/react/css/text-transformation.css'; 20 | import '@ionic/react/css/flex-utils.css'; 21 | import '@ionic/react/css/display.css'; 22 | 23 | /* Theme variables */ 24 | import './theme/variables.css'; 25 | 26 | const App: React.FC = () => ( 27 | 28 | 29 | 30 | 31 | } /> 32 | 33 | 34 | 35 | ); 36 | 37 | export default App; 38 | -------------------------------------------------------------------------------- /ionic/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import * as serviceWorker from './serviceWorker'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | // If you want your app to work offline and load faster, you can change 9 | // unregister() to register() below. Note this comes with some pitfalls. 10 | // Learn more about service workers: https://bit.ly/CRA-PWA 11 | serviceWorker.unregister(); 12 | -------------------------------------------------------------------------------- /ionic/src/pages/Home.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/ionic/src/pages/Home.css -------------------------------------------------------------------------------- /ionic/src/pages/Home.tsx: -------------------------------------------------------------------------------- 1 | import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, IonIcon } from '@ionic/react'; 2 | import React, { useEffect, useState } from 'react'; 3 | import { shareSocialOutline } from 'ionicons/icons'; 4 | 5 | import { Plugins, DeviceInfo } from '@capacitor/core'; 6 | 7 | import './Home.css'; 8 | 9 | const Home: React.FC = () => { 10 | const [deviceInfo, setDeviceInfo] = useState(null); 11 | 12 | const shareTweet = async () => { 13 | const { Share } = Plugins; 14 | 15 | const share = await Share.share({ 16 | title: 'Share Capacitor', 17 | text: 'I deployed an Ionic React web app as a native mobile app using @capacitorjs in minutes!', 18 | url: 'https://capacitorjs.com', 19 | }); 20 | } 21 | 22 | useEffect(() => { 23 | const getDeviceInfo = async () => { 24 | const { Device } = Plugins; 25 | 26 | setDeviceInfo(await Device.getInfo()); 27 | }; 28 | 29 | getDeviceInfo(); 30 | }, []); 31 | 32 | return ( 33 | 34 | 35 | 36 | Capacitor Example 37 | 38 | 39 | 40 | 41 | 42 | Capacitor Ionic Example 43 | 44 | 45 | shareTweet()}> 46 | 47 | Share This 48 | 49 |
50 |

Device Info:

51 | 
52 |           {deviceInfo ? (
53 |             JSON.stringify(deviceInfo, null, 2)
54 |           ) : null}
55 |
56 |
57 | 58 | 59 | ); 60 | }; 61 | 62 | export default Home; 63 | -------------------------------------------------------------------------------- /ionic/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /ionic/src/serviceWorker.ts: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | type Config = { 24 | onSuccess?: (registration: ServiceWorkerRegistration) => void; 25 | onUpdate?: (registration: ServiceWorkerRegistration) => void; 26 | }; 27 | 28 | export function register(config?: Config) { 29 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 30 | // The URL constructor is available in all browsers that support SW. 31 | const publicUrl = new URL( 32 | process.env.PUBLIC_URL, 33 | window.location.href 34 | ); 35 | if (publicUrl.origin !== window.location.origin) { 36 | // Our service worker won't work if PUBLIC_URL is on a different origin 37 | // from what our page is served on. This might happen if a CDN is used to 38 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 39 | return; 40 | } 41 | 42 | window.addEventListener('load', () => { 43 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 44 | 45 | if (isLocalhost) { 46 | // This is running on localhost. Let's check if a service worker still exists or not. 47 | checkValidServiceWorker(swUrl, config); 48 | 49 | // Add some additional logging to localhost, pointing developers to the 50 | // service worker/PWA documentation. 51 | navigator.serviceWorker.ready.then(() => { 52 | console.log( 53 | 'This web app is being served cache-first by a service ' + 54 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 55 | ); 56 | }); 57 | } else { 58 | // Is not localhost. Just register service worker 59 | registerValidSW(swUrl, config); 60 | } 61 | }); 62 | } 63 | } 64 | 65 | function registerValidSW(swUrl: string, config?: Config) { 66 | navigator.serviceWorker 67 | .register(swUrl) 68 | .then(registration => { 69 | registration.onupdatefound = () => { 70 | const installingWorker = registration.installing; 71 | if (installingWorker == null) { 72 | return; 73 | } 74 | installingWorker.onstatechange = () => { 75 | if (installingWorker.state === 'installed') { 76 | if (navigator.serviceWorker.controller) { 77 | // At this point, the updated precached content has been fetched, 78 | // but the previous service worker will still serve the older 79 | // content until all client tabs are closed. 80 | console.log( 81 | 'New content is available and will be used when all ' + 82 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 83 | ); 84 | 85 | // Execute callback 86 | if (config && config.onUpdate) { 87 | config.onUpdate(registration); 88 | } 89 | } else { 90 | // At this point, everything has been precached. 91 | // It's the perfect time to display a 92 | // "Content is cached for offline use." message. 93 | console.log('Content is cached for offline use.'); 94 | 95 | // Execute callback 96 | if (config && config.onSuccess) { 97 | config.onSuccess(registration); 98 | } 99 | } 100 | } 101 | }; 102 | }; 103 | }) 104 | .catch(error => { 105 | console.error('Error during service worker registration:', error); 106 | }); 107 | } 108 | 109 | function checkValidServiceWorker(swUrl: string, config?: Config) { 110 | // Check if the service worker can be found. If it can't reload the page. 111 | fetch(swUrl, { 112 | headers: { 'Service-Worker': 'script' } 113 | }) 114 | .then(response => { 115 | // Ensure service worker exists, and that we really are getting a JS file. 116 | const contentType = response.headers.get('content-type'); 117 | if ( 118 | response.status === 404 || 119 | (contentType != null && contentType.indexOf('javascript') === -1) 120 | ) { 121 | // No service worker found. Probably a different app. Reload the page. 122 | navigator.serviceWorker.ready.then(registration => { 123 | registration.unregister().then(() => { 124 | window.location.reload(); 125 | }); 126 | }); 127 | } else { 128 | // Service worker found. Proceed as normal. 129 | registerValidSW(swUrl, config); 130 | } 131 | }) 132 | .catch(() => { 133 | console.log( 134 | 'No internet connection found. App is running in offline mode.' 135 | ); 136 | }); 137 | } 138 | 139 | export function unregister() { 140 | if ('serviceWorker' in navigator) { 141 | navigator.serviceWorker.ready.then(registration => { 142 | registration.unregister(); 143 | }); 144 | } 145 | } 146 | -------------------------------------------------------------------------------- /ionic/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /ionic/src/theme/variables.css: -------------------------------------------------------------------------------- 1 | /* Ionic Variables and Theming. For more info, please see: 2 | http://ionicframework.com/docs/theming/ */ 3 | 4 | /** Ionic CSS Variables **/ 5 | :root { 6 | /** primary **/ 7 | --ion-color-primary: #3880ff; 8 | --ion-color-primary-rgb: 56, 128, 255; 9 | --ion-color-primary-contrast: #ffffff; 10 | --ion-color-primary-contrast-rgb: 255, 255, 255; 11 | --ion-color-primary-shade: #3171e0; 12 | --ion-color-primary-tint: #4c8dff; 13 | 14 | /** secondary **/ 15 | --ion-color-secondary: #3dc2ff; 16 | --ion-color-secondary-rgb: 61, 194, 255; 17 | --ion-color-secondary-contrast: #ffffff; 18 | --ion-color-secondary-contrast-rgb: 255, 255, 255; 19 | --ion-color-secondary-shade: #36abe0; 20 | --ion-color-secondary-tint: #50c8ff; 21 | 22 | /** tertiary **/ 23 | --ion-color-tertiary: #5260ff; 24 | --ion-color-tertiary-rgb: 82, 96, 255; 25 | --ion-color-tertiary-contrast: #ffffff; 26 | --ion-color-tertiary-contrast-rgb: 255, 255, 255; 27 | --ion-color-tertiary-shade: #4854e0; 28 | --ion-color-tertiary-tint: #6370ff; 29 | 30 | /** success **/ 31 | --ion-color-success: #2dd36f; 32 | --ion-color-success-rgb: 45, 211, 111; 33 | --ion-color-success-contrast: #ffffff; 34 | --ion-color-success-contrast-rgb: 255, 255, 255; 35 | --ion-color-success-shade: #28ba62; 36 | --ion-color-success-tint: #42d77d; 37 | 38 | /** warning **/ 39 | --ion-color-warning: #ffc409; 40 | --ion-color-warning-rgb: 255, 196, 9; 41 | --ion-color-warning-contrast: #000000; 42 | --ion-color-warning-contrast-rgb: 0, 0, 0; 43 | --ion-color-warning-shade: #e0ac08; 44 | --ion-color-warning-tint: #ffca22; 45 | 46 | /** danger **/ 47 | --ion-color-danger: #eb445a; 48 | --ion-color-danger-rgb: 235, 68, 90; 49 | --ion-color-danger-contrast: #ffffff; 50 | --ion-color-danger-contrast-rgb: 255, 255, 255; 51 | --ion-color-danger-shade: #cf3c4f; 52 | --ion-color-danger-tint: #ed576b; 53 | 54 | /** dark **/ 55 | --ion-color-dark: #222428; 56 | --ion-color-dark-rgb: 34, 36, 40; 57 | --ion-color-dark-contrast: #ffffff; 58 | --ion-color-dark-contrast-rgb: 255, 255, 255; 59 | --ion-color-dark-shade: #1e2023; 60 | --ion-color-dark-tint: #383a3e; 61 | 62 | /** medium **/ 63 | --ion-color-medium: #92949c; 64 | --ion-color-medium-rgb: 146, 148, 156; 65 | --ion-color-medium-contrast: #ffffff; 66 | --ion-color-medium-contrast-rgb: 255, 255, 255; 67 | --ion-color-medium-shade: #808289; 68 | --ion-color-medium-tint: #9d9fa6; 69 | 70 | /** light **/ 71 | --ion-color-light: #f4f5f8; 72 | --ion-color-light-rgb: 244, 245, 248; 73 | --ion-color-light-contrast: #000000; 74 | --ion-color-light-contrast-rgb: 0, 0, 0; 75 | --ion-color-light-shade: #d7d8da; 76 | --ion-color-light-tint: #f5f6f9; 77 | } 78 | 79 | @media (prefers-color-scheme: dark) { 80 | /* 81 | * Dark Colors 82 | * ------------------------------------------- 83 | */ 84 | 85 | body { 86 | --ion-color-primary: #428cff; 87 | --ion-color-primary-rgb: 66,140,255; 88 | --ion-color-primary-contrast: #ffffff; 89 | --ion-color-primary-contrast-rgb: 255,255,255; 90 | --ion-color-primary-shade: #3a7be0; 91 | --ion-color-primary-tint: #5598ff; 92 | 93 | --ion-color-secondary: #50c8ff; 94 | --ion-color-secondary-rgb: 80,200,255; 95 | --ion-color-secondary-contrast: #ffffff; 96 | --ion-color-secondary-contrast-rgb: 255,255,255; 97 | --ion-color-secondary-shade: #46b0e0; 98 | --ion-color-secondary-tint: #62ceff; 99 | 100 | --ion-color-tertiary: #6a64ff; 101 | --ion-color-tertiary-rgb: 106,100,255; 102 | --ion-color-tertiary-contrast: #ffffff; 103 | --ion-color-tertiary-contrast-rgb: 255,255,255; 104 | --ion-color-tertiary-shade: #5d58e0; 105 | --ion-color-tertiary-tint: #7974ff; 106 | 107 | --ion-color-success: #2fdf75; 108 | --ion-color-success-rgb: 47,223,117; 109 | --ion-color-success-contrast: #000000; 110 | --ion-color-success-contrast-rgb: 0,0,0; 111 | --ion-color-success-shade: #29c467; 112 | --ion-color-success-tint: #44e283; 113 | 114 | --ion-color-warning: #ffd534; 115 | --ion-color-warning-rgb: 255,213,52; 116 | --ion-color-warning-contrast: #000000; 117 | --ion-color-warning-contrast-rgb: 0,0,0; 118 | --ion-color-warning-shade: #e0bb2e; 119 | --ion-color-warning-tint: #ffd948; 120 | 121 | --ion-color-danger: #ff4961; 122 | --ion-color-danger-rgb: 255,73,97; 123 | --ion-color-danger-contrast: #ffffff; 124 | --ion-color-danger-contrast-rgb: 255,255,255; 125 | --ion-color-danger-shade: #e04055; 126 | --ion-color-danger-tint: #ff5b71; 127 | 128 | --ion-color-dark: #f4f5f8; 129 | --ion-color-dark-rgb: 244,245,248; 130 | --ion-color-dark-contrast: #000000; 131 | --ion-color-dark-contrast-rgb: 0,0,0; 132 | --ion-color-dark-shade: #d7d8da; 133 | --ion-color-dark-tint: #f5f6f9; 134 | 135 | --ion-color-medium: #989aa2; 136 | --ion-color-medium-rgb: 152,154,162; 137 | --ion-color-medium-contrast: #000000; 138 | --ion-color-medium-contrast-rgb: 0,0,0; 139 | --ion-color-medium-shade: #86888f; 140 | --ion-color-medium-tint: #a2a4ab; 141 | 142 | --ion-color-light: #222428; 143 | --ion-color-light-rgb: 34,36,40; 144 | --ion-color-light-contrast: #ffffff; 145 | --ion-color-light-contrast-rgb: 255,255,255; 146 | --ion-color-light-shade: #1e2023; 147 | --ion-color-light-tint: #383a3e; 148 | } 149 | 150 | /* 151 | * iOS Dark Theme 152 | * ------------------------------------------- 153 | */ 154 | 155 | .ios body { 156 | --ion-background-color: #000000; 157 | --ion-background-color-rgb: 0,0,0; 158 | 159 | --ion-text-color: #ffffff; 160 | --ion-text-color-rgb: 255,255,255; 161 | 162 | --ion-color-step-50: #0d0d0d; 163 | --ion-color-step-100: #1a1a1a; 164 | --ion-color-step-150: #262626; 165 | --ion-color-step-200: #333333; 166 | --ion-color-step-250: #404040; 167 | --ion-color-step-300: #4d4d4d; 168 | --ion-color-step-350: #595959; 169 | --ion-color-step-400: #666666; 170 | --ion-color-step-450: #737373; 171 | --ion-color-step-500: #808080; 172 | --ion-color-step-550: #8c8c8c; 173 | --ion-color-step-600: #999999; 174 | --ion-color-step-650: #a6a6a6; 175 | --ion-color-step-700: #b3b3b3; 176 | --ion-color-step-750: #bfbfbf; 177 | --ion-color-step-800: #cccccc; 178 | --ion-color-step-850: #d9d9d9; 179 | --ion-color-step-900: #e6e6e6; 180 | --ion-color-step-950: #f2f2f2; 181 | 182 | --ion-toolbar-background: #0d0d0d; 183 | 184 | --ion-item-background: #000000; 185 | } 186 | 187 | 188 | /* 189 | * Material Design Dark Theme 190 | * ------------------------------------------- 191 | */ 192 | 193 | .md body { 194 | --ion-background-color: #121212; 195 | --ion-background-color-rgb: 18,18,18; 196 | 197 | --ion-text-color: #ffffff; 198 | --ion-text-color-rgb: 255,255,255; 199 | 200 | --ion-border-color: #222222; 201 | 202 | --ion-color-step-50: #1e1e1e; 203 | --ion-color-step-100: #2a2a2a; 204 | --ion-color-step-150: #363636; 205 | --ion-color-step-200: #414141; 206 | --ion-color-step-250: #4d4d4d; 207 | --ion-color-step-300: #595959; 208 | --ion-color-step-350: #656565; 209 | --ion-color-step-400: #717171; 210 | --ion-color-step-450: #7d7d7d; 211 | --ion-color-step-500: #898989; 212 | --ion-color-step-550: #949494; 213 | --ion-color-step-600: #a0a0a0; 214 | --ion-color-step-650: #acacac; 215 | --ion-color-step-700: #b8b8b8; 216 | --ion-color-step-750: #c4c4c4; 217 | --ion-color-step-800: #d0d0d0; 218 | --ion-color-step-850: #dbdbdb; 219 | --ion-color-step-900: #e7e7e7; 220 | --ion-color-step-950: #f3f3f3; 221 | 222 | --ion-item-background: #1e1e1e; 223 | 224 | --ion-toolbar-background: #1f1f1f; 225 | 226 | --ion-tab-bar-background: #1f1f1f; 227 | } 228 | } 229 | -------------------------------------------------------------------------------- /ionic/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "noEmit": true, 20 | "jsx": "react" 21 | }, 22 | "include": [ 23 | "src" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /material-ui/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # capacitor 4 | android/ 5 | ios/ 6 | 7 | # dependencies 8 | /node_modules 9 | /.pnp 10 | .pnp.js 11 | 12 | # testing 13 | /coverage 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /material-ui/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `yarn start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /material-ui/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "com.capacitorjs.examples.materialui", 3 | "appName": "cap-materialui", 4 | "bundledWebRuntime": false, 5 | "npmClient": "yarn", 6 | "webDir": "build", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /material-ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-ui", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@capacitor/cli": "^2.1.2", 7 | "@capacitor/core": "^2.1.2", 8 | "@ionic/pwa-elements": "^2.0.2", 9 | "@material-ui/core": "^4.10.1", 10 | "@material-ui/icons": "^4.9.1", 11 | "@testing-library/jest-dom": "^4.2.4", 12 | "@testing-library/react": "^9.3.2", 13 | "@testing-library/user-event": "^7.1.2", 14 | "react": "^16.13.1", 15 | "react-dom": "^16.13.1", 16 | "react-scripts": "3.4.1" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": "react-app" 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /material-ui/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/material-ui/public/favicon.ico -------------------------------------------------------------------------------- /material-ui/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 18 | 19 | 28 | React App 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /material-ui/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/material-ui/public/logo192.png -------------------------------------------------------------------------------- /material-ui/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/material-ui/public/logo512.png -------------------------------------------------------------------------------- /material-ui/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /material-ui/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /material-ui/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /material-ui/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useState, useEffect } from 'react'; 2 | import './App.css'; 3 | 4 | import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles'; 5 | import { deepOrange } from '@material-ui/core/colors'; 6 | 7 | import AppBar from '@material-ui/core/AppBar'; 8 | import Box from '@material-ui/core/Box'; 9 | import Toolbar from '@material-ui/core/Toolbar'; 10 | import Typography from '@material-ui/core/Typography'; 11 | import Button from '@material-ui/core/Button'; 12 | import IconButton from '@material-ui/core/IconButton'; 13 | import Table from '@material-ui/core/Table'; 14 | import TableBody from '@material-ui/core/TableBody'; 15 | import TableCell from '@material-ui/core/TableCell'; 16 | import TableContainer from '@material-ui/core/TableContainer'; 17 | import TableHead from '@material-ui/core/TableHead'; 18 | import TableRow from '@material-ui/core/TableRow'; 19 | import Paper from '@material-ui/core/Paper'; 20 | 21 | import MenuIcon from '@material-ui/icons/Menu'; 22 | import ShareIcon from '@material-ui/icons/Share'; 23 | import CameraAltIcon from '@material-ui/icons/CameraAlt'; 24 | 25 | import { Plugins } from '@capacitor/core'; 26 | 27 | const theme = createMuiTheme({ 28 | palette: { 29 | primary: deepOrange, 30 | }, 31 | }); 32 | const useStyles = makeStyles((theme) => ({ 33 | root: { 34 | flexGrow: 1, 35 | }, 36 | menuButton: { 37 | marginRight: theme.spacing(2), 38 | }, 39 | title: { 40 | flexGrow: 1, 41 | }, 42 | tableDiv: { 43 | margin: 20 44 | }, 45 | button: { 46 | margin: 10 47 | } 48 | })); 49 | 50 | function App() { 51 | const classes = useStyles(); 52 | 53 | const [photo, setPhoto] = useState(null); 54 | 55 | const takePhoto = useCallback(async () => { 56 | const { Camera } = Plugins; 57 | 58 | const photo = await Camera.getPhoto({ 59 | resultType: 'Base64' 60 | }); 61 | 62 | console.log('Got photo', photo); 63 | 64 | setPhoto(photo); 65 | }, []); 66 | 67 | const shareCapacitor = async () => { 68 | const { Share } = Plugins; 69 | 70 | await Share.share({ 71 | title: 'Share Capacitor', 72 | text: 'I deployed a Material-UI web app as a native mobile app using @capacitorjs in minutes! \r\n\r\nTry it yourself here:', 73 | url: 'https://capacitorjs.com', 74 | }); 75 | } 76 | 77 | const [deviceInfo, setDeviceInfo] = useState(null); 78 | 79 | useEffect(() => { 80 | const getDeviceInfo = async () => { 81 | const { Device } = Plugins; 82 | 83 | setDeviceInfo(await Device.getInfo()); 84 | }; 85 | 86 | getDeviceInfo(); 87 | }, []); 88 | 89 | return ( 90 |
91 | 92 | 93 | 94 | 95 | 96 | 97 | Capacitor Material-UI Demo 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | {photo && Camera} 110 | 111 | 112 |
113 |

Device Info:

114 | {deviceInfo ? ( 115 | 116 | 117 | 118 | 119 | Name 120 | Value 121 | 122 | 123 | 124 | {Object.keys(deviceInfo).map((key) => ( 125 | 126 | 127 | {key} 128 | 129 | {deviceInfo[key].toString() || 'Not available'} 130 | 131 | ))} 132 | 133 |
134 | 135 | ) : null } 136 |
137 | 138 |
139 | ); 140 | } 141 | 142 | export default App; 143 | -------------------------------------------------------------------------------- /material-ui/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /material-ui/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /material-ui/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | import { defineCustomElements } from '@ionic/pwa-elements/loader'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById('root') 13 | ); 14 | 15 | defineCustomElements(window); 16 | 17 | // If you want your app to work offline and load faster, you can change 18 | // unregister() to register() below. Note this comes with some pitfalls. 19 | // Learn more about service workers: https://bit.ly/CRA-PWA 20 | serviceWorker.unregister(); 21 | -------------------------------------------------------------------------------- /material-ui/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /material-ui/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' }, 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready 134 | .then(registration => { 135 | registration.unregister(); 136 | }) 137 | .catch(error => { 138 | console.error(error.message); 139 | }); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /material-ui/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /preact/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | build 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | .DS_Store 61 | 62 | # lock files 63 | yarn.lock 64 | package-lock.json 65 | -------------------------------------------------------------------------------- /preact/README.md: -------------------------------------------------------------------------------- 1 | # Preact + Material UI + Capacitor 2 | 3 | An example app using [Preact](https://preactjs.com) and [Capacitor](https://capacitorjs.com) for building high quality PWAs and native iOS/Android app. This brings together the ease of building apps with Preact with the ease of making native apps from Capacitor. For more information on both Preact and Capacitor, please see their docs. 4 | 5 | - [Preact](https://preactjs.com) 6 | - [Capacitor](https://capacitorjs.com) 7 | 8 | 9 | ## Install Capacitor 10 | 11 | If you have an existing Preact app, you can install Capacitor with the following command 12 | 13 | ```bash 14 | npm install @capacitor/core @capacitor/cli 15 | npx cap init [name] [id] --webDir=build 16 | ``` 17 | 18 | ## Build the Web App 19 | 20 | Build a production version of your app to be deployed to the native platform 21 | 22 | ```bash 23 | npm run build 24 | ``` 25 | 26 | ## Install the native platforms you want to target 27 | 28 | ``` 29 | npx cap add android 30 | npx cap add ios 31 | ``` 32 | 33 | ## Call native functionality 34 | 35 | ``` javascript 36 | import { h } from 'preact'; 37 | import { useState } from 'preact/hooks'; 38 | 39 | import { Plugins } from '@capacitor/core'; 40 | 41 | export default function GeolocationPage() { 42 | 43 | const [loc, setLoc] = useState(null); 44 | 45 | const getCurrentPosition = async () => { 46 | const { Geolocation } = Plugins; 47 | const coordinates = await Geolocation.getCurrentPosition(); 48 | setLoc(coordinates); 49 | }; 50 | 51 | return ( 52 |
53 |

Geolocation

54 |

Your location is:

55 |

Latitude: {loc?.coords.latitude}

56 |

Longitude: {loc?.coords.longitude}

57 | 58 | 61 |
62 | ); 63 | } 64 | ``` 65 | 66 | For more examples of Capacitor APIs, check out the [Capacitor Docs](https://capacitorjs.com/docs) and the [Plugin API docs](https://capacitorjs.com/docs/apis) 67 | -------------------------------------------------------------------------------- /preact/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "com.example.app", 3 | "appName": "preact-example", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "build", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /preact/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "preact-example", 4 | "version": "0.0.0", 5 | "license": "MIT", 6 | "scripts": { 7 | "build": "preact build --template public/index.html --no-prerender", 8 | "serve": "preact serve", 9 | "dev": "preact watch" 10 | }, 11 | "devDependencies": { 12 | "preact-cli": "^3.0.0-rc.18" 13 | }, 14 | "dependencies": { 15 | "@capacitor/cli": "^2.2.1", 16 | "@capacitor/core": "^2.2.1", 17 | "@capacitor/ios": "^2.2.1", 18 | "@ionic/pwa-elements": "^3.0.0", 19 | "preact": "^10.4.6", 20 | "preact-compat": "^3.19.0", 21 | "preact-material-components": "^1.6.1", 22 | "preact-render-to-string": "^5.1.10", 23 | "preact-router": "^3.2.1" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /preact/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <% preact.title %> 6 | 10 | 11 | 12 | 13 | <% preact.headEnd %> 14 | 15 | 16 | <% preact.bodyEnd %> 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /preact/src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/preact/src/assets/favicon.ico -------------------------------------------------------------------------------- /preact/src/assets/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/preact/src/assets/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /preact/src/assets/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/preact/src/assets/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /preact/src/assets/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/preact/src/assets/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /preact/src/assets/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/preact/src/assets/icons/favicon-16x16.png -------------------------------------------------------------------------------- /preact/src/assets/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/preact/src/assets/icons/favicon-32x32.png -------------------------------------------------------------------------------- /preact/src/assets/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/preact/src/assets/icons/mstile-150x150.png -------------------------------------------------------------------------------- /preact/src/components/app.js: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import { useState } from 'preact/hooks' 3 | import { Router } from 'preact-router'; 4 | 5 | import Header from './header'; 6 | import Home from '../routes/home'; 7 | import NotFound from '../routes/404'; 8 | 9 | import GeolocationPage from '../routes/geolocation' 10 | import CameraPage from '../routes/camera'; 11 | export default function App() { 12 | const [currentUrl, setCurrentUrl] = useState(''); 13 | 14 | const handleRoute = e => { 15 | setCurrentUrl(e.url) 16 | }; 17 | 18 | return ( 19 |
20 |
21 | handleRoute(e)}> 22 | 23 | 24 | 25 | 26 | 27 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /preact/src/components/header/index.js: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import { route } from 'preact-router'; 3 | import { useRef } from 'preact/hooks'; 4 | 5 | import TopAppBar from 'preact-material-components/TopAppBar'; 6 | import Drawer from 'preact-material-components/Drawer'; 7 | import List from 'preact-material-components/List'; 8 | import 'preact-material-components/Switch/style.css'; 9 | import 'preact-material-components/Dialog/style.css'; 10 | import 'preact-material-components/Drawer/style.css'; 11 | import 'preact-material-components/List/style.css'; 12 | import 'preact-material-components/TopAppBar/style.css'; 13 | 14 | export default function Header(props) { 15 | const drawerRef = useRef(null); 16 | const toggleDraw = (val) => (drawerRef.current.MDComponent.open = val); 17 | const linkTo = path => { 18 | route(path); 19 | toggleDraw(false); 20 | }; 21 | 22 | return ( 23 |
24 | 25 | 26 | 27 | toggleDraw(true)}> 28 | menu 29 | 30 | Preact app 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | linkTo('/')} 41 | > 42 | home 43 | Home 44 | 45 | linkTo('/geolocation')} 48 | > 49 | location_on 50 | Geolocation 51 | 52 | 53 | linkTo('/camera')} 56 | > 57 | camera_alt 58 | Camera 59 | 60 | 61 | 62 | 63 | 64 |
65 | ); 66 | } 67 | -------------------------------------------------------------------------------- /preact/src/components/header/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/preact/src/components/header/style.css -------------------------------------------------------------------------------- /preact/src/index.js: -------------------------------------------------------------------------------- 1 | import './style'; 2 | import App from './components/app'; 3 | 4 | import { defineCustomElements } from '@ionic/pwa-elements/loader'; 5 | defineCustomElements(window); 6 | 7 | export default App; 8 | -------------------------------------------------------------------------------- /preact/src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "preact-example", 3 | "short_name": "preact-example", 4 | "start_url": "/", 5 | "display": "standalone", 6 | "orientation": "portrait", 7 | "background_color": "#fff", 8 | "theme_color": "#673ab8", 9 | "icons": [ 10 | { 11 | "src": "/assets/icons/android-chrome-192x192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "/assets/icons/android-chrome-512x512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ] 21 | } -------------------------------------------------------------------------------- /preact/src/routes/404/index.js: -------------------------------------------------------------------------------- 1 | import { h, Component } from 'preact'; 2 | import Card from 'preact-material-components/Card'; 3 | import 'preact-material-components/Card/style.css'; 4 | import style from './style'; 5 | 6 | export default class NotFound extends Component { 7 | render() { 8 | return ( 9 |
10 | 11 |
12 |

404! Page not found.

13 |
14 |
15 | Looks like the page you are trying to access, doesn't exist. 16 |
17 | 18 |
19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /preact/src/routes/404/style.css: -------------------------------------------------------------------------------- 1 | .home { 2 | padding: 20px; 3 | min-height: 100%; 4 | width: 100%; 5 | } 6 | 7 | .cardHeader { 8 | padding: 16px; 9 | } 10 | 11 | .cardBody { 12 | padding: 16px; 13 | } 14 | -------------------------------------------------------------------------------- /preact/src/routes/camera/index.js: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import { useState } from 'preact/hooks'; 3 | import { Plugins, CameraResultType } from '@capacitor/core'; 4 | 5 | import Button from 'preact-material-components/Button'; 6 | import 'preact-material-components/Button/style.css'; 7 | 8 | import Icon from 'preact-material-components/Icon'; 9 | 10 | export default function CameraPage() { 11 | const { Camera } = Plugins; 12 | const [photo, setPhoto] = useState(null); 13 | 14 | const takePhoto = async () => { 15 | const image = await Camera.getPhoto({ 16 | quality: 100, 17 | allowEditing: true, 18 | resultType: CameraResultType.Uri, 19 | }); 20 | const imageUrl = image.webPath; 21 | setPhoto(imageUrl); 22 | }; 23 | return ( 24 |
25 |

Camera

26 |
{photo ? : null}
27 | 30 |
31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /preact/src/routes/geolocation/index.js: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import { useState } from 'preact/hooks'; 3 | import { Plugins } from '@capacitor/core'; 4 | 5 | import Button from 'preact-material-components/Button'; 6 | import 'preact-material-components/Button/style.css'; 7 | 8 | export default function GeolocationPage() { 9 | const { Geolocation } = Plugins; 10 | const [loc, setLoc] = useState(null); 11 | 12 | const getCurrentPosition = async () => { 13 | const coordinates = await Geolocation.getCurrentPosition(); 14 | setLoc(coordinates); 15 | }; 16 | return ( 17 |
18 |

Geolocation

19 |

Your location is:

20 |

Latitude: {loc?.coords.latitude}

21 |

Longitude: {loc?.coords.longitude}

22 | 23 | 27 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /preact/src/routes/home/index.js: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | 3 | import 'preact-material-components/Button/style.css'; 4 | import List from 'preact-material-components/List'; 5 | import 'preact-material-components/List/style.css'; 6 | 7 | import style from './style'; 8 | export default function Home() { 9 | return ( 10 |
11 |

Capacitor Preact Demo

12 |

Navigate below to see some examples of Capacitor's APIs

13 | 14 | 15 | 16 | 17 | location_on 18 | Geolocation 19 | 20 | 21 | 22 | camera_alt 23 | Camera 24 | 25 | 26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /preact/src/routes/home/style.css: -------------------------------------------------------------------------------- 1 | .home { 2 | padding: 20px; 3 | min-height: 100%; 4 | width: 100%; 5 | } 6 | 7 | .cardHeader { 8 | padding: 16px; 9 | } 10 | 11 | .cardBody { 12 | padding: 16px; 13 | } 14 | -------------------------------------------------------------------------------- /preact/src/style/index.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | width: 100%; 4 | padding: 0; 5 | margin: 0; 6 | background: #FAFAFA; 7 | font-family: 'Helvetica Neue', arial, sans-serif; 8 | font-weight: 400; 9 | color: #444; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | } 13 | 14 | /* fallback */ 15 | @font-face { 16 | font-family: 'Material Icons'; 17 | font-style: normal; 18 | font-weight: 400; 19 | src: url(https://fonts.gstatic.com/s/materialicons/v29/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2'); 20 | } 21 | 22 | .material-icons { 23 | font-family: 'Material Icons'; 24 | font-weight: normal; 25 | font-style: normal; 26 | font-size: 24px; 27 | line-height: 1; 28 | letter-spacing: normal; 29 | text-transform: none; 30 | display: inline-block; 31 | white-space: nowrap; 32 | word-wrap: normal; 33 | direction: ltr; 34 | -webkit-font-feature-settings: 'liga'; 35 | -webkit-font-smoothing: antialiased; 36 | } 37 | 38 | * { 39 | box-sizing: border-box; 40 | } 41 | 42 | #app { 43 | height: 100%; 44 | } 45 | 46 | .mdc-theme--dark { 47 | background-color: #333; 48 | color: #fff; 49 | } 50 | 51 | .mdc-theme--dark .mdc-card { 52 | color: #444; 53 | } 54 | 55 | .mdc-dialog { 56 | background: transparent; 57 | } 58 | 59 | #app .page { 60 | /* padding-top: 56px; */ 61 | padding: 56px 20px 0px; 62 | } 63 | -------------------------------------------------------------------------------- /svelte-framework7/.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Logs 3 | logs 4 | *.log 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | 9 | # Runtime data 10 | pids 11 | *.pid 12 | *.seed 13 | *.pid.lock 14 | 15 | # Dependency directories 16 | node_modules/ 17 | 18 | # Optional npm cache directory 19 | .npm 20 | 21 | # Optional eslint cache 22 | .eslintcache 23 | 24 | # Optional REPL history 25 | .node_repl_history 26 | 27 | # Yarn Integrity file 28 | .yarn-integrity 29 | 30 | # dotenv environment variables file 31 | .env 32 | 33 | www 34 | 35 | # Misc 36 | .DS_Store 37 | Thumbs.db 38 | 39 | 40 | 41 | # Production build 42 | www/ 43 | -------------------------------------------------------------------------------- /svelte-framework7/README.md: -------------------------------------------------------------------------------- 1 | # Svelte and Framwork7 Example 2 | A simple Capacitor example app, using Svelte and Framwork7 3 |
4 | 5 | [Framework7 Github](https://github.com/framework7io/framework7/) 6 | 7 | [Svelte Github](https://github.com/sveltejs/svelte) -------------------------------------------------------------------------------- /svelte-framework7/assets-src/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/assets-src/apple-touch-icon.png -------------------------------------------------------------------------------- /svelte-framework7/assets-src/web-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/assets-src/web-icon.png -------------------------------------------------------------------------------- /svelte-framework7/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { 4 | modules: false, 5 | }], 6 | ], 7 | plugins: [ 8 | '@babel/plugin-transform-runtime', 9 | '@babel/plugin-syntax-dynamic-import', 10 | ], 11 | }; 12 | -------------------------------------------------------------------------------- /svelte-framework7/build/build.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const ora = require('ora'); 3 | const rm = require('rimraf'); 4 | const chalk = require('chalk'); 5 | const config = require('./webpack.config.js'); 6 | 7 | const env = process.env.NODE_ENV || 'development'; 8 | const target = process.env.TARGET || 'web'; 9 | const isCordova = target === 'cordova' 10 | 11 | const spinner = ora(env === 'production' ? 'building for production...' : 'building development version...'); 12 | spinner.start(); 13 | 14 | rm(isCordova ? './cordova/www' : './www/', (removeErr) => { 15 | if (removeErr) throw removeErr; 16 | 17 | webpack(config, (err, stats) => { 18 | if (err) throw err; 19 | spinner.stop(); 20 | 21 | process.stdout.write(`${stats.toString({ 22 | colors: true, 23 | modules: false, 24 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 25 | chunks: false, 26 | chunkModules: false, 27 | })}\n\n`); 28 | 29 | if (stats.hasErrors()) { 30 | console.log(chalk.red('Build failed with errors.\n')); 31 | process.exit(1); 32 | } 33 | 34 | console.log(chalk.cyan('Build complete.\n')); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /svelte-framework7/build/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | 5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 6 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); 7 | const TerserPlugin = require('terser-webpack-plugin'); 8 | 9 | 10 | const path = require('path'); 11 | 12 | function resolvePath(dir) { 13 | return path.join(__dirname, '..', dir); 14 | } 15 | 16 | const env = process.env.NODE_ENV || 'development'; 17 | const target = process.env.TARGET || 'web'; 18 | 19 | 20 | 21 | module.exports = { 22 | mode: env, 23 | entry: { 24 | app: './src/js/app.js', 25 | }, 26 | output: { 27 | path: resolvePath('www'), 28 | filename: 'js/[name].js', 29 | chunkFilename: 'js/[name].js', 30 | publicPath: '', 31 | hotUpdateChunkFilename: 'hot/hot-update.js', 32 | hotUpdateMainFilename: 'hot/hot-update.json', 33 | }, 34 | resolve: { 35 | extensions: ['.mjs', '.js', '.svelte', '.json'], 36 | alias: { 37 | 38 | '@': resolvePath('src'), 39 | }, 40 | mainFields: ['svelte', 'browser', 'module', 'main'] 41 | }, 42 | devtool: env === 'production' ? 'source-map' : 'eval', 43 | devServer: { 44 | hot: true, 45 | open: true, 46 | compress: true, 47 | contentBase: '/www/', 48 | disableHostCheck: true, 49 | historyApiFallback: true, 50 | watchOptions: { 51 | poll: 1000, 52 | }, 53 | }, 54 | optimization: { 55 | minimizer: [new TerserPlugin({ 56 | sourceMap: true, 57 | })], 58 | }, 59 | module: { 60 | rules: [ 61 | { 62 | test: /\.(mjs|js|jsx)$/, 63 | use: 'babel-loader', 64 | include: [ 65 | resolvePath('src'), 66 | resolvePath('node_modules/framework7'), 67 | 68 | 69 | resolvePath('node_modules/framework7-svelte'), 70 | resolvePath('node_modules/svelte'), 71 | resolvePath('node_modules/template7'), 72 | resolvePath('node_modules/dom7'), 73 | resolvePath('node_modules/ssr-window'), 74 | ], 75 | }, 76 | 77 | { 78 | test: /\.svelte$/, 79 | use: { 80 | loader: 'svelte-loader', 81 | options: { 82 | emitCss: true, 83 | }, 84 | }, 85 | }, 86 | 87 | { 88 | test: /\.css$/, 89 | use: [ 90 | (env === 'development' ? 'style-loader' : { 91 | loader: MiniCssExtractPlugin.loader, 92 | options: { 93 | publicPath: '../' 94 | } 95 | }), 96 | 'css-loader', 97 | 'postcss-loader', 98 | ], 99 | }, 100 | { 101 | test: /\.styl(us)?$/, 102 | use: [ 103 | (env === 'development' ? 'style-loader' : { 104 | loader: MiniCssExtractPlugin.loader, 105 | options: { 106 | publicPath: '../' 107 | } 108 | }), 109 | 'css-loader', 110 | 'postcss-loader', 111 | 'stylus-loader', 112 | ], 113 | }, 114 | { 115 | test: /\.less$/, 116 | use: [ 117 | (env === 'development' ? 'style-loader' : { 118 | loader: MiniCssExtractPlugin.loader, 119 | options: { 120 | publicPath: '../' 121 | } 122 | }), 123 | 'css-loader', 124 | 'postcss-loader', 125 | 'less-loader', 126 | ], 127 | }, 128 | { 129 | test: /\.(sa|sc)ss$/, 130 | use: [ 131 | (env === 'development' ? 'style-loader' : { 132 | loader: MiniCssExtractPlugin.loader, 133 | options: { 134 | publicPath: '../' 135 | } 136 | }), 137 | 'css-loader', 138 | 'postcss-loader', 139 | 'sass-loader', 140 | ], 141 | }, 142 | { 143 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 144 | loader: 'url-loader', 145 | options: { 146 | limit: 10000, 147 | name: 'images/[name].[ext]', 148 | 149 | }, 150 | }, 151 | { 152 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\?.*)?$/, 153 | loader: 'url-loader', 154 | options: { 155 | limit: 10000, 156 | name: 'media/[name].[ext]', 157 | 158 | }, 159 | }, 160 | { 161 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 162 | loader: 'url-loader', 163 | options: { 164 | limit: 10000, 165 | name: 'fonts/[name].[ext]', 166 | 167 | }, 168 | }, 169 | ], 170 | }, 171 | plugins: [ 172 | new webpack.DefinePlugin({ 173 | 'process.env.NODE_ENV': JSON.stringify(env), 174 | 'process.env.TARGET': JSON.stringify(target), 175 | }), 176 | 177 | ...(env === 'production' ? [ 178 | new OptimizeCSSPlugin({ 179 | cssProcessorOptions: { 180 | safe: true, 181 | map: { inline: false }, 182 | }, 183 | }), 184 | new webpack.optimize.ModuleConcatenationPlugin(), 185 | ] : [ 186 | // Development only plugins 187 | new webpack.HotModuleReplacementPlugin(), 188 | new webpack.NamedModulesPlugin(), 189 | ]), 190 | new HtmlWebpackPlugin({ 191 | filename: './index.html', 192 | template: './src/index.html', 193 | inject: true, 194 | minify: env === 'production' ? { 195 | collapseWhitespace: true, 196 | removeComments: true, 197 | removeRedundantAttributes: true, 198 | removeScriptTypeAttributes: true, 199 | removeStyleLinkTypeAttributes: true, 200 | useShortDoctype: true 201 | } : false, 202 | }), 203 | new MiniCssExtractPlugin({ 204 | filename: 'css/[name].css', 205 | }), 206 | new CopyWebpackPlugin({ 207 | patterns: [ 208 | { 209 | noErrorOnMissing: true, 210 | from: resolvePath('src/static'), 211 | to: resolvePath('www/static'), 212 | }, 213 | 214 | ], 215 | }), 216 | 217 | 218 | ], 219 | }; -------------------------------------------------------------------------------- /svelte-framework7/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "com.example.app", 3 | "appName": "capacitor-app", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /svelte-framework7/framework7.json: -------------------------------------------------------------------------------- 1 | { 2 | "cwd": "/Users/mike/Documents/GitHub/framework7-capacitor", 3 | "type": [ 4 | "web" 5 | ], 6 | "name": "Capacitor App", 7 | "framework": "svelte", 8 | "template": "single-view", 9 | "bundler": "webpack", 10 | "cssPreProcessor": "scss", 11 | "theming": { 12 | "customColor": false, 13 | "color": "#007aff", 14 | "darkTheme": false, 15 | "iconFonts": true, 16 | "fillBars": false 17 | }, 18 | "customBuild": false, 19 | "webpack": { 20 | "developmentSourceMap": true, 21 | "productionSourceMap": true, 22 | "hashAssets": false, 23 | "preserveAssetsPaths": false, 24 | "inlineAssets": true 25 | } 26 | } -------------------------------------------------------------------------------- /svelte-framework7/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "capacitor-app", 3 | "private": true, 4 | "version": "1.0.0", 5 | "description": "Capacitor App", 6 | "repository": "", 7 | "license": "UNLICENSED", 8 | "scripts": { 9 | "start": "npm run dev", 10 | "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js", 11 | "build-dev": "cross-env NODE_ENV=development node ./build/build.js", 12 | "build-prod": "cross-env NODE_ENV=production node ./build/build.js", 13 | "postinstall": "cpy ./node_modules/framework7-icons/fonts/*.* ./src/fonts/" 14 | }, 15 | "browserslist": [ 16 | "Android >= 7", 17 | "IOS >= 11", 18 | "Safari >= 11", 19 | "Chrome >= 49", 20 | "Firefox >= 31", 21 | "Samsung >= 5" 22 | ], 23 | "dependencies": { 24 | "@capacitor/cli": "^2.2.1", 25 | "@capacitor/core": "^2.2.1", 26 | "dom7": "^2.1.5", 27 | "framework7": "^5.7.8", 28 | "framework7-icons": "^3.0.1", 29 | "framework7-svelte": "^5.7.8", 30 | "svelte": "^3.23.2", 31 | "template7": "^1.4.2" 32 | }, 33 | "devDependencies": { 34 | "@babel/core": "^7.10.4", 35 | "@babel/plugin-syntax-dynamic-import": "^7.8.3", 36 | "@babel/plugin-transform-runtime": "^7.10.4", 37 | "@babel/preset-env": "^7.10.4", 38 | "@babel/runtime": "^7.10.4", 39 | "babel-loader": "^8.1.0", 40 | "chalk": "^4.1.0", 41 | "copy-webpack-plugin": "^6.0.3", 42 | "cpy-cli": "^3.1.1", 43 | "cross-env": "^7.0.2", 44 | "css-loader": "^3.6.0", 45 | "file-loader": "^6.0.0", 46 | "html-webpack-plugin": "^4.3.0", 47 | "mini-css-extract-plugin": "^0.9.0", 48 | "node-sass": "^4.14.1", 49 | "optimize-css-assets-webpack-plugin": "^5.0.3", 50 | "ora": "^4.0.4", 51 | "postcss-loader": "^3.0.0", 52 | "postcss-preset-env": "^6.7.0", 53 | "rimraf": "^3.0.2", 54 | "sass-loader": "^9.0.0", 55 | "style-loader": "^1.2.1", 56 | "svelte-loader": "^2.13.6", 57 | "terser-webpack-plugin": "^3.0.6", 58 | "url-loader": "^4.1.0", 59 | "webpack": "^4.43.0", 60 | "webpack-cli": "^3.3.12", 61 | "webpack-dev-server": "^3.11.0" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /svelte-framework7/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-preset-env': {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /svelte-framework7/src/components/app.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /svelte-framework7/src/css/app.scss: -------------------------------------------------------------------------------- 1 | /* Your app custom styles here */ -------------------------------------------------------------------------------- /svelte-framework7/src/css/icons.css: -------------------------------------------------------------------------------- 1 | /* Material Icons Font (for MD theme) */ 2 | @font-face { 3 | font-family: 'Material Icons'; 4 | font-style: normal; 5 | font-weight: 400; 6 | src: url(../fonts/MaterialIcons-Regular.eot); 7 | src: local('Material Icons'), 8 | local('MaterialIcons-Regular'), 9 | url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), 10 | url(../fonts/MaterialIcons-Regular.woff) format('woff'), 11 | url(../fonts/MaterialIcons-Regular.ttf) format('truetype'); 12 | } 13 | .material-icons { 14 | font-family: 'Material Icons'; 15 | font-weight: normal; 16 | font-style: normal; 17 | font-size: 24px; 18 | display: inline-block; 19 | line-height: 1; 20 | text-transform: none; 21 | letter-spacing: normal; 22 | word-wrap: normal; 23 | white-space: nowrap; 24 | direction: ltr; 25 | -webkit-font-smoothing: antialiased; 26 | text-rendering: optimizeLegibility; 27 | -moz-osx-font-smoothing: grayscale; 28 | font-feature-settings: 'liga'; 29 | } 30 | 31 | /* Framework7 Icons Font (for iOS theme) */ 32 | @font-face { 33 | font-family: 'Framework7 Icons'; 34 | font-style: normal; 35 | font-weight: 400; 36 | src: url("../fonts/Framework7Icons-Regular.eot"); 37 | src: url("../fonts/Framework7Icons-Regular.woff2") format("woff2"), 38 | url("../fonts/Framework7Icons-Regular.woff") format("woff"), 39 | url("../fonts/Framework7Icons-Regular.ttf") format("truetype"); 40 | } 41 | .f7-icons { 42 | font-family: 'Framework7 Icons'; 43 | font-weight: normal; 44 | font-style: normal; 45 | font-size: 28px; 46 | line-height: 1; 47 | letter-spacing: normal; 48 | text-transform: none; 49 | display: inline-block; 50 | white-space: nowrap; 51 | word-wrap: normal; 52 | direction: ltr; 53 | -webkit-font-smoothing: antialiased; 54 | text-rendering: optimizeLegibility; 55 | -moz-osx-font-smoothing: grayscale; 56 | -webkit-font-feature-settings: "liga"; 57 | -moz-font-feature-settings: "liga=1"; 58 | -moz-font-feature-settings: "liga"; 59 | font-feature-settings: "liga"; 60 | text-align: center; 61 | } 62 | -------------------------------------------------------------------------------- /svelte-framework7/src/fonts/Framework7Icons-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/fonts/Framework7Icons-Regular.eot -------------------------------------------------------------------------------- /svelte-framework7/src/fonts/Framework7Icons-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/fonts/Framework7Icons-Regular.ttf -------------------------------------------------------------------------------- /svelte-framework7/src/fonts/Framework7Icons-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/fonts/Framework7Icons-Regular.woff -------------------------------------------------------------------------------- /svelte-framework7/src/fonts/Framework7Icons-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/fonts/Framework7Icons-Regular.woff2 -------------------------------------------------------------------------------- /svelte-framework7/src/fonts/MaterialIcons-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/fonts/MaterialIcons-Regular.eot -------------------------------------------------------------------------------- /svelte-framework7/src/fonts/MaterialIcons-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/fonts/MaterialIcons-Regular.ttf -------------------------------------------------------------------------------- /svelte-framework7/src/fonts/MaterialIcons-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/fonts/MaterialIcons-Regular.woff -------------------------------------------------------------------------------- /svelte-framework7/src/fonts/MaterialIcons-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/fonts/MaterialIcons-Regular.woff2 -------------------------------------------------------------------------------- /svelte-framework7/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Capacitor App 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /svelte-framework7/src/js/app.js: -------------------------------------------------------------------------------- 1 | // Import Framework7 2 | import Framework7 from 'framework7/framework7-lite.esm.bundle.js'; 3 | 4 | // Import Framework7-Svelte Plugin 5 | import Framework7Svelte from 'framework7-svelte'; 6 | 7 | // Import Framework7 Styles 8 | import 'framework7/css/framework7.bundle.css'; 9 | 10 | // Import Icons and App Custom Styles 11 | import '../css/icons.css'; 12 | import '../css/app.scss'; 13 | 14 | // Import App Component 15 | import App from '../components/app.svelte'; 16 | 17 | // Init F7 Svelte Plugin 18 | Framework7.use(Framework7Svelte) 19 | 20 | // Mount Svelte App 21 | const app = new App({ 22 | target: document.getElementById('app'), 23 | }); -------------------------------------------------------------------------------- /svelte-framework7/src/js/routes.js: -------------------------------------------------------------------------------- 1 | 2 | import HomePage from '../pages/home.svelte'; 3 | import NotFoundPage from '../pages/404.svelte'; 4 | 5 | var routes = [ 6 | { 7 | path: '/', 8 | component: HomePage, 9 | }, 10 | { 11 | path: '(.*)', 12 | component: NotFoundPage, 13 | }, 14 | ]; 15 | 16 | export default routes; 17 | -------------------------------------------------------------------------------- /svelte-framework7/src/pages/404.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Sorry

5 |

Requested content not found.

6 | 7 | 8 | 11 | -------------------------------------------------------------------------------- /svelte-framework7/src/pages/home.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Capacitor 💙 F7 5 | Capacitor 💙 F7 6 | 7 | 8 | 9 | 12 | 13 | Device Info 14 | 15 | 
{deviceInfo}
16 | 17 | 18 | 59 | -------------------------------------------------------------------------------- /svelte-framework7/src/static/icons/128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/static/icons/128x128.png -------------------------------------------------------------------------------- /svelte-framework7/src/static/icons/144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/static/icons/144x144.png -------------------------------------------------------------------------------- /svelte-framework7/src/static/icons/152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/static/icons/152x152.png -------------------------------------------------------------------------------- /svelte-framework7/src/static/icons/192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/static/icons/192x192.png -------------------------------------------------------------------------------- /svelte-framework7/src/static/icons/256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/static/icons/256x256.png -------------------------------------------------------------------------------- /svelte-framework7/src/static/icons/512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/static/icons/512x512.png -------------------------------------------------------------------------------- /svelte-framework7/src/static/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/static/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /svelte-framework7/src/static/icons/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/svelte-framework7/src/static/icons/favicon.png -------------------------------------------------------------------------------- /vuejs-vuetify/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /vuejs-vuetify/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: [ 7 | "plugin:vue/essential", 8 | "eslint:recommended", 9 | "@vue/typescript/recommended", 10 | "@vue/prettier", 11 | "@vue/prettier/@typescript-eslint" 12 | ], 13 | parserOptions: { 14 | ecmaVersion: 2020 15 | }, 16 | rules: { 17 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 18 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off" 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /vuejs-vuetify/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /vuejs-vuetify/README.md: -------------------------------------------------------------------------------- 1 | # Vuejs with Vuetify Example 2 | A simple Capacitor example app, using VueJS 2 and Vuetify 3 |
4 | 5 | [VueJS Github](https://github.com/vuejs/vue) 6 | 7 | [Vuetify Github](https://github.com/vuetifyjs/vuetify) 8 | -------------------------------------------------------------------------------- /vuejs-vuetify/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"] 3 | }; 4 | -------------------------------------------------------------------------------- /vuejs-vuetify/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "com.example.vuejsvuetify", 3 | "appName": "vuejs-vuetify", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "dist", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /vuejs-vuetify/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuejs-vuetify", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@capacitor/cli": "^2.2.0", 12 | "@capacitor/core": "^2.2.0", 13 | "@mdi/font": "^3.6.95", 14 | "@mdi/js": "^5.3.45", 15 | "core-js": "^3.6.5", 16 | "register-service-worker": "^1.7.1", 17 | "roboto-fontface": "*", 18 | "vue": "^2.6.11", 19 | "vue-capacitor": "^1.0.2", 20 | "vue-class-component": "^7.2.3", 21 | "vue-property-decorator": "^8.4.2", 22 | "vue-router": "^3.2.0", 23 | "vuetify": "^2.2.11", 24 | "vuex": "^3.4.0" 25 | }, 26 | "devDependencies": { 27 | "@typescript-eslint/eslint-plugin": "^2.33.0", 28 | "@typescript-eslint/parser": "^2.33.0", 29 | "@vue/cli-plugin-babel": "~4.4.0", 30 | "@vue/cli-plugin-eslint": "~4.4.0", 31 | "@vue/cli-plugin-pwa": "~4.4.0", 32 | "@vue/cli-plugin-router": "~4.4.0", 33 | "@vue/cli-plugin-typescript": "~4.4.0", 34 | "@vue/cli-plugin-vuex": "~4.4.0", 35 | "@vue/cli-service": "~4.4.0", 36 | "@vue/eslint-config-prettier": "^6.0.0", 37 | "@vue/eslint-config-typescript": "^5.0.2", 38 | "eslint": "^6.7.2", 39 | "eslint-plugin-prettier": "^3.1.3", 40 | "eslint-plugin-vue": "^6.2.2", 41 | "node-sass": "^4.12.0", 42 | "prettier": "^1.19.1", 43 | "sass": "^1.19.0", 44 | "sass-loader": "^8.0.2", 45 | "typescript": "~3.9.3", 46 | "vue-cli-plugin-vuetify": "~2.0.6", 47 | "vue-template-compiler": "^2.6.11", 48 | "vuetify-loader": "^1.3.0" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /vuejs-vuetify/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/vuejs-vuetify/public/favicon.ico -------------------------------------------------------------------------------- /vuejs-vuetify/public/img/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/vuejs-vuetify/public/img/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /vuejs-vuetify/public/img/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/vuejs-vuetify/public/img/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /vuejs-vuetify/public/img/icons/android-chrome-maskable-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/vuejs-vuetify/public/img/icons/android-chrome-maskable-192x192.png -------------------------------------------------------------------------------- /vuejs-vuetify/public/img/icons/android-chrome-maskable-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/vuejs-vuetify/public/img/icons/android-chrome-maskable-512x512.png -------------------------------------------------------------------------------- /vuejs-vuetify/public/img/icons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/vuejs-vuetify/public/img/icons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /vuejs-vuetify/public/img/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/vuejs-vuetify/public/img/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /vuejs-vuetify/public/img/icons/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/vuejs-vuetify/public/img/icons/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /vuejs-vuetify/public/img/icons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/vuejs-vuetify/public/img/icons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /vuejs-vuetify/public/img/icons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/vuejs-vuetify/public/img/icons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /vuejs-vuetify/public/img/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/vuejs-vuetify/public/img/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /vuejs-vuetify/public/img/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/vuejs-vuetify/public/img/icons/favicon-16x16.png -------------------------------------------------------------------------------- /vuejs-vuetify/public/img/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/vuejs-vuetify/public/img/icons/favicon-32x32.png -------------------------------------------------------------------------------- /vuejs-vuetify/public/img/icons/msapplication-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/vuejs-vuetify/public/img/icons/msapplication-icon-144x144.png -------------------------------------------------------------------------------- /vuejs-vuetify/public/img/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capacitor-community/examples/6e703917d3343661bedbea54047faef364a11a18/vuejs-vuetify/public/img/icons/mstile-150x150.png -------------------------------------------------------------------------------- /vuejs-vuetify/public/img/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /vuejs-vuetify/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /vuejs-vuetify/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /vuejs-vuetify/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /vuejs-vuetify/src/components/DeviceInfoCard.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 39 | -------------------------------------------------------------------------------- /vuejs-vuetify/src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import _Vue from "vue"; 3 | import App from "./App.vue"; 4 | import "./registerServiceWorker"; 5 | import router from "./router"; 6 | import store from "./store"; 7 | import vuetify from "./plugins/vuetify"; 8 | import VueCapacitorPlugins from 'vue-capacitor'; 9 | 10 | Vue.use(VueCapacitorPlugins); 11 | 12 | Vue.config.productionTip = false; 13 | 14 | new Vue({ 15 | router, 16 | store, 17 | // eslint-disable-next-line 18 | // @ts-ignore 19 | vuetify, 20 | render: h => h(App) 21 | }).$mount("#app"); 22 | -------------------------------------------------------------------------------- /vuejs-vuetify/src/plugins/vuetify.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | // eslint-disable-next-line 3 | // @ts-ignore 4 | import Vuetify from "vuetify/lib"; 5 | 6 | Vue.use(Vuetify); 7 | 8 | export default new Vuetify({}); 9 | -------------------------------------------------------------------------------- /vuejs-vuetify/src/registerServiceWorker.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from "register-service-worker"; 4 | 5 | if (process.env.NODE_ENV === "production") { 6 | register(`${process.env.BASE_URL}service-worker.js`, { 7 | ready() { 8 | console.log( 9 | "App is being served from cache by a service worker.\n" + 10 | "For more details, visit https://goo.gl/AFskqB" 11 | ); 12 | }, 13 | registered() { 14 | console.log("Service worker has been registered."); 15 | }, 16 | cached() { 17 | console.log("Content has been cached for offline use."); 18 | }, 19 | updatefound() { 20 | console.log("New content is downloading."); 21 | }, 22 | updated() { 23 | console.log("New content is available; please refresh."); 24 | }, 25 | offline() { 26 | console.log( 27 | "No internet connection found. App is running in offline mode." 28 | ); 29 | }, 30 | error(error) { 31 | console.error("Error during service worker registration:", error); 32 | } 33 | }); 34 | } 35 | -------------------------------------------------------------------------------- /vuejs-vuetify/src/router/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import VueRouter, { RouteConfig } from "vue-router"; 3 | import Home from "../views/Home.vue"; 4 | 5 | Vue.use(VueRouter); 6 | 7 | const routes: Array = [ 8 | { 9 | path: "/", 10 | name: "Home", 11 | component: Home 12 | } 13 | ]; 14 | 15 | const router = new VueRouter({ 16 | routes 17 | }); 18 | 19 | export default router; 20 | -------------------------------------------------------------------------------- /vuejs-vuetify/src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from "vue"; 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /vuejs-vuetify/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from "vue"; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /vuejs-vuetify/src/store/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Vuex from "vuex"; 3 | 4 | Vue.use(Vuex); 5 | 6 | export default new Vuex.Store({ 7 | state: {}, 8 | mutations: {}, 9 | actions: {}, 10 | modules: {} 11 | }); 12 | -------------------------------------------------------------------------------- /vuejs-vuetify/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 47 | 48 | 56 | -------------------------------------------------------------------------------- /vuejs-vuetify/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "experimentalDecorators": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "sourceMap": true, 13 | "baseUrl": ".", 14 | "types": [ 15 | "webpack-env" 16 | ], 17 | "paths": { 18 | "@/*": [ 19 | "src/*" 20 | ] 21 | }, 22 | "lib": [ 23 | "esnext", 24 | "dom", 25 | "dom.iterable", 26 | "scripthost" 27 | ] 28 | }, 29 | "include": [ 30 | "src/**/*.ts", 31 | "src/**/*.tsx", 32 | "src/**/*.vue", 33 | "tests/**/*.ts", 34 | "tests/**/*.tsx" 35 | ], 36 | "exclude": [ 37 | "node_modules" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /vuejs-vuetify/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | transpileDependencies: ["vuetify"] 3 | }; 4 | --------------------------------------------------------------------------------