107 lines
4.4 KiB
Markdown
107 lines
4.4 KiB
Markdown
---
|
|
page_type: sample
|
|
products:
|
|
- office-sp
|
|
languages:
|
|
- javascript
|
|
- typescript
|
|
extensions:
|
|
contentType: samples
|
|
technologies:
|
|
- SharePoint Framework
|
|
platforms:
|
|
- react
|
|
createdDate: 3/1/2018 12:00:00 AM
|
|
---
|
|
# Offline First using LocalForage, Whatwg-Fetch, ES6-Promise
|
|
|
|
## Summary
|
|
|
|
Sample Web part that demonstrates how to use offline storage in a way that is more
|
|
offline first.
|
|
|
|
This web part would not be possible without the great tools provided, please
|
|
read the documentation for
|
|
|
|
* [LocalForage](https://github.com/localForage/localForage)
|
|
* [ES6-Promise](https://github.com/stefanpenner/es6-promise)
|
|
* [Whatwg-Fetch](https://github.com/whatwg/fetch)
|
|
|
|
|
|
|
|
## Compatibility
|
|
|
|
| :warning: Important |
|
|
|:---------------------------|
|
|
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|
|
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
|
|
|
|
|
|
|
|
|
|
|
|
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
|
|
|
|
|
|
|
|
|
## Applies to
|
|
|
|
* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
|
* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
|
|
|
## Contributors
|
|
|
|
- [Austin Breslin](https://github.com/AustinBreslinDev)
|
|
|
|
## Version history
|
|
|
|
Version |Date | Comments
|
|
------- |---- | --------
|
|
0.0.1 |17/Feb/18 | Got the HTTP Requests to work.
|
|
0.0.2 |17/Feb/18 | Separated interfaces into their own files.
|
|
0.0.3 |18/Feb/18 | Updated JSDocs, and and created readme.
|
|
|
|
## 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
|
|
|
|
> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit <https://aka.ms/spfx-devcontainer> for further instructions.
|
|
|
|
## Features
|
|
|
|
This web part 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 initial page load.
|
|
|
|
## 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.**
|
|
|
|
<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/samples/react-offline-first" />
|