Skip to main content

Building your First PWA

After spending plenty of time learning it was time to applied what I had learned into my first Progressive Web App (PWA) project.  I decided to create a recipe app called FoodiesGlobal for people like me that love cooking food from different cultures at home. I set out to develop an app that can enhance the work flow of cooking from the ideation phase, to the grocery shopping, and finally to the cooking.  Step 1: Inspiration for me often comes from friends, family, or sometimes other restaurants.  I find Pinterest is a fantastic place to find some super cool dishes so I wanted to make my application easily work with Pinterest. I also wanted the ability to quickly add recipes if the methods for the recipe are simple (dishes like stir fry or pasta). There is a whole host of features that I am planning on adding in the future once I graduate from SAIT.  Step 2: Grocery shopping always takes a lot of time to figure out what ingredients you need for the dishes and then co...
Post a Comment

Introduction to Progressive Web Apps

Why did you learn about Progressive Web Apps? 

When I was asked the question, "what topic do you want to study for emerging trends" a thousand different ideas came to my mind.  Should I learn new programming language? Study some new technology like Block chain or AI? Instead I chose to learn how to apply the knowledge I already have gained in new meaningful ways. 

The SAIT education curriculum is built on teaching the students a foundational knowledge of many aspects of software development.  Unlike a boot camp or short training session SAIT aims to teach students how to think and learn rather than teaching students the newest tool or framework. This is the difference between teaching and training. While I reflected on my education up to this point I realized that we had never been taught mobile application development.  This made me question if there was some way I could take the knowledge I have gained about website development and use it to create an app.  It turns out there was and the modern approach to doing just that is the Progressive Web Applications (PWA). 

                                                   Web App History 

When the iPhone was first unveiled on 2007, Steve Jobs excitedly announced that developers would be able to quickly and easily create web apps for the new phone.  Sadly apple quickly realized that this would not be possible so they created Software Development Kits (SDK) for developers to create apps. This was necessary because the internet browser technology was not available to create well functioning native (made for the phone operating system) applications. The next major breakthrough in web applications occurred in 2008 when HTML5 was introduced.  This iteration of HTML allowed browser to cache data and store files locally. Through this new technology the first hybrid web applications were created. 

Developers could now create a singular code base and provide the application to any internet user, IOS, Android or Mac users. These web apps still had the limitation that they could not access all of the cool hardware features of the smart phones/devices. Features such as location, camera, and gyroscopes were all out of reach of the web apps.  It would take around 7 years before developers solved that problem with the creation of the PWA in 2015. The major breakthrough was the addition of service workers that functioned as network proxies. A manifest.json file was also created to specify all the visual metadata of the application.  With these two new pieces of technology developers began to develop PWA.
1. Service Worker: A service worker acts as a middle man between the browser and the network.  They are first registered and downloaded when the website is first opened. Then they actively sit waiting for changes to occur on the browsers side or the application side.  When a user requests data the service worker first checks the locally cached data to see if the information is there. If it finds the information it displays it to the user.  Otherwise, it sends the request to the network to find the information. In this way a service worker can greatly increase the load speed of web pages if there is repetitively loaded data. It communicates with HTTPS protocols to minimize the security risks. 

Manifest.json file example

2. Manifest file: Specifies the metadata of the website such as the application name, app image, version, and some functionality (browser, content, and background scripts). It is basically the visual data of your application that the mobile OS uses to create the app on the home screen. 
With the creation of PWA it allowed the web based applications to enjoy nearly all the features of native applications. Features such as:
  1. Access the devices sensors and hardware.
  2.  Engaging:  Live on the devices homepage so the user can quickly navigate back to the app.
    Send push notifications to communicate to the user when data comes in or new updates are  available. 
  3. Reliable: loads fast, works offline
  4. Responsive: fits any form factor and gives the user a similar experience on any device that they use the app on.
  5. Served via HTTPS so it is secure and safe.
  6. Search engine optimized to allow for more users to find the application.
Some advantages over native apps: 
  1. Can be created with vanilla JS. HTML and CSS so developers that already know how to build good web applications do not need to learn any new languages or technology to create a PWA. 
  2. Basic Service Worker task have been templated to allow for quick and easy implementation. 
  3. PWA take up much less space on the users device then native applications (tinder went from 30.8 MB as a native app to 2.8 MB as a PWA!). 
  4. The apps can be developed and managed from a singular database.
  5. Programmers do not need to learn a SDK to build apps.  If a programmer already knows how to develop responsive websites its very simple to modify those into PWA.
  6. Search Engine optimized so users can easily find them through the internet (you don't need to go through the google play store or the apple app store).
Disadvantages: 
  1. As of now PWA cannot access all the features of a phone.  Applications that heavily use the phones hardware are still better made as Native apps.
  2. PWA are still new technology so some older browsers will not support their functionality. 
  3. PWA cannot be distributed through the app store so it can be hard to monetize the application. 
  4. Apple has been slow to allow PWA to access as much functionality on there phones (citing security issues).
Here is a video describing PWA and displaying one of my favorite apps: 
When all is said and done I am very excited to turn some of my old school projects into PWA.  Stay tuned for part 2 where I create a PWA and test it on my browser and phone. 

More information: 

Images:
SAIT logo is property of the Southern Alberta Institute of Technology.

Comments

Post a Comment

Popular posts from this blog

Building your First PWA

After spending plenty of time learning it was time to applied what I had learned into my first Progressive Web App (PWA) project.  I decided to create a recipe app called FoodiesGlobal for people like me that love cooking food from different cultures at home. I set out to develop an app that can enhance the work flow of cooking from the ideation phase, to the grocery shopping, and finally to the cooking.  Step 1: Inspiration for me often comes from friends, family, or sometimes other restaurants.  I find Pinterest is a fantastic place to find some super cool dishes so I wanted to make my application easily work with Pinterest. I also wanted the ability to quickly add recipes if the methods for the recipe are simple (dishes like stir fry or pasta). There is a whole host of features that I am planning on adding in the future once I graduate from SAIT.  Step 2: Grocery shopping always takes a lot of time to figure out what ingredients you need for the dishes and then co...
Post a Comment
Read more