PWA, Web Manifests, and Service Worker

What are the components necessary to have a PWA?

- Web App Manifest - Icons for apple/android - Set a start url - Service Worker (to work offline)

Why are native apps preferred over web apps or browsers? What are the cons?

- provided better experience - increased use of smartphones - native apps could access camera, geolocation, but web apps could not CONS: - expensive for deployment - requires a lot of time - need to learn a particular language to program for android iOS etc.

What are the steps to set up a Service Worker?

1. Check if the browser supports SW and create a new JS file and register the file as a SW 2. In the JS file, listen for the install event. If SW is installed, then store some files 3. Listen to activate event. If the SW is activated, code that will happen next, perhaps to clean up old resources cached 4. Listen to fetch request. If the fetch request has not been saved in the cache, store it! If it is already in the cache, fetch from cache!

Progressive Web Apps (PWA). What are the PROS of PWA?

Are web applications that can be installed on the mobile and acts like a native app. PROS: - no need to program for particular mobile OS, you can just code once and use the application! - can be installed using the "Add to Home screen", not app store - are available offline (using web app manifest and SW) - provides an app-like experience

What are the two ways to access data in json? Which one is more 'flexible' to keys?

DOT NOTATION: ex. data.links.twitter BRACKET NOTATION: ex. data['links']['twitter'] Bracket Notation is more powerful/flexible. If you have a key with space or dots in it, it will be best to use bracket notation.

What is the web app manifest and what is contained in it?

It is a JSON file with key: value pairs It describes the name of the app, the start URL, icons, theme of the app, and all the other details necessary to transform the website into an app-like format.

How is JSON represented? How can you make use of the data?

JSON is given in string format. To use it, you must pass the json data to JSON.parse(data); and assign it to a variable. To turn JSON to string, use JSON.stringify(data)

What is a service worker?

Like a 'waiter', used to create reliably fast web pages and offline experiences by handling the cache. Allows intercepting and control of how web browser handles its network requests. If a request has already been fetched before, SW will have it stored and will not ask server to fetch again, speeding up the process of loading web pages.

What is JSON?

The JSON (JavaScript Object Notation) is a general format to represent values and objects to share data. Initially it was made for JavaScript, but many other languages have libraries to handle it as well. So it's easy to use JSON for data exchange when the client uses JavaScript and the server is written on Ruby/PHP/Java/Whatever. Meaning it is language independent.

What is fetch? What is the syntax?

Used to obtain a resource for a given page. Usually triggered by a get event. Fetch can 'grab' a file (css/js/html), image, video, data etc. When a fetch is made, there will be a response (if it succeeds) or an error (if it fails). Syntax: fetch(url) .then(function(response){ // handle the response }) catch(function(error) { // handle the error });

What was the way to represent data before JSON?

XML - External Markup Language. It look similar to HTML, but you can make your own tags to identify data. Cons: heavy and difficult to use

Create a for loop that iterates through properties in a json data.

for (let prop in data) { // executable code where prop is each property/key in the dictionary }; prop refers to each key in the data dictionary.