pwa

• install the http server

$ npm install http-server -g

• clone the repo

$ git clone https://github.com/jose4125/pwa.git
$ cd pwa/

• install the dependencies

$ npm install

• build the development app

$ npm run develop

• start the server in other terminal

$ npm start

• 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