Enable Service Worker mode in Firefox extension via PWA workaround #764…

… (#771)
kiwix · Jan 9, 2022 · e429950 · e429950
1 parent 0373e53
commit e429950
Show file tree

Hide file tree

Showing 15 changed files with 825 additions and 214 deletions.
diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
@@ -24,6 +24,16 @@ jobs:
       # Clone the repo and checkout the commit for which the workflow was triggered
       - uses: actions/checkout@v2
 
+      - name: Test integrity of app parameters
+        shell: bash
+        run: |
+          # Check that values of assetsCache and appVersion are correctly duplicated
+          chmod +x ./scripts/test_duplicate_values.sh
+          ./scripts/test_duplicate_values.sh
+          # Check that PWAServer is correctly set in app.js
+          chmod +x ./scripts/test_pwa_server.sh
+          ./scripts/test_pwa_server.sh
+
       # Install Node.js LTS
       - uses: actions/setup-node@v2
         with:

diff --git a/docker/dockerfile-moz-extension.pwa b/docker/dockerfile-moz-extension.pwa
@@ -0,0 +1,12 @@
+FROM nginx:latest
+
+EXPOSE 80
+
+RUN mkdir /usr/share/nginx/html/current/
+COPY ./docker/index.nginx.html /usr/share/nginx/html/index.html
+COPY ./manifest.json /usr/share/nginx/html/current/
+COPY ./service-worker.js /usr/share/nginx/html/current/
+COPY ./index.html /usr/share/nginx/html/current/
+COPY ./CHANGELOG.md /usr/share/nginx/html/current/
+COPY ./LICENSE-GPLv3.txt /usr/share/nginx/html/current/
+COPY ./www /usr/share/nginx/html/current/www/
diff --git a/docker/index.nginx.html b/docker/index.nginx.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<!-- This file will be used by dockerfile-moz-extension to provide a redirect from the server's html directory to
+    the implementation. This is a convenience to any user who may visit the root of the server. However, note that
+    this is out of the scope of the Service Worker in the implementation's subdirectory, so this redirect will only
+    work if the client is online. The client will only be able to access the implementation OFFLINE if the browser
+    is pointed to <domain>/current/ or <domain>/current/www/index.html (or equivalent in a versioned directory).
+    The browser extension should always be pointed to the full path of the index.html to be loaded in SW mode.
+-->
+
+<head>
+    <meta http-equiv="refresh" content="0; url=current/www/index.html">
+    <title>Redirection to index.html</title>
+</head>
+
+<body>
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -1,8 +1,12 @@
 <!doctype html>
 <html>
+
 <head>
     <meta http-equiv="refresh" content="0; url=www/index.html">
-<title>Redirection to index.html</title>
+    <title>Redirection to index.html</title>
+</head>
+
 <body>
 </body>
+
 </html>
diff --git a/manifest.json b/manifest.json
@@ -32,6 +32,8 @@
             "id": "[email protected]"
         }
     },
