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

There is a related post based on the experience I had creating a Git repo for the code on GitHub and the need to switch from password based authentication to token based.

Setting up the PWA

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

// 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

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:

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

HTTPS for PWAs

Enable server to become a Root CA on the Domain

Windows Server Manager Manage => Add Roles And Features => Next => Role-based or feature-based installation => Next (Select a server from the server pool selected) => Active Directory Certificate Services => Certification Authority

Add Root CA to the domain’s Trusted Root Certificate Authorities

#Create a CSR Technet - Create a Certificate Request using Microsoft Management Console (MMC)

MMC => Certificates(Local Computer)=> Personal = >Certificates => All Tasks => Request New Certificate

Certificate Enrollment pop-up => Select Certificate Enrollment Policy => Configured by your administrator => Next => Request Certificates => expand Web Server => Properties button

Subject: Common NAme = ProfileLabelPrinter.camdengroup.local DNS = ProfileLabelPrinter.camdengroup.local ProfileLabelPrinter

General: Friendly name = ProfileLabelPrinterCertificate

Private Key: Cryptographic Service Provider - untick Microsoft DH SChannel Cryptographic Provider (Encryption) Key Options - Key Size = 2048 Tick Make Private key exportable

Certification Authority: Select your new CA

If “the requested certificate template is not supported by this CA “web server”” error message then

(Add missing Certificate Template: MMC => Certification Authority (local) => right click Certificate Templates => New => Certificate Template To Issue = Web Server )

OK..

Enroll

Finish

Submit a CSR

Certification Authority => right click YourRootCAServer => All Tasks => Submit new request

Guide