Modern PWA with Vue-CLI 3 + Vuetify + Firestore + Workbox[Part 4]
Welcome to the fourth chapter of our PWA tutorial. Until now our app is able to create post, save the data in cloud firestore, see the post details and work offline.
In this chapter we will make our app able to take photos with the device camera. If you haven’t seen the previous chapters you can check the next index.
[Part 1] Create a SPA project using Vue-CLI 3 and Vuetify plugin
[Part 2] Connect the App with an external API and Firestore to save data
[Part 3] Implement offline mode
[Part 4] Access device camera to take pictures (you are here)
Before we start, I want to tell you that the functionality of taking pictures you’ll learn here, may not work on iOS browsers. In fact, web push notifications don’t work on iOS either for now. For some reason apple always makes the path a little harder. Having said that, let’s get started.
[Part 4] Access device camera
First thing we have to do is create Camera.vue file inside components folder.
And paste the next code:
Let’s analyze the previous code. First, when the Camera.vue component is mounted we initialized the camera, then there is only one method to take the picture which generates a blob file.
Then the blob file is sended to firebase storage and we send de URL response to Post.vue Component via props to show the image captured. Finally we don’t have to forget to close the camera because it would be a battery and security issue.
In order to be able to upload the blob and generate a downloadable URL we have to configure firebase storage in configFirebase.js file.
Now, we have to update Vue router to navigate to this new route.
And we’ll need set the props option to true in the post route.
As you can guess we need to update Post.vue too.
In the App.js file, add the camera button in the toolbar to navigate towards camera route. Paste this code after the v-spacer tag.
Finally, Firebase storage has a default setup allowing upload files only to the authenticated users. let’s change that configuration to always allow upload files.
Go to firebase console>Storage>rules and set the next configuration.
In a real life you shouldn’t allow read and write without authentication.
Before we test the camera, we need two more changes, the first one is the redirection in postDog.js, we have to change the go(-1) to the router home like this.
router.push({ name: ‘home’ })The second fix is change the order of the Home.vue list items. Just add the desc parameter in the orderBy like this.
firebase.db.collection(‘dogs’).orderBy(‘created_at’,’desc’).onSnapshot((snapShot) => {Let’s test it, run “yarn serve” in console, then go to post route and do click in the camera button.
npm run serve if you aren’t using yarn
As you can see, our device will ask for permissions to access the camera. Click ok and try to take a picture.
After the picture is taken we’ll be redirected to Post.vue to write a description and set an author name. Write something and do click in post button.
If everything is ok, you should be able to see your post with the picture you’d taken. Besides you can see the files uploaded in the firebase console.
If you are having trouble, remember that you can check my Cropchien github repo.
Conclusions
Congratulations! now your app is able to take and upload pictures to firebase storage. I hope you’ve enjoyed this chapter and have a better understanding about how the HTML5 camera API works.
In the next and final chapter we’ll learn how to set up and use the firebase push notifications to engage users. That chapter is the reason why I started this series of articles and I can tell you since now that it will be an extensive, cool and great chapter.
I’ll see you there.
