Skip to content

Commit 05c81e9

Browse files
SQL-MisterMagooSQL-MisterMagoo
committed
Moved the "Installable PWA alert" to it's own template so we can have alternates
1 parent ec3e1a8 commit 05c81e9

File tree

5 files changed

+78
-67
lines changed

5 files changed

+78
-67
lines changed

‎Blazor.PWA.MSBuild.Tasks/Blazor.PWA.MSBuild.Tasks.csproj

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ I will add more network caching strategies, but for now it has just one - cache
6969
</ItemGroup>
7070

7171
<ItemGroup>
72+
<None Remove="Templates\ServiceWorker\sw_register-installable-banner.template.js" />
7273
<None Remove="Templates\ServiceWorker\sw_register-update-alert.template.js" />
7374
</ItemGroup>
7475

‎Blazor.PWA.MSBuild.Tasks/Templates/ServiceWorker/sw_register-installable-banner.template.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+

2+
function showAddToHomeScreen() {
3+
var pwaInstallPrompt = document.createElement('div');
4+
var pwaInstallButton = document.createElement('button');
5+
var pwaCancelButton = document.createElement('button');
6+
7+
pwaInstallPrompt.id = 'pwa-install-prompt';
8+
pwaInstallPrompt.style.position = 'absolute';
9+
pwaInstallPrompt.style.bottom = '1rem';
10+
pwaInstallPrompt.style.left = '1rem';
11+
pwaInstallPrompt.style.right = '1rem';
12+
pwaInstallPrompt.style.padding = '0.3rem';
13+
pwaInstallPrompt.style.display = 'flex';
14+
pwaInstallPrompt.style.backgroundColor = 'lightslategray';
15+
pwaInstallPrompt.style.color = 'white';
16+
pwaInstallPrompt.style.fontFamily = 'sans-serif';
17+
pwaInstallPrompt.style.fontSize = '1.2rem';
18+
pwaInstallPrompt.style.borderRadius = '4px';
19+
20+
pwaInstallButton.style.marginLeft = 'auto';
21+
pwaInstallButton.style.width = '4em';
22+
pwaInstallButton.style.backgroundColor = '#00796B';
23+
pwaInstallButton.style.color = 'white';
24+
pwaInstallButton.style.border = 'none';
25+
pwaInstallButton.style.borderRadius = '25px';
26+
27+
pwaCancelButton.style.marginLeft = '0.3rem';
28+
pwaCancelButton.style.width = '4em';
29+
pwaCancelButton.style.backgroundColor = '#9d0d0d';
30+
pwaCancelButton.style.color = 'white';
31+
pwaCancelButton.style.border = 'none';
32+
pwaCancelButton.style.borderRadius = '25px';
33+
34+
pwaInstallPrompt.innerText = 'Add to your homescreen?';
35+
pwaInstallButton.innerText = 'ok';
36+
pwaCancelButton.innerText = 'no';
37+
38+
pwaInstallPrompt.appendChild(pwaInstallButton);
39+
pwaInstallPrompt.appendChild(pwaCancelButton);
40+
document.body.appendChild(pwaInstallPrompt);
41+
42+
pwaInstallButton.addEventListener('click', addToHomeScreen);
43+
pwaCancelButton.addEventListener('click', hideAddToHomeScreen);
44+
setTimeout(hideAddToHomeScreen, 10000);
45+
}
46+
47+
function hideAddToHomeScreen() {
48+
var pwa = document.getElementById('pwa-install-prompt');
49+
if (pwa) document.body.removeChild(pwa);
50+
}
51+
52+
function addToHomeScreen(s, e) {
53+
hideAddToHomeScreen();
54+
if (window.PWADeferredPrompt) {
55+
window.PWADeferredPrompt.prompt();
56+
window.PWADeferredPrompt.userChoice
57+
.then(function (choiceResult) {
58+
window.PWADeferredPrompt = null;
59+
});
60+
}
61+
}

‎Blazor.PWA.MSBuild.Tasks/Templates/ServiceWorker/sw_register.template.js

