Building applications for mobile devices has its additional challenges: The network connection can be flaky and slow, so the application should still work when the device is offline. Users expect application icons on their home screens to start them. Depending on your use cases you want to access sensors that are not available in the browser.
This Meetup Martin Sotirov (@unclemartycodes) will talk about Vue on mobile devices and take a look at the different ways you can deploy a Vue app on mobile. We start with a PWA, go through a hybrid solution using Ionic Capacitor and then finally arrive at a NativeScript app which renders native iOS and Android views.
https://martinsotirov.com
contact@martinsotirov.com
7. Kickstarting the Mobile Revolution in 2007
The full Safari engine is inside of iPhone. And so, you can
write amazing Web 2.0 and Ajax apps that look exactly
and behave exactly like apps on the iPhone. And these
apps can integrate perfectly with iPhone services. They
can make a call, they can send an email, they can look
up a location on Google Maps.
– Steve Jobs, 2007
7
”
8. Jobs loved PWAs!
• There was no App Store
• Only web apps were allowed on the iPhone
• No SDK needed
8
9. Write once, run anywhere
• 2008 – App Store arrives
• 2008 – Android v1 released
• 2009 – first cross-platform solutions for mobile
9
14. What‘s a PWA?
• PWA term introduced by Google in 2015
• Not to be confused with progressive enhancement
It isn’t a new framework or technology.
It is a set of best practices to make a web application
function similar to a mobile application.
14
16. Characteristics of a Progressive Web App
• Progressively enhanced
• Discoverable and linkable (SEO)
• Responsive UI that looks app-like
• Available offline
• Installable
• Safe (https)
16
17. More specifically
• Google‘s checklist:
https://developers.google.com/web/progressive-web-apps/checklist
• Required:
• manifest.json
• service-worker.js
• icon
• served over https
17
19. Service Worker demystified
19
• simple js file that gets executed in the background
• intercepts requests and caches data for offline use
• can receive push notifications
• a kind of „proxy“ for your app
21. Vue CLI does most of the work
21
• Can generate manifest.json and serviceworker.js
automatically
• Provides a nice way to hook into service worker events
• Uses Google Workbox via webpack under the hood
22. Vue CLI does most of the work
22
$ vue create hello-world
$ vue add pwa
23. React to events of your service worker
23
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
// ...
registered () {
console.log('Service worker has been registered.')
},
cached () {
console.log('Content has been cached for offline use.')
},
updated () {
console.log('New content is available; please refresh.')
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
// ...
})
}
src/registerServiceWorker.js
24. Vue CLI does most of the work
24
module.exports = {
pwa: {
name: 'Hello World',
themeColor: '#4DBA87',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
workboxPluginMode: 'GenerateSW’,
workboxOptions: {
// plugin options
}
}
}
vue.config.js
25. Write your own service worker!
25
module.exports = {
pwa: {
name: 'Hello World',
themeColor: '#4DBA87',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
workboxPluginMode: 'InjectManifest',
workboxOptions: {
// path to custom service worker
swSrc: 'src/sw.js',
}
}
}
vue.config.js
26. Debugging your PWA
26
• Google Lighthouse https://developers.google.com/web/tools/lighthouse/
• Use DevTools to inspect your:
• Service Worker
• Manifest
• Cache
30. PWA support
30
• All major browsers support service workers !
• Some key features still missing from iOS 13
• Push API, Installation API etc.
31. Please no PWA in the App Store
31
“Apps that provide core features and functionality
dynamically with web technology like HTML5 are best
delivered to everyone in Safari, rather than through
the curated App Store.
…
All new apps must follow this guideline and we urge
you to update your existing apps as soon as possible.”
— Apple on 06.09.2019
”
32. When to Use a PWA
"Use when:
• Using Vue.js
• You plan to deliver your app mainly via a
browser
• You don‘t need many specific platform or
device features
• You can educate your users about installing
the app
#Do not use when:
• Inclusion in App Stores is important
• Native look and feel is important
• Performance is critical
32
36. Ionic vs Cordova
36
• Originally a collection of native-looking Angular
components on top of Cordova
• Completely rewritten as framework agnostic web
components for v4
• No hard dependency on Cordova in v4
37. Capacitor vs Cordova
37
• Capacitor is the new native bridge that you can use in
place of Cordova
• Backwards compatible with most Cordova/Phonegap
plugins
• Different approach to configuration:
XCode and AndroidStudio projects get
manually configured and checked in git
51. Theming a Hybrid Vue app
51
Use any framework or roll your own styles
52. Theming a Hybrid Vue app
52
You can also use Ionic v4 components but...
53. When to Use Hybrid Vue (via Capacitor)
"Use when:
• You plan to release on official app
stores
• Want to reuse the code for a PWA
version
• You want to leverage the many
existing Vue and vanilla JS libraries
#Do not use when:
• You want to be able to update your
app in the background
• True native look and feel is important
• Performance is critical
53
55. What is NativeScript?
• Cross platform mobile framework similar to ReactNative
• Released before ReactNative in 2014 by Telerik (now Progress)
• Renders native iOS and Android components, business logic in JS
• Injects all iOS and Android APIs in the JavaScript VM
55
56. Extending NativeScript
• Use any existing iOS & Android API directly via JS / TypeScript
56
nativescript-camera/src/camera.ios.ts
57. What is NativeScript-Vue? + =
• Vue integration developed by community developer Igor Randjelovic
as a hobby project in 2017
• Official NativeScript „flavor“ since v5.2 (February 2019)
57
58. Dip your toes in the Playground (play.nativescript.org)
58
59. Dip your toes in the Playground (play.nativescript.org)
59
60. Dip your toes in the Playground (play.nativescript.org)
60
62. Native CSS?
"Supported:
• Anything that relates to color and font
• Padding and margin
• Animations
• CSS variables
• Custom NativeScript rules
• Platform specific rules
#Not supported:
• Position and layouting, Flexbox
• Pseudo selectors (only :highlighted)
62
63. Common Gotchas &
• The Vue integration is a community project with a separate website, docs and
versioning
• Not all NativeScript UI components and plugins have Vue support and/or documentation
• No VueRouter yet
• Layout via components instead of CSS (<StackLayout>, <GridLayout>...)
• 2 different package.json files
63
64. • Install the NativeScript CLI
• Create a fresh Vue based project
Let‘s make FooBar native
64
$ tns create foobar_native --vue
$ npm install -g nativescript
73. How about some native selfies?
74
• Install the NativeScript camera plugin
• or via the NativeScript CLI
$ npm install --save nativescript-camera
$ tns plugin add nativescript-camera
74. How about some native selfies?
75
app/components/Camera.vue
75. How about some native selfies?
76
app/components/Camera.vue
77. Different Ways to Navigate
• Navigation affects the whole layout structure
• Tabs, Hamburger & Drawer etc.
• Experimental Vue Navigator similar to VueRouter
• https://github.com/nativescript-vue/nativescript-vue-navigator
79
82. One More Thing
• You can use Vue DevTools
85
$ npm install --save @vue/devtools nativescript-toasty nativescript-socketio nativescript-vue-devtools
app/app.js
$ npx vue-devtools
83. When to Use NativeScript
"Use when:
• You plan to release on official app stores
• Performance and native feel is important
• You want to use platform specific APIs
without writing native code
#Do not use when:
• You want to be able to update your app in
the background
• You want to reuse all of your web code
• You want to leverage many existing
libraries and tools
86
86. 89
No App Store needed App Store needed
Limited stack reuse
Use your existing stack
(HTML, CSS, JS)
Use your existing stack
(HTML, CSS, JS)
Leverage frontend
frameworks (Vuetify)
Limited device features
Full access to device
features
Full native access to
device features
App Store needed
Limited performanceLimited performance High performance
Leverage frontend
frameworks (Vuetify)
Build everything
yourself
Non native UX and feelNon native UX and feel
Almost native UX
and feel
