Advanced PWA inc Push Notifications

• Turn your website into a progressive web app
• Send push notifications to subscribed devices

What is a progressive web app aka PWA?
Progressive web applications are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications.

Follow Wikipedia for more information.

Once you've set the module up, you go to PWA Builder. Pop in your Drupal website URL and it'll create the files needed to be uploaded to various app stores.

If you know Drupal, you now know how to make mobile app's.

Features

• Make your website installable on mobile devices by clicking on "Install". This prompt is triggered when someone visits the website on mobiles etc.
• It isn't dependant on external services.
• Site admin can upload screenshots to be displayed on the above prompt. Additionally the App ID and description can be provided.
• Use Service Worker for device caching and using your website offline
• Device caching settings include: Turn on/off, cache by role and excluded urls. By default it is all turned off.
• User needs to be given permission to see the push notification prompt. This allows to us ensure we have their User ID available for tying to devices.
• User can choose to subscribe or not to subscribe to push notifications.
• For the prompt for notifications, there is Drupal modal, embedded on the page and Bootstrap 5 modal to choose from. The title, body and button text are all configurable.
• Site admin can choose to automatically send push notifications when content is published of specific types.
• Site admin can broadcast push notifications to all subscribed user devices via the UI
• Site admin can set background color and theme color of progressive web app
• Site admin can set public / private keys that will be used to sign Push API requests
• Site admin can view subscribed users (User id and subscription endpoint)
• All push notifications are sent to a queue and then processed during cron runs for scalability.

Requirements

• Site domain should be SSL enabled. Push notifications only works on SSL
  enabled domains
• minishlink/web-push library version 9.0 (installed automatically when using composer to install module)

Configurations

Once you install the module, a link 'Advanced PWA Settings' will appear on '/admin/config' page under 'System'.

1. Go to "Manifest configuration" tab (/admin/config/system/advanced-pwa) to configure your App's manifest.
   • Short name: This is the name the user will see when they add your website to their homescreen.
   • App title: This is displayed when the install prompt is shown or in the app stores.
   • Unique App ID: Defaults to the site URL without the protocol.
   • App Description: This is used on the install prompt and App stores.
   • General App Icon: This is used for the App icon when installed.
   • Background Color: Select a background color for the launch screen. This is shown when the user opens the website from their homescreen.
   • Theme Color: This color is used to create a consistent experience in the browser when the users launch your website from their homescreen.
   • Text direction
   • App screenshots: These are shown on the install prompt and App stores.
   • Start URL: When the App is launched, this is the URL that users are sent to.
   • Display: This is the way the App is launched. Detailed descriptions are on the form.
   • Orientation: All options are supported. Detailed descriptions are on the form.
2. Go to "Push configuration" tab (/admin/config/system/advanced-pwa/config) to configure push notifications.
   • It is required that you generate keys first. The button is on the bottom of the form.
   • Enable push notifications: Disabling the push notifications will ensure that no user will be able to receive push notifications
   • Push Notification Icon: This is the icon that is used on the push notifications.
   • Prompt Settings:
     • Title
     • Prompt message
     • Confirm button
     • Decline button
     • Display type: Drupal Modal, Embedded and Bootstrap 5 Modal.
     • Repeat prompt: How many days to wait until showing the prompt.
3. Go to "Device caching" tab (/admin/config/system/advanced-pwa/device-caching) to configure device caching.
   • Enable Device Caching: On / Off
   • Select User Roles: Select who to enable caching for.
   • Specify Excluded URLs: The wildcard * is supported. Choose what you do not want cached.
4. Go to "New content notifications" (/admin/config/system/advanced-pwa/config-subscription) to configure push notifications when a new piece of content is created.
   • Published content notifications: On / Off.
   • Available Content types: Select the content types to send notifications for.
5. Give roles permission to see the push notification prompt. If you need to send specific users push notifications, don't give permission to anonymous users. This way all subscriptions will have a uid attached to it. Otherwise, you can give everyone permission.
6. Additionally, you can a create link to trigger the push prompt. Use: <span class="push-prompt-link">Some plain text <span class="trigger-push-prompt">The link text</span></span>. The link and text will only display if the user has permission, hasn’t already subscribed and hasn’t clicked block in the browser.

Queue and Cron

For scalability, all push notifications are added to a queue and are executed on cron runs.

Personally I use 'Ultimate Cron', whilst triggering Drupal's cron every 5 mins using my server's crontab. The module allows me to specify how frequently the different cron jobs should run. Pretty cool!

Learn more about configuring a server cron job

Send push notifications in your module.

This module implements a service that can be used by other modules to send push notifications.

Please see the readme file on Drupal Code.

Documentation

Please watch this video: https://youtu.be/2W24vsChDss

Module's that extend this one.

Advanced PWA Rules

This module adds two rules actions. Send push notification to all user devices & Send push notification to specific user's devices.

Advanced PWA Rules Flag

This module adds two rules actions. Send push notification to flagging users of content & Send push notification to flagging users of a user.

Each module has a video demo on it.