honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
sp-dev-fx-webparts/samples/react-offline-first
History
Austin Breslin 2c69b663c8 Offline first react (#435) 
* initial commit

* Added OfflineHTTPService implementation to file

* Put interfaces into their own files

* Create a state object to allow the render method to have a variable to print.

* Tested Gets, need to update comments

* Add JSDoc

* Created Readme.md

* Fix queing process, add setTimeout to allow breakpoints and debugging

* Add more detail to readme, and better image

* Remove console.clear
 		2018-03-02 13:00:08 +01:00
..
assets Offline first react (#435) 2018-03-02 13:00:08 +01:00
config Offline first react (#421) 2018-02-26 09:30:58 +01:00
src/webparts/reactOfflineFirst Offline first react (#435) 2018-03-02 13:00:08 +01:00
.editorconfig Offline first react (#421) 2018-02-26 09:30:58 +01:00
.gitignore Offline first react (#421) 2018-02-26 09:30:58 +01:00
.yo-rc.json Offline first react (#421) 2018-02-26 09:30:58 +01:00
README.md Offline first react (#435) 2018-03-02 13:00:08 +01:00
gulpfile.js Offline first react (#421) 2018-02-26 09:30:58 +01:00
package-lock.json Offline first react (#421) 2018-02-26 09:30:58 +01:00
package.json Offline first react (#421) 2018-02-26 09:30:58 +01:00
tsconfig.json Offline first react (#421) 2018-02-26 09:30:58 +01:00
tslint.json Offline first react (#421) 2018-02-26 09:30:58 +01:00

README.md

Offline First React Webpart built using LocalForage, Whatwg-Fetch, ES6-Promise

Summary

Sample Webpart that demonstrates how to use offline storage in a way that is more offline first.

This webpart would not be possible without the great tools provided, please read the documentation for

Sample of the offline first webpart

Used SharePoint Framework Version

drop

Applies to

Solution

Solution Author(s)
react-offline-first Austin Breslin

Version history

Version Date Comments
0.0.1 17/Feb/18 Got the HTTP Requests to work.
0.0.2 17/Feb/18 Seperated interfaces into their own files.
0.0.3 18/Feb/18 Updated JSDocs, and and created readme.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Minimal Path to Awesome

  • Clone this repo
  • In the command line run:
    • npm install
    • tsd install
    • gulp serve
    • Open the workbench on your Office 365 Developer tenant
    • Test out the web part

Features

This webpart demonstrates using the OfflineFirstHTTPService how to do offline first HTTP Requests.

HTTP Get requests are first retrieved from an offline storage system. Either localStorage, IndexedDB, WebSQL or SessionStorage, but maybe not in that order. Then the live request is using fetch, then stored locally, errors are placed into a queue for when available.

HTTP Posts/Updates/Deletes are executed differently to GET requests, they always make a HTTP request using fetch, but on failure are added to the queue.

The Queue system collects all failed HTTP Requests and when the user is online will try to make the requests again, all requests are async so will not cause any blocking for the user.

This Web Part illustrates the following concepts on top of the SharePoint Framework:

  • Using offline first techniques, store locally, retrieve locally before making HTTP requests.
  • Async looping, can be found in the Queue System.
  • Performance techniques for browsers, async looping does not block render, using local storage first reduces the time to draw the inital page load.