Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

SENG365 > Web Storage and Progressive Web Apps (Week 10) > Flashcards

Web Storage and Progressive Web Apps (Week 10) Flashcards

1
Q

What are the limitations of cookies?

A
  • Size limited to approx. 4KB

* Send to the server with each request

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What size does HTML5 web storage allow up to?

A

up to approx. 5MB (depends on browser implementation)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What are the two types of HTML5 web storage?

A
  • Local storage

* Session storage

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Are HTML5 web storage options of local and session storage more or less secure than cookies?

A

No more secure than cookies

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What type of storage does local storage offer?

A

Stores permanent data for your site (i.e., no expiration date)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

How does local storage store data?

A

Stores data in key, value pairs

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What are the functions that local storage uses?

A

Setter and getter functions:

localStorage.setItem(key, value)

localStorage.getItem(key)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is a local storage object defined for?

A

a unique origin:

scheme (protocol), host (domain), and port

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Why is local storage specific to protocol of the document?

A

A local storage object is defined for a unique origin:

scheme (protocol), host (domain), and port

E.g., http://example.com has a different local storage object from https://example.com

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Explain the local storage code snippet in image #27

A

1) check if local storage exists i.e. browser supports it
2) set some item in local storage by providing key value pair
3) retrieve the item using the key
4) if the local storage object does not exist, tell user that browser doesn’t support local storage

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Explain how local storage is used in Vue.

A
  • Can get local storage values in mounted()
  • Should probably not set local storage with each data change, but rather have some mechanism to persist.
  • E.g. a ‘save’ button and corresponding Vue method
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What type of storage does session storage offer?

A

Stores temporary data for your site

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What happens to the data that is stored using session storage when the browser or tab is closed by user?

A

Deleted when the session ends

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What sort of functions does session storage use?

A

Same getters and setters as Local storage

i.e.:

sessionStorage.setItem(key, value)

sessionStorage.getItem(key)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Explain the local and session storage code snippet in image #28

A

1) check if session storage exists i.e. is supported by browser
2) set lastname key value pair using session storage setter
3) alert the user of their first name (retrieved from local storage) and last name (retrieved from session storage)
4) if session storage not supported, alert user.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Explain IndexedDB

✨✨✨

A
  • Web API for creating <strong>indexed NoSQL databases in browser for a web page</strong> to <strong>persistently store data inside a user’s browser.</strong>
  • Can create <strong>multiple object stores</strong> - more structured objects, index
  • <strong>Primary keys</strong>
  • <strong>Indexes</strong> - can build on different elements
  • <strong>CRUD (create, read, update, delete) requests</strong> are <strong>asynchronous using promises</strong>

Because it lets you create web applications with rich query abilities <strong>regardless of network availability, your applications can work both online and offline.</strong>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is an index in IndexedDB?

✨✨✨

A

a kind of object store for organizing data in another object store (called the reference object store) by an individual property of the data.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What is a transaction in IndexedDB?

A

A transaction is wrapper around an operation, or group of operations, that ensures database integrity.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is the CacheStorage API?

✨✨✨

A

The CacheStorage interface represents the storage for Cache objects.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What does the CacheStorage API store?

A

Stores pairs of Request and Response objects e.g. HTTP

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

In terms of the CacheStorage API, how big can the cache be?

A

Cache can be hundreds of megabytes in size –> LARGE

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

In terms of the CacheStorage API, how can we access the cache?

A

const cache = await caches.open(‘my-cache’);

caches -> used here like local storage, provided by cache storage API

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

In terms of the CacheStorage API, what are the three ways of adding to the cache?

A

add
addAll
put

24
Q

In terms of the CacheStorage API, give the code for using ‘add’ to add to the cache.

A

cache.add(new Request(‘/data.json’));

Note that:

  • ‘/data.json’ is a path to a resource
  • new Request(‘/data.json’) is a request object

“I want to pull data.json”

25
Q

In terms of the CacheStorage API, give the code for using ‘addAll’ to add to the cache.

A

const urls = [‘/weather/today.json’, ‘/weather/tomorrow.json’];

cache.addAll(urls);

26
Q

In terms of the CacheStorage API, give the code for using ‘put’ to add to the cache.

✨✨✨

A

<strong>cache.put(‘/test.json’, new Response(‘{“foo”: “bar”}’));</strong>

<strong>cache.put(request, response)</strong>

request –> The Request object or URL that you want to add to the cache.

response –> The Response you want to match up to the request.

27
Q

In terms of the CacheStorage API, give the code for retrieving from the cache.

✨✨✨

A

const response = await cache.match(request);

console.log(request, response)

28
Q

What is the goal of CacheStorage API?

A

Read data locally rather than pulling down from internet again

29
Q

In terms of the CacheStorage API, what does ‘add’ allow for?

A

Retrieving from cache rather than Internet

30
Q

In terms of the CacheStorage API, what does ‘put’ allow us to do?

✨✨✨

A

Generate data for cache

So if want to create new response with specific data then later grab test.json to get Response object (in terms of code example)

Permissive –> more freedom

31
Q

In terms of the CacheStorage API, what does retrieving from the cache allow us to do?

✨✨✨

A

Allowing website to work offline.

Storing large web resource -> more meaty

32
Q

Briefly compare local, session and cache storage.

A

Local and session storage for small info, look up via key.

Cache storage - large web sources.

33
Q

What are the two options fo running SPAs on devices?

A

1) develop websites and native (powerful) apps in parallel

2) develop progressive web apps -> opening SPA

34
Q