Lines changed: 0 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -33,64 +33,3 @@ window.addEventListener('beforeinstallprompt', function (e) {
3333
showAddToHomeScreen();
3434

3535
});
36-
37-
function showAddToHomeScreen() {
38-
var pwaInstallPrompt = document.createElement('div');
39-
var pwaInstallButton = document.createElement('button');
40-
var pwaCancelButton = document.createElement('button');
41-
42-
pwaInstallPrompt.id = 'pwa-install-prompt';
43-
pwaInstallPrompt.style.position = 'absolute';
44-
pwaInstallPrompt.style.bottom = '1rem';
45-
pwaInstallPrompt.style.left = '1rem';
46-
pwaInstallPrompt.style.right = '1rem';
47-
pwaInstallPrompt.style.padding = '0.3rem';
48-
pwaInstallPrompt.style.display = 'flex';
49-
pwaInstallPrompt.style.backgroundColor = 'lightslategray';
50-
pwaInstallPrompt.style.color = 'white';
51-
pwaInstallPrompt.style.fontFamily = 'sans-serif';
52-
pwaInstallPrompt.style.fontSize = '1.2rem';
53-
pwaInstallPrompt.style.borderRadius = '4px';
54-
55-
pwaInstallButton.style.marginLeft = 'auto';
56-
pwaInstallButton.style.width = '4em';
57-
pwaInstallButton.style.backgroundColor = '#00796B';
58-
pwaInstallButton.style.color = 'white';
59-
pwaInstallButton.style.border = 'none';
60-
pwaInstallButton.style.borderRadius = '25px';
61-
62-
pwaCancelButton.style.marginLeft = '0.3rem';
63-
pwaCancelButton.style.width = '4em';
64-
pwaCancelButton.style.backgroundColor = '#9d0d0d';
65-
pwaCancelButton.style.color = 'white';
66-
pwaCancelButton.style.border = 'none';
67-
pwaCancelButton.style.borderRadius = '25px';
68-
69-
pwaInstallPrompt.innerText = 'Add to your homescreen?';
70-
pwaInstallButton.innerText = 'ok';
71-
pwaCancelButton.innerText = 'no';
72-
73-
pwaInstallPrompt.appendChild(pwaInstallButton);
74-
pwaInstallPrompt.appendChild(pwaCancelButton);
75-
document.body.appendChild(pwaInstallPrompt);
76-
77-
pwaInstallButton.addEventListener('click', addToHomeScreen);
78-
pwaCancelButton.addEventListener('click', hideAddToHomeScreen);
79-
setTimeout(hideAddToHomeScreen, 10000);
80-
}
81-
82-
function hideAddToHomeScreen() {
83-
var pwa = document.getElementById('pwa-install-prompt');
84-
if (pwa) document.body.removeChild(pwa);
85-
}
86-
87-
function addToHomeScreen(s, e) {
88-
hideAddToHomeScreen();
89-
if (window.PWADeferredPrompt) {
90-
window.PWADeferredPrompt.prompt();
91-
window.PWADeferredPrompt.userChoice
92-
.then(function (choiceResult) {
93-
window.PWADeferredPrompt = null;
94-
});
95-
}
96-
}

‎Blazor.PWA.MSBuild.Tasks/build/BlazorPWA.MSBuild.ServiceWorkerRegister.targets

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,21 @@
2626
<ServiceWorkerRegisterTemplatePath Condition="'$(ServiceWorkerRegisterTemplatePath)' == ''">$(MSBuildThisFileDirectory)..\Templates\ServiceWorker\</ServiceWorkerRegisterTemplatePath>
2727
<!-- The file that contains template code for the service worker register file -->
2828
<ServiceWorkerRegisterTemplate Condition="'$(ServiceWorkerRegisterTemplate)' == ''">$(ServiceWorkerRegisterTemplatePath)sw_register.template.js</ServiceWorkerRegisterTemplate>
29+
<!-- Update available alert type -->
30+
<ServiceWorkerRegisterUpdateType Condition="'$(ServiceWorkerRegisterUpdateType)'==''">update-alert</ServiceWorkerRegisterUpdateType>
31+
<!-- The file that contains template code for the service worker "update available" -->
32+
<ServiceWorkerRegisterUpdateTemplate Condition="'$(ServiceWorkerRegisterUpdateTemplate)' == ''">$(ServiceWorkerRegisterTemplatePath)sw_register-$(ServiceWorkerRegisterUpdateType).template.js</ServiceWorkerRegisterUpdateTemplate>
33+
<!-- Update available alert type -->
34+
<ServiceWorkerRegisterInstallableType Condition="'$(ServiceWorkerRegisterInstallableType)'==''">installable-banner</ServiceWorkerRegisterInstallableType>
2935
<!-- The file that contains template code for the service worker "update available" -->
30-
<ServiceWorkerRegisterUpdateNotificationTemplate Condition="'$(ServiceWorkerRegisterUpdateNotificationTemplate)' == ''">$(ServiceWorkerRegisterTemplatePath)sw_register-update-alert.template.js</ServiceWorkerRegisterUpdateNotificationTemplate>
36+
<ServiceWorkerRegisterInstallableTemplate Condition="'$(ServiceWorkerRegisterInstallableTemplate)' == ''">$(ServiceWorkerRegisterTemplatePath)sw_register-$(ServiceWorkerRegisterInstallableType).template.js</ServiceWorkerRegisterInstallableTemplate>
3137
</PropertyGroup>
3238

