https://whatpwacando.today/src/templates/declarative-web-push.js

1import '../elements/code-snippet.js';
2
3export const template = `
4<div class="view next-screen" id="active-demo" data-ref="declarative-web-push-demo">
5  <header class="app-bar" data-ref="active-demo-button">
6    <a class="back"><i class="material-icons" translate="no">keyboard_backspace</i></a>
7    <i class="material-icons wifi-icon" translate="no">wifi_off</i>
8  </header>
9  
10  <div class="content">
11    <h2 data-ref="active-demo-header">Declarative Web Push</h2>
12    
13    <p class="no-support">This feature is not (yet) supported on your device</p>
14    <p class="not-installed">This feature is only available on installed web apps</p>
15  
16    <p>
17      Declarative Web Push enables web apps to receive and display push notifications without a service worker, even 
18      when the app is in the background or not running at all. 
19    </p>
20
21    <p>
22      The benefit of this approach is that the web app doesn't have to take care of showing the notification so it will still be displayed, 
23      even when the app doesn't implement functionality to display it or when there is an error in this code.
24    </p>
25    
26    <h3>Demo</h3>
27    
28    <p>
29      Click the "Subscribe" button below to subscribe to notifications. Once subscribed, you will send a notification to 
30      yourself by filling out the form below. You can specify a delay in seconds so you can schedule a notification and 
31      close the app in the meantime to check it is delivered while the app is not running.
32    </p>
33    
34    <div class="buttons">
35      <button id="subscribe" type="button">Subscribe</button>
36      <button id="unsubscribe" type="button">Unsubscribe</button>
37    </div>
38    
39    <p>
40      You can send a notification through the form below.
41    </p>
42    
43    <label>
44      Title
45      <input type="text" id="title" value="What PWA Can Do Today">
46    </label>
47      
48    <label>
49      Notification
50      <input type="text" id="message" value="Hi, this is a notification from Declarative Web Push">
51    </label>
52      
53    <label>
54      Delay (max 5 seconds for demo purposes)
55      <input type="number" id="delay" value="0">
56    </label>
57        
58    <button id="send" type="button">Send</button>
59    
60    <code-snippet lang="js">
61const pushSubscription = await pushManager.getSubscription();
62
63const base64UrlToUint8Array = base64UrlData => {
64  const padding = '='.repeat((4 - base64UrlData.length % 4) % 4);
65  const base64 = (base64UrlData + padding)
66  .replace(/\-/g, '+')
67  .replace(/_/g, '/');
68
69  const rawData = atob(base64);
70  const buffer = new Uint8Array(rawData.length);
71
72  for(let i = 0; i < rawData.length; ++i) {
73    buffer[i] = rawData.charCodeAt(i);
74  }
75
76  return buffer;
77};
78
79const subscribeToPushMessages = (publicKey) => pushManager.subscribe({
80  userVisibleOnly: true,
81  applicationServerKey: base64UrlToUint8Array(publicKey)
82});
83
84const unsubscribeFromPushMessages = subscription => subscription.unsubscribe();
85
86const getPushSubscription = () => pushManager.getSubscription();
87
88const apiUrl = '...';
89
90const sendPushMessage = async ({title, message, delay}) => {
91  const pushSubscription = await getPushSubscription();
92  const delayTime = !Number.isInteger(parseInt(delay, 10)) ? 0 :
93    delay > 5 ? 5 : delay;
94
95  fetch(apiUrl, {
96    method: 'POST',
97    headers: {
98      'Content-Type': 'application/json'
99    },
100    body: JSON.stringify({
101      pushSubscription,
102      title,
103      message,
104      delay: delayTime * 1000
105    })
106  });
107};
108    </code-snippet>
109    
110    <section>
111      <h3>Documentation</h3>
112      <p>
113        <a href="https://github.com/WebKit/explainers/tree/main/DeclarativeWebPush" target="_blank">
114          Declarative Web Push explainer on GitHub
115        </a>.
116      </p>
117    </section>
118    
119  <dialog id="notification-dialog">
120    <h3>Notification error</h3>
121    <p class="dialog-body">Your device does not have permission to show notifications. Please enable this in your device's
122    settings.</p>
123    <div>
124    <button id="notification-close" type="button">Close</button>
125    </div>
126  </dialog>
127    
128    <h3>Browser support</h3>
129    <p>
130      Declarative Web Push is supported in Safari 18.4 on iOS for web apps added to the Home Screen
131    </p>
132  </div>
133  
134  
135</div>
136`;