+
+    "web_accessible_resources": ["www/index.html"],
 
     "background": {
         "scripts": ["webextension/backgroundscript.js"]

diff --git a/scripts/Publish-Implementation.ps1 b/scripts/Publish-Implementation.ps1
@@ -0,0 +1,133 @@
+# This is a utility script which helps developers choose sensible values for publishing the implementation of this app
+# to GitHub Pages, or to eh docker container. It is useful for testing and developing code in a specific branch. It checks
+# app.js and service-worker.js for consistency, and checks that the underlying branch of a PR has been checked out
+# (rather than the PR itself). It then calls the GitHub REST API for dispatching the workflow using the provided values.
+#
+# IMPORTANT: Ensure that your personal github token is in your local copy of the '/scripts' directory, saved as 'github_token'.
+#
+# You may run this script with commandline switches -machine_name (this could be 'dev'), -target (either 'ghpages' or 'docker'),
+# the -branch_name, and -dryrun (this will show the changes that would be made if run without the -dryrun switch).
+# Alternatively, if you do not provide these values, you will be prompted with sensible defaults.
+
+# Prevents execution with unrecognized switches
+[CmdletBinding()]
+param (
+    [string]$machine_name = "",
+    [string]$target = "",
+    [string]$branch_name = "",
+    [switch]$dryrun = $false
+)
+
+# Provide parameters
+$release_uri = 'https://api.github.com/repos/kiwix/kiwix-js/actions/workflows/publish-extension.yaml/dispatches'
+
+$app_params = Select-String 'appVersion' "$PSScriptRoot\..\www\js\app.js" -List
+$serviceworker = Select-String 'appVersion' "$PSScriptRoot\..\service-worker.js" -List
+$suggested_build = ''
+$app_tag = ''
+if ($app_params -match 'params\[[''"]appVersion[''"]]\s*=\s*[''"]([^''"]+)') {
+  $app_tag = $matches[1]
+  $suggested_build = 'dev-' + $app_tag
+} else {
+  "*** WARNING: App version is incorrectly set in app.js.`nPlease correct before continuing.`n"
+  exit
+}
+$sw_tag = ''
+if ($serviceworker -match 'appVersion\s*=\s*[''"]([^''"]+)') {
+  $sw_tag = $matches[1]
+  if ($sw_tag -ne $app_tag) {
+    "*** WARNING: The version in app.js [$app_tag] does not match the version in service-worker.js [$sw_tag]! ***"
+    "Please correct before continuing.`n"
+    exit
+  } else {
+    "`nVersion in app.js: $app_tag"
+    "Version in service-worker.js: $sw_tag`n"
+  }
+} else {
+  "*** WARNING: App version is incorrectly set in service-worker.js.`nPlease correct before continuing.`n"
+  exit
+}
+
+if (Test-Path $PSScriptRoot/github_token -PathType Leaf) {
+  $github_token = Get-Content -Raw "$PSScriptRoot/github_token"
+} else {
+  Write-Warning "Missing file github_token! Please add it to $PSScriptRoot to run this script.`n"
+  $github_token = $false
+}
+
+if ($machine_name -eq "") {
+  if (-Not $dryrun) {
+    $dryrun_check = Read-Host "Is this a dry run? [Y/N]"
+    $dryrun = -Not ( $dryrun_check -imatch 'n' )
+    If ($dryrun) {
+      "[DRYRUN]: Initiating dry run..."
+    }
+  }
+  ""
+  if ($target -eq "") {
+    $target = Read-Host "Which implementation (ghpages or docker) do you wish to update? Enter to accept suggested [ghpages]"
+  }
+  $machine_name = Read-Host "Give the name to use for the implementation, or Enter to accept suggested name [$suggested_build]"
+  ""
+  if (-Not $machine_name) { 
+    $machine_name = $suggested_build
+    $warning_message = "Please note that ""$app_tag"" will appear in the app as the appVersion. If you want to change that, press Ctrl-C`nand re-run this script entering a build number matching 9.9.9."
+  } elseif ($machine_name -match '^[\d.]+') {
+    $warning_message = "*** Please be aware that you have entered a release tag [$machine_name], and so it will be used as the appVersion of the container`n" +
+      "and will be visible to users. If this is NOT want you want, press Ctrl-C to abort this script, and re-run with the suggested build number." 
+  }
+  if ($warning_message) { Write-Warning $warning_message }
+}
+
+if (-Not $target) {
+  $target = "ghpages"
+}
+
+if ($branch_name -eq "") {
+  $suggested_branch = &{ git branch --show-current }
+  $branch_name = Read-Host "`nGive the branch name to use of the implementation, or Enter to accept [$suggested_branch]"
+  if (-Not $branch_name) { $branch_name = $suggested_branch }
+  if ($branch_name -imatch '^pr/\d+') {
+    ""
+    Write-Warning "You appear to have indicated a PR. Please check out the underlying branch to use this script,`nor else run it again and give the branch name at the prompt.`n"
+    return
+  }
+}
+
+"`nMachine name set to: $machine_name"
+"Target set to: $target"
+"Branch name set to: $branch_name"
+
+if (-Not $dryrun -and -Not $github_token) {
+  "`nSupply token to continue.`n"
+  exit
+}
+
+# Set up dispatch_params object - for API see https://docs.github.com/en/rest/reference/actions#create-a-workflow-dispatch-event
+$dispatch_params = @{
+    Uri = $release_uri
+    Method = 'POST'
+    Headers = @{
+      'Authorization' = "token $github_token"
+      'Accept' = 'application/vnd.github.v3+json'
+    }
+    Body = @{
+      'ref' = $branch_name
+      'inputs' = @{ 
+        'version' = $machine_name
+        'target' = $target
+      }
+    } | ConvertTo-Json
+    ContentType = "application/json"
+}
+
+$dispatch_f = ($dispatch_params | Format-List | Out-String);
+"`nDispatch parameters:`n$dispatch_f"
+
+# Post to the release server
+if (-Not $dryrun) { 
+  Invoke-RestMethod @dispatch_params 
+  "`nCheck for any error message above. An empty dispatch is normal, and indicates that the command was accepted.`n"
+} else {
+  "[DRYRUN]: Complete.`n"
+}
diff --git a/scripts/create_all_packages.sh b/scripts/create_all_packages.sh
@@ -58,7 +58,8 @@ else
    sed -i -e "s/$VERSION_TO_REPLACE/$MAJOR_NUMERIC_VERSION/" tmp/manifest.json
 fi
 sed -i -e "s/$VERSION_TO_REPLACE/$VERSION/" tmp/manifest.webapp
-sed -i -e "s/$VERSION_TO_REPLACE/$VERSION/" tmp/www/index.html
+sed -i -e "s/$VERSION_TO_REPLACE/$VERSION/" tmp/service-worker.js
+sed -i -e "s/$VERSION_TO_REPLACE/$VERSION/" tmp/www/js/app.js
 
 mkdir -p build
 rm -rf build/*

diff --git a/scripts/test_duplicate_values.sh b/scripts/test_duplicate_values.sh
@@ -0,0 +1,30 @@
+#!/bin/bash
+
+# This bash script tests whether app.js and service-worker.js have the same value for appVersion and for ASSETS_CACHE.
+
+# Find the repo dir (it's the parent of the dir that contains this script)
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
+REPO_DIR="$(dirname "$SCRIPT_DIR")"
+
+# Check values in files
+cd $REPO_DIR
+SW_VERSION="$(grep 'appVersion\s=' service-worker.js | sed -E "s/[^[:digit:]]+([^\"']+).*/\1/")"
+APP_VERSION="$(grep 'params\[.appVersion' www/js/app.js | sed -E "s/[^[:digit:]]+([^\"']+).*/\1/")"
+echo "service-worker.js : $SW_VERSION"
+echo "app.js            : $APP_VERSION"
+if [ $SW_VERSION == $APP_VERSION ] ; then
+    echo "Both values of 'appVersion' are identical"
+else
+    echo "ERROR! Please ensure values for 'appVersion' in app.js and service-worker.js are identical!"
+    exit 1
+fi
+SW_ASSETS_CACHE="$( grep 'ASSETS_CACHE\s=' service-worker.js | sed -E "s/[^']+'([^']+).*/\1/")"
+APP_ASSETS_CACHE="$(grep 'ASSETS_CACHE\s=' www/js/app.js | sed -E "s/[^']+'([^']+).*/\1/")"
+echo "service-worker.js : $SW_ASSETS_CACHE"
+echo "app.js            : $APP_ASSETS_CACHE"
+if [ $SW_ASSETS_CACHE == $APP_ASSETS_CACHE ] ; then
+    echo "Both values of 'ASSETS_CACHE' are identical"
+else
+    echo "ERROR! Please ensure values for 'ASSETS_CACHE' in app.js and service-worker.js are identical!"
+    exit 1
+fi
diff --git a/scripts/test_pwa_server.sh b/scripts/test_pwa_server.sh
@@ -0,0 +1,14 @@
+#!/bin/bash
+
+# This bash script tests whether PWAServer has been set correctly in app.js
+
+SERVER=$(grep -E '^[^/]+params.+?PWAServer.+?http' ./www/js/app.js)
+echo "The PWAServer is set to $SERVER"
+SERVER_COUNT=$(grep -o 'PWAServer' <<< "$SERVER" | wc -l)
+echo "$SERVER_COUNT server(s) are set in app.js"
+if [[ $SERVER_COUNT > 1 || ! $SERVER =~ 'kiwix.org' ]]; then
+  echo "WARNING: The value of params['PWAServer'] is incorrectly set in app.js!"
+  exit 1
+else
+  echo "PWAServer is correctly set in app.js"
+fi