├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── assets └── helper.js ├── blueprints.yaml ├── blueprints └── webpush.yaml ├── custom_code.png ├── readme.png ├── select_app.png ├── templates └── forms │ └── fields │ ├── webpush_message │ └── webpush_message.html.twig │ └── webpush_title │ └── webpush_title.html.twig ├── webpush.php ├── webpush.yaml └── webpush_tab.png /.gitignore: -------------------------------------------------------------------------------- 1 | # OS Generated 2 | .DS_Store* 3 | /.idea 4 | node_modules 5 | *.js.map 6 | .sass-cache 7 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v1.0.1 2 | ## 09/17/2018 3 | 4 | 1. [](#new) 5 | * Readme updates, minor fixes 6 | 7 | # v1.0.0 8 | ## 09/04/2018 9 | 10 | 1. [](#new) 11 | * Initial release 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Karol Orzel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web Push Notifications Plugin 2 | 3 | ![Web Push Notifications](readme.png) 4 | 5 | 6 | The **Web Push Notifications** Plugin is a plugin for [Grav CMS](http://github.com/getgrav/grav) based on [OneSignal](http://onesignal.com) service. Web push notifications are messages that come from a website. You get them on your desktop or device even when the website is not open in your browser. It is a new marketing channel to re engage your site visitors without knowing their email or other contact details. All major browsers support Web Push. Android devices may also receive Web Push notifications, in addition to notifications from apps. 7 | 8 | ## Some of OneSignal features 9 | * **Supports Chrome** (Desktop & Android), **Safari** (Mac OS X), **Microsoft Edge** (Desktop & Android), **Opera** (Desktop & Android) and **Firefox** (Desktop & Android) on both HTTP and HTTPS sites. 10 | * **Automatic Notifications** - Send notifications to followers every time you publish a new post. 11 | * **Targeting Segments** - Send notifications to specific visitors based on language, number of times they’ve visited your blog, or even set up your own user attributes that you can target. (currently only through OneSignal Web Panel) 12 | * **Opt-In Customization** - Choose when and how to ask your visitors to opt-in to browser notifications. Customize the prompt they first see. 13 | * **Real Time Analytics** - See your notifications being delivered in real time, and watch them as they convert into visitors. 14 | * **A/B Testing** - Try out different messages to a smaller set of your visitors to figure out which messages are more effective and then send the more effective message to the rest of your visitors! 15 | * **Scheduled Notifications** - Schedule notifications to be delivered in the future, based on a user’s time zone, or even based on the same time of day they last visited your website. (currently only through OneSignal Web Panel) 16 | **All completely free. No fees or limitations.** 17 | 18 | ## Why should you use Web Push Notifications – what are the advantages? 19 | * WEB-SCALE REACH - Chrome, Firefox, and Safari combined have a market share of 75%+, meaning the reach of web push notifications is nearly a billion users. 20 | * NO NEED FOR ANDROID APP - Web push notifications work exactly like the native mobile push on Android, so you don’t have to create a mobile app to send native push notifications. 21 | * ACCESS TO USERS WHO ARE NOT ON YOUR WEBSITE - Using web push notifications, you can reach out to those users who are not on your website. 22 | * RE-ENGAGEMENT WITHOUT CONTACT DETAILS - Web push notifications don’t need a user’s email or other contact details. 23 | * GREATER OPT-IN RATE - It's easier for users to sign up for Web Push than email, which results in higher opt-ins than email. 24 | * LOWER UNSUBSCRIBE / OPT-OUT RATES - Studies have shown that less than 10% of the subscribers who opted for notifications from a site unsubscribed in a year. 25 | * BETTER DELIVERY - Emails sometimes fail to deliver or get marked as spam, while notifications have more prompt and assured delivery. 26 | * HIGHER CONVERSION RATES - Studies have shown that web push notifications have 30 times higher conversion when compared with email. 27 | * STAY TOP OF MIND - Sending notifications even when the users are not on your website helps you stay top of mind with users, especially if they've previously engaged (such as adding content to a cart on your site). 28 | 29 | ## Installation 30 | 31 | Installing the Web Push Notifications plugin is done in few steps. 32 | 33 | ### Register [OneSignal](http://onesignal.com) account. 34 | 35 | First of all you will have to register account at [OneSignal](http://onesignal.com). After registration, please add new app by clicking "Add App" button in your dashboard. Then select "Web Push" 36 | 37 | ![Select APP](select_app.png) 38 | 39 | As an integration please select "Custom Code" (important): 40 | 41 | ![Custom Code](custom_code.png) 42 | 43 | That's it. Configure all needed fields (url, your icon, safari and then hit Save). 44 | 45 | ### Download OneSignal SDK files 46 | 47 | This VERY IMPORTANT step. You have to downlaod [OneSignal SDK Files](https://github.com/OneSignal/OneSignal-Website-SDK/releases/download/https-integration-files/OneSignal-Web-SDK-HTTPS-Integration-Files.zip) and you have to place them on your domain root. So for example. Your Grav installation is placed at **https://yourdomain.com**. You have to unzip whole directory and upload all files from this zip to your domain. So they are accessible like: 48 | 49 | https://yourdomain.com/OneSignalSDKWorker.js 50 | https://yourdomain.com/OneSignalSDKUpdaterWorker.js 51 | 52 | Please don't submit any bugs if files above does not exist in your domain. The same apply for subdomain https://yourdomain.com. Then files must be uploaded to subdomain root: 53 | 54 | https://subdomain.yourdomain.com/OneSignalSDKWorker.js 55 | https://subdomain.yourdomain.com/OneSignalSDKUpdaterWorker.js 56 | 57 | What about subdirectories ? The same rule apply. Service worker files must be on your domain root. So if you have Grav installation like **https://yourdomain.com/grav**, then files has to be on your domain root: 58 | 59 | https://yourdomain.com/OneSignalSDKWorker.js 60 | https://yourdomain.com/OneSignalSDKUpdaterWorker.js 61 | 62 | Don't ask me why is that. This is just how service workers.. works :D. If you're familiar with PWA, then that shouldn't be a news for you :) 63 | 64 | After that just continue with regular Grav install. 65 | 66 | 67 | ### GPM Installation (Preferred) 68 | 69 | The simplest way to install this plugin is via the [Grav Package Manager (GPM)](http://learn.getgrav.org/advanced/grav-gpm) through your system's terminal (also called the command line). From the root of your Grav install type: 70 | 71 | bin/gpm install webpush 72 | 73 | This will install the Web Push Notifications plugin into your `/user/plugins` directory within Grav. Its files can be found under `/your/site/grav/user/plugins/webpush`. 74 | 75 | ### Manual Installation 76 | 77 | To install this plugin, just download the zip version of this repository and unzip it under `/your/site/grav/user/plugins`. Then, rename the folder to `webpush`. You can find these files on [GitHub](https://github.com/devlom/grav-plugin-webpush) or via [GetGrav.org](http://getgrav.org/downloads/plugins#extras). 78 | 79 | You should now have all the plugin files under 80 | 81 | /your/site/grav/user/plugins/webpush 82 | 83 | > NOTE: This plugin is a modular component for Grav which requires [Grav](http://github.com/getgrav/grav) and the [Error](https://github.com/getgrav/grav-plugin-error) and [Problems](https://github.com/getgrav/grav-plugin-problems) to operate. 84 | 85 | ### Admin Plugin 86 | 87 | If you use the admin plugin, you can install directly through the admin plugin by browsing the `Plugins` tab and clicking on the `Add` button. 88 | 89 | ## Configuration 90 | Before configuring this plugin, you should copy the `user/plugins/webpush/webpush.yaml` to `user/config/plugins/webpush.yaml` and only edit that copy. Plugin has around 50 configuration options. Feel free to experiment with those. 91 | 92 | Note that if you use the admin plugin, a file with your configuration, and named webpush.yaml will be saved in the `user/config/plugins/` folder once the configuration is saved in the admin. 93 | 94 | ## Usage 95 | You can of course send Notifications using onesignal.com WebPanel but we have better idea. Just use our awesome Web Push tab. Tab is added to every page. Just take a look: 96 | 97 | ![Web Push Tab](webpush_tab.png) 98 | 99 | All you have to do is polish preloaded data. Check "Send Notification" and hit "Save". Isn't that easy ? How AWESOME is that :) ? Good luck :) 100 | 101 | Credits 102 | ======================== 103 | 104 | OneSignal Wordpress APP 105 | https://wordpress.org/plugins/onesignal-free-web-push-notifications/ 106 | 107 | ## To Do 108 | 109 | - [ ] Add Multilang Support 110 | 111 | License 112 | ======================== 113 | 114 | The MIT License (MIT) 115 | 116 | Permission is hereby granted, free of charge, to any person obtaining a copy 117 | of this software and associated documentation files (the "Software"), to deal 118 | in the Software without restriction, including without limitation the rights 119 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 120 | copies of the Software, and to permit persons to whom the Software is 121 | furnished to do so, subject to the following conditions: 122 | 123 | The above copyright notice and this permission notice shall be included in 124 | all copies or substantial portions of the Software. 125 | 126 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 127 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 128 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 129 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 130 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 131 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 132 | THE SOFTWARE. 133 | 134 | -------------------------------------------------------------------------------- /assets/helper.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | $('[data-grav-field-name="data[header][webpushbutton]"] input:checkbox').removeAttr('checked'); 3 | }) -------------------------------------------------------------------------------- /blueprints.yaml: -------------------------------------------------------------------------------- 1 | name: Web Push Notifications 2 | version: 1.0.1 3 | description: Add web push notifications based on OneSignal service for your grav project. 4 | icon: bell 5 | author: 6 | name: Devlom 7 | email: info@devlom.com 8 | url: https://devlom.com 9 | homepage: https://devlom.com/en/blog/grav-webpush-notifications-onesignal 10 | keywords: grav, plugin, onesignal, web push notifications, notifications, push 11 | bugs: https://github.com/devlom/grav-plugin-webpush/issues 12 | docs: https://github.com/devlom/grav-plugin-webpush/blob/develop/README.md 13 | license: MIT 14 | 15 | form: 16 | validation: strict 17 | fields: 18 | general: 19 | type: section 20 | title: General 21 | underline: true 22 | fields: 23 | enabled: 24 | type: toggle 25 | label: Plugin status 26 | highlight: 1 27 | default: 0 28 | options: 29 | 1: Enabled 30 | 0: Disabled 31 | validate: 32 | type: bool 33 | account: 34 | type: section 35 | title: Account Settings 36 | underline: true 37 | 38 | fields: 39 | app_id: 40 | type: text 41 | label: App ID 42 | help: Your 36 character alphanumeric app ID. You can find this in App Settings > Keys & IDs. 43 | rest_id: 44 | type: text 45 | label: REST API Key 46 | help: Your 48 character alphanumeric REST API Key. You can find this in App Settings > Keys & IDs. 47 | safari_id: 48 | type: text 49 | label: Safari Web ID 50 | help: Your Safari Web ID. You can find this on Setup > Safari Push > Step 5. 51 | notification_title: 52 | type: text 53 | label: Notification Title 54 | help: The notification title to use for all outgoing notifications. Defaults to your site's title. 55 | 56 | prompt: 57 | type: section 58 | title: Prompt Settings & Subscription Bell 59 | underline: true 60 | fields: 61 | auto_prompt: 62 | type: toggle 63 | label: Automatically prompt new site visitors to subscribe to push notifications 64 | highlight: 1 65 | default: 1 66 | options: 67 | 1: Enabled 68 | 0: Disabled 69 | bell: 70 | type: toggle 71 | label: Enable the Subscription Bell 72 | highlight: 1 73 | default: 1 74 | options: 75 | 1: Enabled 76 | 0: Disabled 77 | bell_unread: 78 | type: toggle 79 | label: Show first-time site visitors an unread message icon 80 | highlight: 1 81 | default: 1 82 | options: 83 | 1: Enabled 84 | 0: Disabled 85 | bell_size: 86 | type: select 87 | label: Bell Size 88 | highlight: small 89 | default: small 90 | options: 91 | small: Small 92 | medium: Medium 93 | large: Large 94 | bell_position: 95 | type: select 96 | label: Bell Position 97 | highlight: small 98 | default: small 99 | options: 100 | bottom-left: Bottom Left 101 | bottom-right: Bottom Right 102 | bell_theme: 103 | type: select 104 | label: Bell Theme 105 | highlight: default 106 | default: default 107 | options: 108 | default: Red-White 109 | inverse: White-Red 110 | bottom_offset: 111 | type: text 112 | label: Bell Bottom Offset 113 | help: The distance to offset the Subscription Bell from the bottom of the page. For example, 20px is the default value. 114 | default: 20px 115 | left_offset: 116 | type: text 117 | label: Bell Left Offset 118 | help: The distance to offset the Subscription Bell from the left of the page. For example, 20px is the default value. 119 | default: 20px 120 | right_offset: 121 | type: text 122 | label: Bell Right Offset 123 | help: The distance to offset the Subscription Bell from the right of the page. For example, 20px is the default value. 124 | default: 20px 125 | firsttime: 126 | type: text 127 | label: First-time visitor message 128 | help: First-time visitor message (on Subscription Bell hover) 129 | default: Click to subscribe to notifications 130 | unsubscribed: 131 | type: text 132 | label: Tip when unsubscribed 133 | help: Tip when unsubscribed 134 | default: Subscribe to notifications 135 | subscribed: 136 | type: text 137 | label: Tip when subscribed 138 | help: Tip when subscribed 139 | default: You're subscribed to notifications 140 | blocked: 141 | type: text 142 | label: Tip when blocked 143 | help: Tip when blocked 144 | default: You've blocked notifications 145 | message_subscribed: 146 | type: text 147 | label: Message on subscribed 148 | help: Message on subscribed 149 | default: Thanks for subscribing! 150 | message_resubscribed: 151 | type: text 152 | label: Message on re-subscribed 153 | help: Message on re-subscribed (after first unsubscribing) 154 | default: You're subscribed to notifications 155 | message_unsubscribed: 156 | type: text 157 | label: Message on unsubscribed 158 | help: Message on unsubscribed 159 | default: You won't receive notifications again 160 | main_dialog: 161 | type: text 162 | label: Main dialog title 163 | help: Main dialog title 164 | default: Manage Site Notifications 165 | main_dialog_subscribe: 166 | type: text 167 | label: Main dialog subscribe button 168 | help: Main dialog subscribe button 169 | default: SUBSCRIBE 170 | main_dialog_unsubscribe: 171 | type: text 172 | label: Main dialog unsubscribe button 173 | help: Main dialog unsubscribe button 174 | default: UNSUBSCRIBE 175 | blocked_dialog_title: 176 | type: text 177 | label: Blocked dialog title 178 | help: Blocked dialog title 179 | default: Unblock Notifications 180 | blocked_dialog_message: 181 | type: text 182 | label: Blocked dialog message 183 | help: Blocked dialog message 184 | default: Follow these instructions to allow notifications 185 | http-prompt: 186 | type: section 187 | title: HTTP Pop-Up Settings 188 | underline: true 189 | fields: 190 | action_message: 191 | type: text 192 | label: Action Message 193 | help: Action Message 194 | default: wants to show notifications 195 | auto_accept: 196 | type: text 197 | label: Auto Accept Title (Click Allow) 198 | help: Auto Accept Title (Click Allow) 199 | default: Click Allow 200 | sitename: 201 | type: text 202 | label: Site Name 203 | help: Site Name 204 | default: http://yoursite.com 205 | example_title: 206 | type: text 207 | label: Example Notification Title 208 | help: Example Notification Title 209 | default: This is an example notification 210 | example_message: 211 | type: text 212 | label: Example Notification Message 213 | help: Example Notification Message 214 | default: Notifications will appear on your desktop 215 | example_caption: 216 | type: text 217 | label: Example Notification Caption 218 | help: Example Notification Caption 219 | default: (you can unsubscribe anytime) 220 | accept: 221 | type: text 222 | label: Accept Button Text 223 | help: Accept Button Text 224 | default: CONTINUE 225 | cancel: 226 | type: text 227 | label: Cancel Button Text 228 | help: Cancel Button Text 229 | default: NO THANKS 230 | welcome: 231 | type: section 232 | title: Welcome Notification Settings 233 | underline: true 234 | fields: 235 | welcome_title: 236 | type: text 237 | label: Title 238 | help: Title 239 | default: Hello There 240 | welcome_message: 241 | type: text 242 | label: Message 243 | help: Message 244 | default: Thanks for subscribing! 245 | welcome_url: 246 | type: text 247 | label: URL 248 | help: URL 249 | default: http://yoursite.com -------------------------------------------------------------------------------- /blueprints/webpush.yaml: -------------------------------------------------------------------------------- 1 | form: 2 | fields: 3 | tabs: 4 | type: tabs 5 | active: 1 6 | fields: 7 | webpushfields: 8 | type: tab 9 | title: Web Push 10 | fields: 11 | header.webpushtitle: 12 | type: webpush_title 13 | label: Notification Title 14 | size: medium 15 | header.webpushmessage: 16 | type: webpush_message 17 | size: large 18 | label: Notification Message 19 | header.webpushimage: 20 | type: mediapicker 21 | folder: 'self@' 22 | size: large 23 | label: Thumbnail 24 | preview_images: true 25 | header.webpushbutton: 26 | type: checkboxes 27 | label: Notification ready ? 28 | options: 29 | send: Send Notification 30 | use: keys 31 | -------------------------------------------------------------------------------- /custom_code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devlom/grav-plugin-webpush/9f5d160247b0bdcf3240890e62f4a33b31351531/custom_code.png -------------------------------------------------------------------------------- /readme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devlom/grav-plugin-webpush/9f5d160247b0bdcf3240890e62f4a33b31351531/readme.png -------------------------------------------------------------------------------- /select_app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devlom/grav-plugin-webpush/9f5d160247b0bdcf3240890e62f4a33b31351531/select_app.png -------------------------------------------------------------------------------- /templates/forms/fields/webpush_message/webpush_message.html.twig: -------------------------------------------------------------------------------- 1 | {% extends "forms/field.html.twig" %} 2 | 3 | {% block input %} 4 |
5 | {% if value %}{% set webpush_value = value|trim|e('html') %} 6 | {% else %}{% set webpush_value = admin.page.content %} 7 | {% endif %} 8 | 9 |
10 | 11 | {% endblock %} 12 | 13 | -------------------------------------------------------------------------------- /templates/forms/fields/webpush_title/webpush_title.html.twig: -------------------------------------------------------------------------------- 1 | {% extends "forms/field.html.twig" %} 2 | 3 | {% block input %} 4 |
5 |
6 | {% if value %}{% set webpush_value = value %} 7 | {% else %}{% set webpush_value = admin.page.title %} 8 | {% endif %} 9 | 10 |
11 |
12 | {% endblock %} -------------------------------------------------------------------------------- /webpush.php: -------------------------------------------------------------------------------- 1 | ['onTwigSiteVariables', 0], 15 | 'onPluginsInitialized' => ['onPluginsInitialized', 0], 16 | 'onTwigTemplatePaths' => ['onTwigTemplatePaths', 0], 17 | ]; 18 | } 19 | /** 20 | * Initialize configuration 21 | */ 22 | public function onPluginsInitialized() 23 | { 24 | // Set default events 25 | $events = [ 26 | 'onTwigTemplatePaths' => ['onTwigTemplatePaths', 0], 27 | ]; 28 | // Set admin specific events 29 | if ($this->isAdmin()) { 30 | $this->active = false; 31 | $events = [ 32 | 'onBlueprintCreated' => ['onBlueprintCreated', 0], 33 | 'onAdminSave' => ['onAdminSave', 0], 34 | ]; 35 | } 36 | // Register events 37 | 38 | $this->enable($events); 39 | } 40 | 41 | public function onAdminSave(Event $event) 42 | { 43 | global $page; 44 | if (isset($_POST['data']['header']['webpushbutton'])) { 45 | $notification_check = $_POST['data']['header']['webpushbutton']['send']; 46 | 47 | global $app_id, $rest_id; 48 | $app_id = $this->config->get('plugins.webpush.app_id'); 49 | $rest_id = $this->config->get('plugins.webpush.rest_id'); 50 | 51 | if ($notification_check == 1) { 52 | function sendMessage($title, $message, $file, $url) 53 | { 54 | global $page, $app_id, $rest_id; 55 | $content = array( 56 | "en" => $message, 57 | ); 58 | $headings = array( 59 | "en" => $title, 60 | ); 61 | $fields = array( 62 | 'app_id' => $app_id, 63 | 'included_segments' => array( 64 | 'All', 65 | ), 66 | 'chrome_web_icon' => $page->url(true) . $file, 67 | 'contents' => $content, 68 | 'headings' => $headings, 69 | 'url' => $url, 70 | ); 71 | 72 | $fields = json_encode($fields); 73 | 74 | $ch = curl_init(); 75 | curl_setopt($ch, CURLOPT_URL, "https://onesignal.com/api/v1/notifications"); 76 | curl_setopt($ch, CURLOPT_HTTPHEADER, array( 77 | 'Content-Type: application/json; charset=utf-8', 78 | 'Authorization: Basic '. $rest_id .'', 79 | )); 80 | curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 81 | curl_setopt($ch, CURLOPT_HEADER, false); 82 | curl_setopt($ch, CURLOPT_POST, true); 83 | curl_setopt($ch, CURLOPT_POSTFIELDS, $fields); 84 | curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); 85 | 86 | $response = curl_exec($ch); 87 | curl_close($ch); 88 | return $response; 89 | } 90 | 91 | $title = $_POST['data']['header']['webpushtitle']; 92 | $message = $_POST['data']['header']['webpushmessage']; 93 | $file = $_POST['data']['header']['webpushimage']; 94 | $url = $_POST['data']['header']['webpushurl']; 95 | sendMessage($title, $message, $file, $url); 96 | } 97 | } 98 | } 99 | 100 | public function onTwigSiteVariables() 101 | { 102 | $this->grav['assets'] 103 | ->addJs('https://cdn.onesignal.com/sdks/OneSignalSDK.js', ['loading' => 'async']); 104 | $this->grav['assets'] 105 | ->addInlineJs(' 106 | var OneSignal = window.OneSignal || []; 107 | OneSignal.push(["init", { 108 | appId: "' . $this->config->get('plugins.webpush.app_id') . '", 109 | safari_web_id: "' . $this->config->get('plugins.webpush.safari_id') . '", 110 | autoRegister: ' . (($this->config->get('plugins.webpush.auto_prompt') == 1) ? 'true' : 'false') . ', 111 | allowLocalhostAsSecureOrigin: true, 112 | notifyButton: { 113 | enable: ' . (($this->config->get('plugins.webpush.bell') == 1) ? 'true' : 'false') . ', 114 | size: "' . $this->config->get('plugins.webpush.bell_size') . '", 115 | theme: "' . $this->config->get('plugins.webpush.bell_theme') . '", 116 | position: "' . $this->config->get('plugins.webpush.bell_position') . '", 117 | offset: { 118 | bottom: "' . $this->config->get('plugins.webpush.bottom_offset') . '", 119 | left: "' . $this->config->get('plugins.webpush.left_offset') . '", 120 | right: "' . $this->config->get('plugins.webpush.right_offset') . '", 121 | }, 122 | prenotify: ' . (($this->config->get('plugins.webpush.bell_unread') == 1) ? 'true' : 'false') . ', 123 | showCredit: false, 124 | text: { 125 | "tip.state.unsubscribed": "' . $this->config->get('plugins.webpush.unsubscribed') . '", 126 | "tip.state.subscribed": "' . $this->config->get('plugins.webpush.subscribed') . '", 127 | "tip.state.blocked": "' . $this->config->get('plugins.webpush.blocked') . '", 128 | "message.prenotify": "' . $this->config->get('plugins.webpush.firsttime') . '", 129 | "message.action.subscribed": "' . $this->config->get('plugins.webpush.message_subscribed') . '", 130 | "message.action.resubscribed": "' . $this->config->get('plugins.webpush.message_resubscribed') . '", 131 | "message.action.unsubscribed": "' . $this->config->get('plugins.webpush.message_unsubscribed') . '", 132 | "dialog.main.title": "' . $this->config->get('plugins.webpush.main_dialog') . '", 133 | "dialog.main.button.subscribe": "' . $this->config->get('plugins.webpush.main_dialog_subscribe') . '", 134 | "dialog.main.button.unsubscribe": "' . $this->config->get('plugins.webpush.main_dialog_unsubscribe') . '", 135 | "dialog.blocked.title": "' . $this->config->get('plugins.webpush.blocked_dialog_title') . '", 136 | "dialog.blocked.message": "' . $this->config->get('plugins.webpush.blocked_dialog_message') . '", 137 | }, 138 | displayPredicate: function() { 139 | return OneSignal.isPushNotificationsEnabled() 140 | .then(function(isPushEnabled) { 141 | return !isPushEnabled; 142 | }); 143 | } 144 | }, 145 | welcomeNotification: { 146 | "title": "' . $this->config->get('plugins.webpush.welcome_title') . '", 147 | "message": "' . $this->config->get('plugins.webpush.welcome_message') . '", 148 | "url": "' . $this->config->get('plugins.webpush.welcome_url') . '", 149 | }, 150 | promptOptions: { 151 | siteName: "' . $this->config->get('plugins.webpush.sitename') . '", 152 | actionMessage: "' . $this->config->get('plugins.webpush.action_message') . '", 153 | exampleNotificationTitle: "' . $this->config->get('plugins.webpush.example_title') . '", 154 | exampleNotificationMessage: "' . $this->config->get('plugins.webpush.example_message') . '", 155 | exampleNotificationCaption: "' . $this->config->get('plugins.webpush.example_caption') . '", 156 | acceptButtonText: "' . $this->config->get('plugins.webpush.accept') . '", 157 | cancelButtonText: "' . $this->config->get('plugins.webpush.cancel') . '", 158 | } 159 | }]); 160 | OneSignal.push(function() { 161 | OneSignal.showHttpPrompt(); 162 | });'); 163 | $this->grav['assets'] 164 | ->addJs('plugin://webpush/assets/helper.js'); 165 | } 166 | /** 167 | * Extend page blueprints with WebPush configuration options. 168 | * 169 | * @param Event $event 170 | */ 171 | public function onBlueprintCreated(Event $event) 172 | { 173 | global $page; 174 | $page = $this->grav['page']; 175 | $newtype = $event['type']; 176 | if (0 === strpos($newtype, 'modular/')) { 177 | } else { 178 | $blueprint = $event['blueprint']; 179 | if ($blueprint->get('form/fields/tabs', null, '/')) { 180 | $blueprints = new Blueprints(__DIR__ . '/blueprints/'); 181 | $extends = $blueprints->get($this->name); 182 | $blueprint->extend($extends, true); 183 | } 184 | } 185 | } 186 | public function onTwigTemplatePaths() 187 | { 188 | $this->grav['twig']->twig_paths[] = __DIR__ . '/templates'; 189 | } 190 | } 191 | -------------------------------------------------------------------------------- /webpush.yaml: -------------------------------------------------------------------------------- 1 | app_id: '' 2 | rest_id: '' 3 | safari_id: '' 4 | bell: '1' 5 | bell_subscribed: '1' 6 | bell_unread: '1' 7 | bell_size: small 8 | bell_position: bottom-left 9 | bell_theme: default 10 | bottom_offset: 20px 11 | left_offset: 20px 12 | right_offset: 20px 13 | firsttime: 'Click to subscribe to notifications' 14 | unsubscribed: 'Subscribe to notifications' 15 | subscribed: 'You''re subscribed to notifications' 16 | blocked: 'You''ve blocked notifications' 17 | message_subscribed: 'Thanks for subscribing!' 18 | message_resubscribed: 'You''re subscribed to notifications' 19 | message_unsubscribed: 'You won''t receive notifications again' 20 | main_dialog: 'Manage Site Notifications' 21 | main_dialog_subscribe: SUBSCRIBE 22 | main_dialog_unsubscribe: UNSUBSCRIBE 23 | blocked_dialog_title: 'Unblock Notifications' 24 | blocked_dialog_message: 'Follow these instructions to allow notifications' 25 | action_message: 'wants to show notifications' 26 | auto_accept: 'Click Allow' 27 | sitename: 'http://devlom.com' 28 | example_desktop_title: 'This is an example notification' 29 | example_desktop_message: 'Notifications will appear on your desktop' 30 | example_mobile_title: 'Example notification' 31 | example_mobile_message: 'Notifications will appear on your device' 32 | example_caption: '(you can unsubscribe anytime)' 33 | accept: CONTINUE 34 | cancel: 'NO THANKS' 35 | welcome_title: 'Hello There' 36 | welcome_message: 'Thanks for subscribing!' 37 | welcome_url: 'http://devlom.com' 38 | auto_prompt: '1' 39 | example_title: 'This is an example notification' 40 | example_message: 'Notifications will appear on your desktop' -------------------------------------------------------------------------------- /webpush_tab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devlom/grav-plugin-webpush/9f5d160247b0bdcf3240890e62f4a33b31351531/webpush_tab.png --------------------------------------------------------------------------------