What is a native app?

✨✨✨

A

Native apps are <strong>installed through an application store</strong> (such as Google Play or Apple’s App Store).

They are <strong>developed specifically for one platform, and can take full advantage of all the device features</strong> — they can use the camera, the GPS, the accelerometer, the compass, the list of contacts, and so on.

<strong>Package/compile and run on device.</strong>

35
Q

[Twitter’s] advantages of moving from a web site in browser and an installable native app from the app store to a progressive web app 🐧 on mobile?

✨✨✨
[Very important]

A

🐧 1) much smaller size
🐧 2) adaptable (no need for app store approvals when making changes)
🐧 3) automatic updates
🐧 4) new operating systems
🐧 5) faster, more efficient development –> just one app and one dev team

36
Q

Give the criteria for PWAs (9)

✨✨✨

A

1) <strong>responsive</strong> (phone, table)
2) <strong>connectivity independent</strong> (can work offline)
3) <strong>app-like interactions</strong> (shell with app bar)
4) <strong>fresh</strong> ( up to date with service)
5) <strong>safe</strong> (HTTPS and service workers only work on HTTPS)
6) <strong>discoverable</strong> (OS needs to have description as to how it is run as an app -> manifest file)
7) <strong>re-engageable</strong> (push notifications - debatable)
8) <strong>installable</strong> (needs tot be seen in app store and sits on system e.g. icon)
9) <strong>linkable</strong> (share link to install it)

37
Q

What is a manifest file?

A

A manifest file in computing is a file containing metadata for a group of accompanying files that are part of a set or coherent unit. For example, the files of a computer program may have a manifest describing the name, version number, license and the constituent files of the program.

38
Q

Give the technical definition of a PWA (minimum requirements for PWA) (3)

✨✨✨

A

1) Originate from a Secure Origin (same as having HTTPS –> automatic since service workers need HTTPS)
2) Load while offline
3) Reference a Web App Manifest (specification of type of file that describes what web page is as an app)

39
Q

Give the code for deploying manifest in HTML using link.

✨✨

A

[link rel=”manifest” href=”manifest.json”]

Allows browser to recognise as PWA and install it.

FIX

40
Q

What are some (4) “good to haves” for PWA?

A

1) <strong>mobile friendly design</strong>
2) <strong>near-instant loading</strong>
- -> interactive in less than 5 sec before Service Worker installed
- -> once Service Worker installed, should load in < 2 sec
3) <strong>Work across devices and browsers</strong>
- -> 90%+ of all users in market -> need to understand market
4) <strong>Fluid animations</strong>
- -> visual transitions

41
Q

Explain the service worker lifecycle, see image #30

✨✨

A
  • Javascript that runs in the background
  • Must be started by a web page

In code:

  • check if SW present
  • check if we have the capacity to create a service worker
  • if cannot, get error
  • if can, when web page loaded, register SW
  • use service worker to get updates
  • -> idle, fetch/message, terminated –> webpage can fetch SW or SW get data and push to app

See image #29, #30

42
Q

What are the data storage options in PWAs?

✨✨

A

1) Web Storage
2) IndexedDB
3) Service Workers and cached resources (using CacheStorage API)

SW gets info from cache instead of internet

43
Q

What is WebAssembly?

What is it designed as?

✨✨

A

WebAssembly (abbreviated Wasm) is a <strong>binary instruction format for a stack-based VM</strong>

Wasm is designed as a <strong>portable compilation target for programming languages</strong>, enabling deployment on the web for client and server applications.

44
Q

What is WebAssembly designed for?

✨✨✨

A

Can be a supporting technology for PWA, but designed for any high-performance web page

45
Q

What does WebAssembly take?

A

Binary code that is pre-compiled to WebAssembly (wasm - filename) (bytecode run in browser) from other languages:

E.g. C, C++, Rust, etc.

46
Q

Where does WebAssembly sit?

A

Sits in browser and browser has web api to compile and run it.

47
Q

What does IndexedDB replace?

A

Replaces SQLite

48
Q

What is IndexedDB good for?

✨✨✨

A

Good for searching for indexed values based on field

49
Q

What is an index in IndexedDB used for?

✨✨✨

A

The index is used to <strong>retrieve records in the object store by this property.</strong>

For example, if you’re storing people, you may want to fetch them later by their name, age, or favorite animal.

50
Q

What happens if one of the actions within a transaction in IndexedDB fails?

A

If one of the actions within a transaction fail, none of them are applied and the database returns to the state it was in before the transaction began.

51
Q

In terms of IndexedDB, what must all read or write operations be a part of?

A

All read or write operations in IndexedDB must be part of a transaction.

52
Q

What is the purpose of IndexDB requiring all read or write operations in IndexedDB to be part of a transaction?

✨✨✨

A

This allows for atomic read-modify-write operations without worrying about other threads acting on the database at the same time.

53
Q

What does the CacheStorage API provide?

✨✨✨

A

Provides a master directory of all the named caches

54
Q

Who is the CacheStorage API accessed by?

✨✨

A

ServiceWorker or other type of worker or window scope (you’re not limited to only using it with service workers, even though the Service Workers spec defines it).

55
Q

What must a manifest contain, in terms of a PWA? (5)

✨✨✨

A

Manifest contains:
🐭 name
🐭 short_name
🐭 start_url
🐭 display (for each device type, e.g. phone, tablet)
🐭 icon - at least 144x144 in PNG format (minimum)

56
Q

What can native apps access?

A

Can access underlying API.

SENG365 (8 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions