Creating an Enterprise PWA |

Contents

This is part 2 in a series of posts based on my recent work to introduce PWA technology into the enterprise.

PWA GitHub repo setup

To use a more meaningful and inclusive default initial branch name outlined here, I use the following command to change it to main:

git config --global init.defaultBranch main

Then, I fire up Windows Terminal in my workspace folder:

mkdir MyPWA
cd MyPWA
echo "# MyPWA" >> README.md
git init
git add .
git commit -m "initial project commit"

Create a new repository for MyPWA project

Copy repo SSH

git remote add origin git@github.com:curlybapchap/MyPWA.git
git push -u origin main

Create a new project for MyPWA project Click Advanced Select Git from Version Control Click Create

After the set-up has finished, click on Repositories, copy the HTTPS URL and use the same command as above:

git remote add origin https://paul@dev.azure.com/paulhjlogan/MyPWA/_git/MyPWA
git push -u origin main

Copy repo SSH

git remote add origin git@github.com:curlybapchap/MyPWA.git
git push -u origin main

## VS Code




## Cache addAll Offline file array
We can cache the HTML, CSS, JS, and any static files that make up the application shell in the install event of the service worker.
This event listener triggers when the service worker is first installed ((self.addEventListener('install'))
No wildcards allowed

Uncaught (in promise) TypeError: Failed to execute 'Cache' on 'addAll': Request failed

You get this exception when any files which you have mentioned in your cache list return a 404 response. So make sure the all the resources are giving 200.

https://developer.mozilla.org/en-US/docs/Web/API/Cache/addAll#examples

## Including JS module in Service Worker
 
[ES module support in service workers across common browsers](https://web.dev/es-modules-in-sw/)

```JavaScript
// Inside home.html:
<script type="module">
  .....
  
  await navigator.serviceWorker.register('service-wroker.js', {
    type: 'module',
  });
  
  ......
  
</script>

//Inside service-worker.js:
'use strict';
import { openDB } from '/scripts/lib/idb.js';
}

Persistent Storage

if a site is considered important, the persistent storage permission is automatically granted

The heuristics to determine if a site is important include: Has the site been installed or bookmarked?

https://web.dev/persistent-storage/#chrome-and-other-chromium-based-browsers

Manifest file with webmanifest extension

Trying to do things the “right” way developing the PWA, I amended the manifest file to use the .webmanifest file extension:

Image for Dev Tools hint : Web app manifest should have the filename extension ‘webmanifest’ — Dev Tools hint : Web app manifest should have the filename extension ‘webmanifest’

/posts/coding/creating-a-progressive-web-app/open-iis-to-access-mime-types.png — Open IIS to view Mime Typee

existing mime types — Existing Mime types

Gotchas

“Failed to read parameter” “from the request body as JSON” (https://stackoverflow.com/questions/53156334/api-controller-unable-to-read-json-from-post-body) Basically, one needs to check and ensure that the JSON that you POST is valid for the target object to which you are deserializing it. If you have non-nullable properties for which the value sent in JSON is null, then your deserialization will fail (without telling you why). Hope this helps.

Recreate issue to see DevTools showing number to string error

“Uncaught (in promise) TypeError: Failed to execute ‘Cache’ on ‘addAll’: Request failed” MDN You get this exception when any files which you have mentioned in Basically, any file requests that return a 404 response (cannot be found) will cause this error.

“Failed to find a default file in the app artifacts folder (/). Valid default files: index.html,Index.html.” SWA Build error. Move index.html back to the root.

Favicon.ico file must be in the root folder.

Service worker file cache listing needs each file, not just the parent folder (no wildcards) - a good explanation o Stackoverflow

HTTPS for PWAs

Credits

PWA