diff --git a/.github/workflows/pwabuilder-main.yml b/.github/workflows/pwabuilder-main.yml
index 7dc1529d3..dba6833aa 100644
--- a/.github/workflows/pwabuilder-main.yml
+++ b/.github/workflows/pwabuilder-main.yml
@@ -70,6 +70,13 @@ jobs:
generate_release:
runs-on: ubuntu-latest
+ permissions:
+ actions: read
+ contents: write
+ deployments: write
+ packages: write
+ pull-requests: read
+
name: Generate Release including changelog
steps:
- uses: "marvinpinto/action-automatic-releases@latest"
diff --git a/apps/blog/src/includes/author-profile.njk b/apps/blog/src/includes/author-profile.njk
index 12b2103c8..4759a503d 100644
--- a/apps/blog/src/includes/author-profile.njk
+++ b/apps/blog/src/includes/author-profile.njk
@@ -47,6 +47,7 @@
.tagline {
margin: 0;
+ text-align: center;
}
.ap-twitter {
diff --git a/apps/blog/src/posts/announcing-app-capabilities/announcing-app-capabilities.md b/apps/blog/src/posts/announcing-app-capabilities/announcing-app-capabilities.md
index 5697aca42..20e254dae 100644
--- a/apps/blog/src/posts/announcing-app-capabilities/announcing-app-capabilities.md
+++ b/apps/blog/src/posts/announcing-app-capabilities/announcing-app-capabilities.md
@@ -4,7 +4,7 @@ title: Announcing the App Capabilities Card
excerpt: Introducing the new App Capabilities section of the PWABuilder Report Card page
description: Introducing the new App Capabilities section of the PWABuilder Report Card page
date: 2023-10-16
-updatedDate: 2023-10-16
+updatedDate: 2024-01-26
trending: true
featured: true
image: posts/announcing-app-capabilities/hero.png
@@ -15,7 +15,7 @@ author:
twitter: jaylynsatwork
title: Software Engineer
tagline: East Coast based Software Engineer who loves to cooking, gaming, and playing volleyball!
- image: /author_images/justin_image.jpg
+ image: /author_images/jaylyn_image.jpg
tags:
- post
- PWABuilder.com
diff --git a/apps/blog/src/posts/goodnotes-showcase/goodnotes-showcase.md b/apps/blog/src/posts/goodnotes-showcase/goodnotes-showcase.md
index 951091ab5..77086696c 100644
--- a/apps/blog/src/posts/goodnotes-showcase/goodnotes-showcase.md
+++ b/apps/blog/src/posts/goodnotes-showcase/goodnotes-showcase.md
@@ -4,7 +4,7 @@ title: How GoodNotes uses web APIs to create a great PWA for Windows
excerpt: Let's explore how GoodNotes uses web APIs to make their PWA great on Windows, especially on devices that support pen and touch input.
description: In this blog post, we will explore how GoodNotes uses web APIs to make their PWA great on Windows, especially on devices that support pen and touch input.
date: 2024-01-24
-updatedDate: 2024-01-24
+updatedDate: 2024-01-25
trending: true
featured: true
image: posts/goodnotes-showcase/person-drawing.jpg
@@ -12,7 +12,10 @@ isPost: true
backUrl: '/'
author:
name: Justin Willis
- title: PWABuilder SWE
+ twitter: Justinwillis96
+ title: Software Engineer
+ tagline: When i'm not developing PWAs you can find me hiking, gaming or playing with my pets!
+ image: /author_images/justin_image.jpg
tags:
- post
- PWA
diff --git a/apps/blog/src/posts/macos-pwa-install/macos-pwa-install.md b/apps/blog/src/posts/macos-pwa-install/macos-pwa-install.md
new file mode 100644
index 000000000..2dd1e95e5
--- /dev/null
+++ b/apps/blog/src/posts/macos-pwa-install/macos-pwa-install.md
@@ -0,0 +1,88 @@
+---
+layout: post
+title: Web Apps on macOS Sonoma got a proper install experience
+excerpt: How we detected Web Apps availability on macOS platform.
+description: How we enabled Sonoma's Web Apps support for PWA Install component.
+date: 2024-02-01
+updatedDate: 2024-02-01
+trending: true
+featured: true
+image: posts/macos-pwa-install/pic-1-wide.jpg
+isPost: true
+backUrl: '/'
+author:
+ name: Gleb Khmyznikov
+ twitter: khmyznikov
+ title: Software Engineer
+ image: /author_images/gleb_image.jpg
+ tagline: Eastern Europe based Software Engineer who loves PC hardware, gaming handhelds, classic cars and web technologies.
+tags:
+ - post
+ - macOS
+ - Web Apps
+---
+
+
+
+ Installing PWA's on macOS Safari
+
+
+### Backstory
+
+With the release of macOS Sonoma, we are excited to see Apple making a big step forward in supporting Web Apps in general and Progressive Web Applications specifically. This is great news for developers and users alike, as it means that PWAs will be more accessible on Mac than ever before.
+
+Unfortunately, there is no built-in browsers experiences for prompting PWA installation on Safari. This is where the [pwa-install](https://github.com/khmyznikov/pwa-install) component comes in. It's a simple, lightweight, framework agnostic web-component that provides a native-like installation experience for PWAs on iOS/iPadOS and now on macOS Sonoma. It's easy to use and works with any PWA or simple Web App, so you can get started right away.
+
+
+
+Why does easy installation matter? Progressive Web Applications offer a lot of flexibility and user engagement. One of the main selling points is their app-like presence on your device. However, not every browser has made it easy to install them. This update is set to make the installation of PWAs feel more native, especially for users on macOS Safari.
+
+### Implementation
+
+But how it was archived? Safari on macOS Sonoma supports the Web App Manifest, which is a JSON file that describes the Web App metadata. This includes the app's name, description, icons, and more. The pwa-install component uses this information to create a native-like installation experience for PWAs on iOS/iPadOS and macOS Sonoma.
+
+But here's a catch: Safari on macOS doesn't provide any API to detect Web Apps availability. So, we used a workaround to detect Web Apps availability on macOS platform.
+
+[Here's how it works](https://github.com/khmyznikov/pwa-install/blob/cf73d0c382fd87aa6b5a5cc40f0474150efe3487/src/utils.ts#L24):
+
+```js
+static isAppleDesktop(): boolean {
+ // check if it's a mac
+ const userAgent = navigator.userAgent.toLowerCase();
+ if (navigator.maxTouchPoints || !userAgent.match(/macintosh/))
+ return false;
+ // check safari version >= 17
+ const version = /version\/(\d{2})\./.exec(userAgent)
+ if (!version || !version[1] || !(parseInt(version[1]) >= 17))
+ return false;
+ // hacky way to detect Sonoma
+ const audioCheck = document.createElement('audio').canPlayType('audio/wav; codecs="1"') ? true : false;
+ const webGLCheck = new OffscreenCanvas(1, 1).getContext('webgl') ? true : false;
+
+ return audioCheck && webGLCheck;
+}
+```
+When we combine the user agent and Sonoma specific Safari feature detections, we can detect Web Apps availability on macOS platform. We run previous and current macOS version with latest Safari 17 side by side and with help of [tool like this](https://browserleaks.com/features), we were able to detect the difference we can use.
+
+### Installation
+
+This isn't just about Safari on macOS. The component keeps the user experience consistent no matter the device.
+
+| iOS | | Android |
+| --- | --- | --- |
+||||
+
+
+
+Adding this component to your project is simple. The [readme](https://github.com/khmyznikov/pwa-install?tab=readme-ov-file#install) includes a one-line npm install command, import instructions, and basic HTML for adding the component to an app. Here is a live [demo](https://khmyznikov.com/pwa-install/) to show you exactly how it should look and work.
+Most modern frameworks can use the component as a web component. React polyfill is included.
+
+What's coming soon for PWA installation? Samsung Internet and Firefox Mobile are the next browsers to get the pwa-install component. This will make it even easier for users on Android devices to install PWAs from their favorite browsers.
+
+### Conclusion
+
+The pwa-install component aims to improve the install process for PWAs, with the most recent update making the experience feel more native for Safari users on the new macOS Sonoma. Whether you're aiming to reach macOS, iOS, or wider audiences, this component can play for you a vital role in creating a seamless PWA installation experience.
+
+Jump into the [demo](https://khmyznikov.com/pwa-install/) to see the new features for yourself. If you like the progress, feel free to [contribute](https://github.com/khmyznikov/pwa-install) features or translations through pull requests.
diff --git a/apps/blog/src/posts/macos-pwa-install/pic-1-wide.jpg b/apps/blog/src/posts/macos-pwa-install/pic-1-wide.jpg
new file mode 100644
index 000000000..99b942f07
Binary files /dev/null and b/apps/blog/src/posts/macos-pwa-install/pic-1-wide.jpg differ
diff --git a/apps/blog/src/posts/macos-pwa-install/pic-1.jpg b/apps/blog/src/posts/macos-pwa-install/pic-1.jpg
new file mode 100644
index 000000000..f537890ad
Binary files /dev/null and b/apps/blog/src/posts/macos-pwa-install/pic-1.jpg differ
diff --git a/apps/blog/src/posts/macos-pwa-install/pic-2.jpg b/apps/blog/src/posts/macos-pwa-install/pic-2.jpg
new file mode 100644
index 000000000..58190ca49
Binary files /dev/null and b/apps/blog/src/posts/macos-pwa-install/pic-2.jpg differ
diff --git a/apps/blog/src/posts/macos-pwa-install/pic-3.jpg b/apps/blog/src/posts/macos-pwa-install/pic-3.jpg
new file mode 100644
index 000000000..e34f8fb88
Binary files /dev/null and b/apps/blog/src/posts/macos-pwa-install/pic-3.jpg differ
diff --git a/apps/blog/src/posts/macos-pwa-install/pic-4.jpg b/apps/blog/src/posts/macos-pwa-install/pic-4.jpg
new file mode 100644
index 000000000..4a8a3e979
Binary files /dev/null and b/apps/blog/src/posts/macos-pwa-install/pic-4.jpg differ
diff --git a/apps/blog/src/posts/macos-pwa-install/pic-5.jpg b/apps/blog/src/posts/macos-pwa-install/pic-5.jpg
new file mode 100644
index 000000000..398ed152b
Binary files /dev/null and b/apps/blog/src/posts/macos-pwa-install/pic-5.jpg differ
diff --git a/apps/blog/src/posts/macos-pwa-install/pic-6.jpg b/apps/blog/src/posts/macos-pwa-install/pic-6.jpg
new file mode 100644
index 000000000..10666d179
Binary files /dev/null and b/apps/blog/src/posts/macos-pwa-install/pic-6.jpg differ
diff --git a/apps/blog/src/posts/macos-pwa-install/pic-7.jpg b/apps/blog/src/posts/macos-pwa-install/pic-7.jpg
new file mode 100644
index 000000000..813493045
Binary files /dev/null and b/apps/blog/src/posts/macos-pwa-install/pic-7.jpg differ
diff --git a/apps/blog/src/posts/macos-pwa-install/video.webm b/apps/blog/src/posts/macos-pwa-install/video.webm
new file mode 100644
index 000000000..f281e8e6d
Binary files /dev/null and b/apps/blog/src/posts/macos-pwa-install/video.webm differ
diff --git a/apps/pwabuilder/package-lock.json b/apps/pwabuilder/package-lock.json
index 1b2580be1..d0a9469ad 100644
--- a/apps/pwabuilder/package-lock.json
+++ b/apps/pwabuilder/package-lock.json
@@ -56,7 +56,7 @@
"rimraf": "^3.0.2",
"ts-node": "^10.1.0",
"tslib": "^2.1.0",
- "typescript": "^4.6.3",
+ "typescript": "^5.3.3",
"vite": "^2.9.0"
}
},
@@ -14657,16 +14657,16 @@
}
},
"node_modules/typescript": {
- "version": "4.9.5",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
- "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+ "version": "5.3.3",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
+ "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
"devOptional": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
- "node": ">=4.2.0"
+ "node": ">=14.17"
}
},
"node_modules/typical": {
@@ -26507,9 +26507,9 @@
}
},
"typescript": {
- "version": "4.9.5",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
- "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+ "version": "5.3.3",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
+ "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
"devOptional": true
},
"typical": {
diff --git a/apps/pwabuilder/package.json b/apps/pwabuilder/package.json
index 7275a9034..4f6858b36 100644
--- a/apps/pwabuilder/package.json
+++ b/apps/pwabuilder/package.json
@@ -65,7 +65,7 @@
"rimraf": "^3.0.2",
"ts-node": "^10.1.0",
"tslib": "^2.1.0",
- "typescript": "^4.6.3",
+ "typescript": "^5.3.3",
"vite": "^2.9.0"
},
"prettier": {
diff --git a/apps/pwabuilder/src/script/pages/app-report.ts b/apps/pwabuilder/src/script/pages/app-report.ts
index bd1a7bea8..6d4f3871e 100644
--- a/apps/pwabuilder/src/script/pages/app-report.ts
+++ b/apps/pwabuilder/src/script/pages/app-report.ts
@@ -133,6 +133,7 @@ export class AppReport extends LitElement {
@state() showConfirmationModal: boolean = false;
@state() thingToAdd: string = "";
@state() retestConfirmed: boolean = false;
+ @state() readdDenied: boolean = false;
@state() createdManifest: boolean = false;
@state() manifestContext: ManifestContext | undefined;
@@ -2899,6 +2900,29 @@ export class AppReport extends LitElement {
}
}
+ renderReaddDialog() {
+ var dialogContent = html`
+
Have you added your new ${this.thingToAdd} to your site?
+
+ this.retest(true)}> Yes
+ this.readdDenied = true}> No
+