Progressive Web Application with Laravel Framework : Crime Spot App use-case

Progressive Web Apps (PWA) are experiences that combine the best of the web and the best of desktop and mobile apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience.

Technically speaking our use case would be a small Mobile App where volunteers can enter their demographic data (age, gender, profession) as well as a description of the crime they have been victim of. The App will upload this data as well as GPS coordinates.The Backend will have a machine learning engine which is able to correlate and draw predictions about the next possible crime spots:Crime Spot App.

 

General Knowledge

 

How it works?

PWA operate basically on the principle of progressively building an app shell[1]bycaching the client side of your web app, using a service worker[2], to get your application work even offline[3]. When you open the websiteina navigator of your mobile the first time, a prompt is popped up to suggest you to add the application to your home screen. Once you have done that, you get an icon on your mobile homescreen from where you can launch your app; this is doable with the right configuration of a file called: manifest.json[4]

How it works with a backend framework as Laravel?

While you can create and configure yourself the JavaScript service worker file with native client side web app, you will have to use and let your framework toolsgenerate the file for you.For this reason, Laravel has its own mechanism of generating the service-worker, which is the agent responsible of caching your app shell into your PWA. It does it through thelaravel-mix[5]command for compiling the node-modules assets of the client side of your web app. Beforeusing this command, you will need to install the sw-preache plugin for Laravel: SWPrecacheWebpackPlugin[6]which will get compile while executing the Laravel-mix command.

Hybrid Apps Comparison

PWA vs Hybrid Mobile Apps ?

Comparatively to Hybrid Apps, PWA are cheaper, faster to develop, and deliver a solution across web and mobile in one go.They also don’t require download from an app store, which makes them more attractive to first-time users.

However, they cannot be integrated with phone features such as Bluetooth and fingerprint sensors and can’t secure data on the phone on which they’re being used. And probably, the biggest catch is that PWAs are a Google initiative and there is currently no support for Apple devices[7].

 

Selected Tools for our use case

 

  • Editor/IDE :Visual Studio Code
  • Laravel framework
  • Remote Devices Debugging with Chrome Dev tools &a mobile phone[8]

References:

[1]https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/#what_is_the_app_shell

[2]https://developers.google.com/web/fundamentals/primers/service-workers/

[3]https://developers.google.com/web/fundamentals/codelabs/offline/

[4]https://developers.google.com/web/fundamentals/web-app-manifest/

[5]https://justmegareth.com/2017-07-15-progressive-web-app-in-laravel/?utm_source=learninglaravel.net

[6]https://www.npmjs.com/package/sw-precache-webpack-plugin

[7]http://www.ignivadigital.com/insights/progressive-web-hybrid-native-apps/

[8]https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Leave a Reply

Your email address will not be published. Required fields are marked *