As per PWA Drupal project, Progressive Web Apps are: Reliable — Load instantly and never show an "Offline" screen to the visitor, even in uncertain network conditions. Fast — Respond quickly to user interactions with silky smooth animations and no janky scrolling. Engaging — Feel like a natural app on the device, with an immersive user experience. This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.

1. A Deep Dive into Progressive Web Apps for Drupal 8
By
Parvateesam Konapala

2. Who am I
Parvateesam Konapala
Bangalore, India
Sr.Drupal Developer
Twitter : @paru_523

3. Overview
❖ What is PWA?
❖ Why is PWA important ?
❖ When & Where PWA will use and implement?
❖ What are all the Key attributes of PWA?
❖ How it Works PWA?
❖ Brief about Service Worker and Web App Manifest, HTTPS
❖ Brief about the Drupal PWA contributed module and configuration setup
❖ Tools for developing Progressive Web Apps
❖ Demo

4. What is PWA?

5. A progressive web application is a
website that looks and behaves in the
same way as a mobile application.
It is a web app that uses modern web
capabilities to deliver an app-like
experience to the end users.
Image source: https://developers.google.com

6. Features of PWA
❖ Reliable
❖ Fast
❖ Engaging
❖ Progressive
❖ Responsive
❖ App-like
❖ Installable

7. Features of PWA
❖ Linkable
❖ Connectivity independent
❖ Fresh
❖ Safe
❖ Discoverable
❖ Low cost
❖ Rapid development

8. Why PWA is important?

9. ❖ Worthy of being on the home screen
❖ Work reliably, no matter the network conditions
❖ Increased engagement
❖ Improved conversions

10. When & Where PWA will
use and implement?

11. What are all the Key
attributes of PWA?

12. Key attributes of PWA?
❖ Website need to be running under HTTPS
❖ Website need a Web App Manifest
❖ Website need a Service Worker

13. ❖ Website need to be running under HTTPS
Image Source: Google

14. Web App Manifest
{
"short _name": "Drupal PWA Intro",
"name": "Drupal PWA brief introduction",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/home",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/home/",
"theme_color": "#3367D6"
}

15. Service Worker
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(
function(regSw) {
// ServiceWorker Registration was successful
console.log('ServiceWorker registration successful: ',
regSw); },
function(error) {
// ServiceWorker registration failed :(
console.log('ServiceWorker registration failed: ',
error);
});
});
}
</script>
Image source: Google

16. Drupal PWA module configuration

19. Tools for developing Progressive
Web Apps

20. Tools for developing PWA
❖ Chrome Developer Tools
❖ Lighthouse
https://developers.google.com/web/tools/lighthouse/

21. Live Demo

22. Questions || Discussions?

23. Resources
https://developers.google.com/web/fundamentals/
https://developers.google.com/web/fundamentals/primers/service-workers/registration
https://www.drupal.org/project/pwa
https://www.drupixels.com/blog/introduction-progressive-web-app-pwa-and-drupal-integration-module

24. Thank You