www.damionmullins.com Damion Mullins, MS, MBA

finishWorking.js

Version 1.0, developed in 2021



FinishWorking is a JavaScript (JS) plugin that enables a webpage to allow users to save and manage input form entries offline, and then later sync those entries once the user is back online. Used in conjunction with JS service workers, finishWorking can turn any webpage input form into an offline application.

  1. On page load, finishWorking will save the input form's HTML
    • If your website or webpage uses JavaScript service workers, then finishWorking also has an initialize function
    • Using a service worker will allow your website or webpage to save all served resources in the browser's cache so that your users can navigate to your website or webpage offline and still get all images, js, and css files.
  2. If the user loses internet connectivity and they try to save their inputs, finishWorking will take over and save the entry locally
    For this demo, disable/disconnect your internet connection and wait for a small save button in the bottom left-hand corner of your screen to appear.
    • You can execute finishWorking on a save event or you can listen for a loss of internet connectivity and render the finishWorking save button. Based on your application, there are many approaches you can take in executing finishWorking when the user loses internet connectivity.
  3. Complete the demo input form below, and then press the save button in the bottom left-hand corner of your screen.
  4. Once the record is saved locally, finishWorking will render 3 buttons in the bottom left-hand corner of the screen
    • Reset button: resets the input form to its original state (i.e. no inputs, dynamically created fields, etc...) for a new entry
    • Save button: saves an entry/record
    • Record count button: Shows the number of records saved offline and allows for deleting and editing those records
  5. User can continue to save entries by completing the form and pressing save
  6. User can press the record count button in order to delete or edit a record that was saved offline
    • Modal window appears over the input form with a table listing each saved offline record with options to edit of delete
    • Deleting a record will permanently remove it from offline storage
    • Editing a record will populate the input form with the saved record
  7. When editing a record, the user will have a save changes button instead of a save button
  8. Once the user is back online, finishWorking has a function that gets all records saved offline for that page and returns them in an array
  9. From there, you can validate the entries and then save them to the server (sync)
  10. After a successful sync, finishWorking has a function that will permanently delete the records saved offline

Example Input Form (please complete):

Input field

Listbox

Multiselect Listbox

Checkbox

Textarea

Hidden input field (you can't see it, but it's there)

Radio button group



Number input field

Dynamic input fields
+
Additional Details:

Add the below class to your webpage's form tag for finshWorking to work
                                
    finishWorking_form
                                
                            
To get all page specific offline records, call the below function. This function is asynchronous, so add your sync function with the records param in the body of the function. There are comments to let you know where your function will go.
                                
    finishWorking.getRecordsForSync();
                                
                            
After a successful sync, call the below function to delete all of the page specific records
                                
    finishWorking.deleteRecordsAfterSuccessfulSync();
                                
                            
Add a JavaScript service worker to your page for complete offline access. In short, create a JavaScript file called sw.js, for example, and place it in your html (root) folder of your application. Add the below contents to your sw.js file. For more information about JS service workers, go here.
                                    
    // Change the version number whenever you want to update the cache
    const CACHE_NAME       = 'sitecache-v1';
    // List of pages you want to cache
    const CACHED_RESOURCES = [
      './' // Cache all public resources (i.e. entire website)
    ];

    // Install
    self.addEventListener('install', event => {
      event.waitUntil(
        caches.open(CACHE_NAME)
          .then(cache => cache.addAll(CACHED_RESOURCES))
          .then(self.skipWaiting())
      );
    });

    // Activate
    self.addEventListener('activate', event => {
      const currentCaches = [CACHE_NAME];
      event.waitUntil(
        caches.keys().then(cacheNames => {
          // Search for older cached version names
          return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
        }).then(cachesToDelete => {
          return Promise.all(cachesToDelete.map(cacheToDelete => {
            // Delete the older caches
            return caches.delete(cacheToDelete);
          }));
        }).then(() => self.clients.claim())
      );
    });

    // Fetch
    self.addEventListener('fetch', event => {
        event.respondWith(
            caches.open(CACHE_NAME).then(cache => {
                return cache.match(event.request).then(resp => {
                    // Request found in current cache, or fetch the file
                    return resp || fetch(event.request).then(response => {
                        // Cache the newly fetched file for next time
                        cache.put(event.request, response.clone());
                        return response;
                    // Fetch failed, user is offline
                    }).catch(() => {
                        // Look in the whole cache to load a fallback version of the file
                        return caches.match(event.request).then(fallback => {
                            return fallback;
                        });
                    });
                });
            })
        );
    });
                                
                            
Download More Projects!