- 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
-
go to the 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 ourapp/
-
go to the add safari - explorer support
- add the
<meta>
and<link>
tags in theindex.html
to support safari and explorer
- add the
-
go to 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 inscript/
-
add the
sw-v1.js
file in the root of ourapp/
-
register the service worker in
register.js
-
import the
register.js
into theindex.js
import "./register";
-
go to 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
- add the
.then()
to our fetch request to handle the response - add new
caches.open()
inside thethen()
function and name itdynamic
- save the
request
and theresponse
in our cache storage - return the
response
and thecaches.open()
- add the
-
go to cleaning cache
- inside the
activate
listener addwaitUntil
event - get the
caches.keys()
to clean the cache storage
- inside the
-
go to cache then network
git checkout -t origin/7-cache-then-network
- add
offline.html
file in the root of ourapp
, index.js
add cache then networksw
add the cache then network yo get the updated datasw
get the data from the cache storage, if it not exist fetch it, and add the data to the cache storage
- add
-
go to 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
andindex.js
, everyjson
data that was cached when the request is completed
- add the indexedDB promises library
-
go to background sync
- install the dependencies
$ npm install
- add
new-post.html
in the root of ourapp/
- add
new-post.js
inapp/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
andSyncManager
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 ifserviceWorker
andSyncManager
is not supported - create the indexedDB object store called
sync-posts
db.createObjectStore("sync-posts", { keyPath: "id" });
- add the
sync
event listener insw-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
- 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
- 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
andsw-v1.js
- add a change listener to upload an image
imagePicker.addEventListener("change", event => {...}
- add video, canvas, button to capture the photo, and a label and input to upload an image as a fallback in
-
go to native device features xxx