Add pwa files.

adeFuLoDgu · Oct 8, 2024 · e3e384c · e3e384c
1 parent d021662
commit e3e384c
Show file tree

Hide file tree

Showing 11 changed files with 313 additions and 1 deletion.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -15,7 +15,7 @@ on:
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
-  contents: read
+  contents: write
   pages: write
   id-token: write
 
@@ -33,6 +33,36 @@ jobs:
       url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
     steps:
+      - name: Checkout the PWA tool repo
+        uses: actions/checkout@v4
+        with:
+          repository: RainEggplant/noname-pwa
+          submodules: false
+      - name: Checkout current repo
+        run: |
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+          git clone ${{ github.server_url }}/${{ github.repository }}.git noname
+          cd noname
+      - uses: actions/setup-node@v4
+        with:
+          cache: 'yarn'
+      - name: Generate new `sw.js` for pwa
+        run: |
+          yarn install --frozen-lockfile --immutable
+          node ./node_modules/gulp/bin/gulp.js build
+          cd noname
+          git add .
+          if [ -n "$(git status --porcelain)" ]; then
+            git commit -m "Update sw.js"
+          fi
+      - name: Push to origin
+        run: |
+          cd noname
+          origin_url=$(echo ${{ github.server_url }} | sed "s/https:\/\//https:\/\/${{ github.repository_owner }}:${{ github.token }}@/")
+          origin_url=$origin_url/${{ github.repository }}.git
+          git remote set-url origin ${origin_url}
+          git push origin master
       - name: Checkout
         uses: actions/checkout@v4
       - name: Setup Pages

diff --git a/assets/exit-android.html b/assets/exit-android.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="UTF-8">
+<link rel="manifest" href="../manifest.json">
+<meta name="viewport" content="width=device-width, user-scalable=no, viewport-fit=cover">
+<title>无名杀</title>
+<link rel="stylesheet" href="../layout/default/layout.css">
+<link rel="stylesheet" href="../theme/woodden/style.css">
+<body>
+    <div style="height: 100%; width: 100%; display: table; text-align: center;">
+        <p style="display: table-cell; vertical-align: middle; font-size: 4vw;">
+            请按返回键退出
+        </p>
+    </div>
+</body>
+</html>
diff --git a/assets/exit-ios.html b/assets/exit-ios.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="UTF-8">
+<link rel="manifest" href="../manifest.json">
+<meta name="viewport" content="width=device-width, user-scalable=no, viewport-fit=cover">
+<title>无名杀</title>
+<link rel="stylesheet" href="../layout/default/layout.css">
+<link rel="stylesheet" href="../theme/woodden/style.css">
+<body>
+    <div style="height: 100%; width: 100%; display: table; text-align: center;">
+        <p style="display: table-cell; vertical-align: middle; font-size: 4vw;">
+            已退出
+        </p>
+    </div>
+</body>
+</html>
diff --git a/assets/meta/favicon-dark.png b/assets/meta/favicon-dark.png
diff --git a/assets/meta/favicon.svg b/assets/meta/favicon.svg
diff --git a/assets/meta/icon-192.png b/assets/meta/icon-192.png
diff --git a/assets/meta/icon-512.png b/assets/meta/icon-512.png
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
 	<meta name="apple-mobile-web-app-capable" content="yes" />
 	<meta name="viewport" content="user-scalable=no, viewport-fit=cover" />
 	<title>无名杀</title>
+	<script src="pwa.js"></script>
 	<script>
 		if (
 			typeof window.require == "function" &&

diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,23 @@
+{
+  "name": "无名杀",
+  "icons": [
+    {
+      "src": "assets/meta/icon-192.png",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/meta/icon-512.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "maskable any"
+    }
+  ],
+  "start_url": ".",
+  "background_color": "#3c3c3c",
+  "display": "fullscreen",
+  "theme_color": "#3c3c3c",
+  "description": "无名杀",
+  "orientation": "landscape"
+}
diff --git a/pwa.js b/pwa.js
@@ -0,0 +1,127 @@
+// register service worker
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker
+    .register("sw.js")
+    .then(function (registration) {
+      console.log(
+        "Service Worker registration successful with scope: ",
+        registration.scope
+      );
+    })
+    .catch(function (err) {
+      console.log("Service Worker registration failed: ", err);
+    });
+}
+
+// handle back button (see https://stackoverflow.com/a/56217749 )
+function isFullscreenOrStandalone() {
+  const isFullscreen =
+    !!navigator.fullscreen ||
+    window.matchMedia("(display-mode: fullscreen)").matches;
+  const isStandalone =
+    !!navigator.standalone ||
+    window.matchMedia("(display-mode: standalone)").matches;
+  return isFullscreen || isStandalone;
+}
+
+function isAndroid() {
+  return navigator.userAgent.toLowerCase().indexOf("android") > -1;
+}
+
+function isIOS() {
+  return (
+    [
+      "iPad Simulator",
+      "iPhone Simulator",
+      "iPod Simulator",
+      "iPad",
+      "iPhone",
+      "iPod",
+    ].includes(navigator.platform) ||
+    // iPad on iOS 13 detection
+    (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+  );
+}
+
+function defineNotificationTipStyle() {
+  const css = `#screen-bottom {
+  display: none;
+  position: fixed;
+  bottom: 0px;
+  width: 100%;
+  text-align: center;
+  z-index: 99;
+}
+
+#screen-bottom.show {
+  display: block;
+}
+
+#notification-tip {
+  display: inline-block;
+  position: static;
+  margin-bottom: 7%;
+  padding: 15px;
+  border-radius: 10px;
+  font-size: 20px;
+  text-align: center;
+  text-shadow: none;
+  color: black;
+  background: white;
+  opacity: 0.9;
+  visibility: hidden;
+}
+
+#notification-tip.show {
+  visibility: visible;
+  animation: notification-tip-fadeout 0.6s 1.4s forwards;
+}
+
+@keyframes notification-tip-fadeout {
+  from {opacity: 0.9;}
+  to {opacity: 0;}
+}`;
+
+  const style = document.createElement("style");
+  document.head.appendChild(style);
+  style.appendChild(document.createTextNode(css));
+}
+
+function handleBackEvents() {
+  if (window.performance.getEntriesByType("navigation")[0].type == "navigate") {
+    // only push history when navigating rather than refreshing
+    window.history.pushState({ name: "noname-prehome" }, "");
+  }
+  document.addEventListener(
+    "DOMContentLoaded",
+    function () {
+      // create notification tip element
+      const div_bottom = document.createElement("div");
+      div_bottom.id = "screen-bottom";
+      const div_tip = document.createElement("div");
+      div_tip.id = "notification-tip";
+      div_tip.appendChild(document.createTextNode("再按一次返回键退出"));
+      div_bottom.appendChild(div_tip);
+      document.body.appendChild(div_bottom);
+
+      // handle back button
+      window.onpopstate = function (e) {
+        div_bottom.classList.add("show");
+        div_tip.classList.add("show"); // show the notification tip
+        setTimeout(() => {
+          div_bottom.classList.remove("show");
+          div_tip.classList.remove("show"); // hide the notification tip
+          window.history.pushState({ name: "noname-prehome" }, "");
+        }, 2000);
+      };
+    },
+    false
+  );
+}
+
+var isAndroidApp = isAndroid() && isFullscreenOrStandalone();
+var isIOSApp = isIOS() && isFullscreenOrStandalone();
+if (isAndroidApp) {
+  defineNotificationTipStyle();
+  handleBackEvents();
+}
diff --git a/sw.js b/sw.js