3339
<PropertyGroup Label="Implementation">
3440
<!-- event fired by browser when the service worker has installed ** probably never change **-->
3541
<ServiceWorkerInstalledEvent Condition="'$(ServiceWorkerInstalledEvent)'==''">installed</ServiceWorkerInstalledEvent>
3642
<!-- Text to display when an update is available -->
3743
<ServiceWorkerUpdateAlertText Condition="'$(ServiceWorkerUpdateAlertText)'==''">Update available. Reload the page when convenient.</ServiceWorkerUpdateAlertText>
38-
<!-- Update available alert type -->
39-
<ServiceWorkerUpdateNotificationType Condition="'$(ServiceWorkerUpdateNotificationType)'==''">update-alert</ServiceWorkerUpdateNotificationType>
4044
<!-- Setup the declarations for the Service Worker Register -->
4145
<ServiceWorkerRegisterConstants Condition="'$(ServiceWorkerConstants)' == ''">
4246
const serviceWorkerFileName = '$(ServiceWorkerBaseURL)$(ServiceWorkerFileName)'%3B;
@@ -47,7 +51,8 @@
4751
</PropertyGroup>
4852
<ItemGroup>
4953
<ServiceWorkerRegisterTemplateLines Include="$([System.IO.File]::ReadAllText($(ServiceWorkerRegisterTemplate)))"/>
50-
<ServiceWorkerRegisterTemplateLines Include="$([System.IO.File]::ReadAllText($(ServiceWorkerRegisterUpdateNotificationTemplate)))"/>
54+
<ServiceWorkerRegisterTemplateLines Include="$([System.IO.File]::ReadAllText($(ServiceWorkerRegisterUpdateTemplate)))"/>
55+
<ServiceWorkerRegisterTemplateLines Include="$([System.IO.File]::ReadAllText($(ServiceWorkerRegisterInstallableTemplate)))"/>
5156
</ItemGroup>
5257
<WriteLinesToFile
5358
File="$(WWWRoot)$(ServiceWorkerRegisterFileName)"

‎CHANGELOG.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
#### 09/08/2019
1+
#### 10/08/2019
22

33
- Added new **Property** **`ServiceWorkerUpdateAlertText`** - used to change the default text in the "Update available alert".
4-
- Added new **Property** **`ServiceWorkerRegisterUpdateNotificationTemplate`** - The name of the template file for the "update available" event.
4+
- Added new **Property** **`ServiceWorkerRegisterUpdateType`** - used to select the "Update available alert" type.
5+
- Added new **Property** **`ServiceWorkerRegisterUpdateTemplate`** - The name of the template file for the "update available" event.
56
- Moved the "Updated available alert" to it's own template so we can have alternates
7+
- Added new **Property** **`ServiceWorkerRegisterInstallableType`** - used to select the "Installable PWA alert" type.
8+
- Added new **Property** **`ServiceWorkerRegisterInstallableTemplate`** - The name of the template file for the "Installable PWA alert" event.
9+
- Moved the "Update available alert" to it's own template so we can have alternates
10+
- Moved the "Installable PWA alert" to it's own template so we can have alternates
611
- Tidied up default install alert
712

813
#### 08/08/2019 Initial Release

0 commit comments

Comments
 (0)