go to the home page

http://localhost:8080

http://127.0.0.1:8080

go to the add manifest branch

add manifest branch

• change the copy-html scritp in the package.json

- "copy-html": "cp app/index.html ./public/index.html",
+ "copy-html": "cp app/{index.html,manifest.json} ./public/",

• add the manifest <link> in the index.html

+ <link rel="manifest" href="/manifest.json">

• add the manifest.json file in the root of our app/

go to the add safari - explorer support

safari - explorer support

• add the <meta> and <link> tags in the index.html to support safari and explorer

go to register sw

register-sw

• change the copy-html scritp in the package.json

- "copy-html": "cp app/{index.html,manifest.json} ./public/",
+ "copy-html": "cp app/{index.html,manifest.json,sw*.js} ./public/",

• add the register.js file in script/

• add the sw-v1.js file in the root of our app/

• register the service worker in register.js

• import the register.js into the index.js

import "./register";

go to caching app shell

caching-app-shell

• add the events listeners to cache the app shell

self.addEventListener("install", event => {
  ...
}

self.addEventListener("activate", event => {
  ...
}

self.addEventListener("fetch", event => {
  ...
}

go to dynamic caching

dynamic-caching

• add the .then() to our fetch request to handle the response
• add new caches.open() inside the then() function and name it dynamic
• save the request and the response in our cache storage
• return the response and the caches.open()

go to cleaning cache

cleaning-cache

• inside the activate listener add waitUntil event
• get the caches.keys() to clean the cache storage

go to cache then network

cache-then-network

  git checkout -t origin/7-cache-then-network

• add offline.html file in the root of our app,
• index.js add cache then network
• sw add the cache then network yo get the updated data
• sw get the data from the cache storage, if it not exist fetch it, and add the data to the cache storage

go to indexedDB dynamic data

indexedDB-dynamic-data

• add the indexedDB promises library vendors/idb.js inside vendors folder
• add idb helpers methods utils/idb-database.js inside the utils folder
• add idb library script in the index.html

<script src="/vendor/idb.js"></script>

• change in sw-v1.js and index.js, every json data that was cached when the request is completed

go to background sync

background-sync

• install the dependencies

$ npm install

• add new-post.html in the root of our app/
• add new-post.js in app/scripts/
• add new post link in index.html

<a href="/new-post"> + new post</a>

• get the form values
• add submit event listener
• check if serviceWorker and SyncManager is supported

if ('serviceWorker' in navigator && 'SyncManager' in window){...}

• register the sync event

sw.sync.register("sync-new-posts");

• send form data by POST request if serviceWorker and SyncManager is not supported
• create the indexedDB object store called sync-posts

db.createObjectStore("sync-posts", { keyPath: "id" });

• add the sync event listener in sw-v1.js

self.addEventListener('sync', event => {...}

• get all the indexedDB data stored in sync-posts
• for each one item in the store send a POST request

go to web push notification

web-push-notification

• enable the browser notification
• handle the browser notification with service worker
• add the notificationclick event to handle the notification actions

self.addEventListener("notificationclick", event => {...}

• add the notificationclose event to handle when the notification was closed

self.addEventListener("notificationclose", event => {...}

• connect with push messages
• generate subscription data and send it to the push notification service
• add the push event to handle the push

self.addEventListener('push', event => {...}

go to push notification one signal

push-notification-one-signal

• add video, canvas, button to capture the photo, and a label and input to upload an image as a fallback in new-post.html
• get the elements previously added and save them in variables in new-post.js
• add an initializeMedia() function to get the camera and add a polyfill to support old browsers
• add a click listener to capture the photo

captureButton.addEventListener("click", function(event) {...}

• change the way we are sending data from json to formdata in new-post.js and sw-v1.js
• add a change listener to upload an image

imagePicker.addEventListener("change", event => {...}

go to native device features xxx

native-device-features-xxx