A recap of what are PWAs and why is there a need for them. A showcase of the main characteristics of a PWA in a Proof of Concept built with LitHTML. demo link: https://razvan-rosu.github.io/demo-polymer3-pwa/ github repository: https://github.com/razvan-rosu/demo-polymer3-pwa _________________________________________ Note: This is an improved version of my previous presentation (https://www.slideshare.net/RazvanRosu2/progressive-web-apps-with-lithtml), being themed for a local JavaScript Meetup in Bucharest, Romania.

1. P.W.A.
with
LitHTML
/razvan-rosu
/razvan-rosu
@rzvn_rosuRăzvan Roșu

2. What are P.W.A.?
Progressive Web Apps are websites
built using web technologies
but act and feel like an app.

3. Why P.W.A.?
“Progressive Web Apps are a new way
to deliver amazing user experience on the web”
- Google

5. User onboarding study case:
“Every step in an onboarding flow
costs 20% of users (on average)”
https://medium.com/gabor/every-step-costs-you-20-of-users-b613a804c329

6. Quick comparison: App vs PWA
(Native) User flow:
- find the app
- install the app
- open
- use
- share
(PWA) User flow:
- immediately use the web app
- prompt to install upon return

7. Quick comparison: App vs PWA
Native:
- native apps with push
notifications retain 30%
more users than
native apps without
- a user is more likely to
reopen a mobile application
than a website
PWA:
- have push notifications
- can be installed

8. PWA
characteristics
1. Loads quickly (app shell)
2. Cross device (responsive UI)
3. Offline (service workers)
4. Installable (app manifest)
5. Engaging (push notification)

9. 1. Loads quickly (app shell)
The key feature is to progressively load the app.
Initially, we load an empty app shell with a loader.
Afterwards, we lazy load the content.

10. PWA
characteristics
1. Loads quickly (app shell)
2. Cross device (responsive UI)
3. Offline (service workers)
4. Installable (app manifest)
5. Engaging (push notification)

11. 2. Cross device (responsive UI)
Progressive Web Apps run on any device
within a browser engine.
The user interface can scale accordingly using
Responsive Web Design techniques.

12. PWA
characteristics
1. Loads quickly (app shell)
2. Cross device (responsive UI)
3. Offline (service workers)
4. Installable (app manifest)
5. Engaging (push notification)

13. 3. Offline (service workers)
Progressive Web Apps can run offline
with the help of Service Workers (SW).

14. 3. Offline (service workers)
Service Worker (SW):
- it is a script
- it runs in the background, separate from the webpage
- it can synchronize offline content
- it has a lifecycle
Service Workers require a server with HTTPS

16. 3. Offline (service workers)
Service Workers generators:
- sw-precache
https://github.com/GoogleChromeLabs/sw-precache
- workbox
https://developers.google.com/web/tools/workbox/
Or, we can build a sw from scratch:
https://developer.mozilla.org/en-US/docs/Web/API/Service
_Worker_API

17. PWA
characteristics
1. Loads quickly (app shell)
2. Cross device (responsive UI)
3. Offline (service workers)
4. Installable (app manifest)
5. Engaging (push notification)

18. 4. Installable (app manifest)
Progressive Web Apps can be installed with
the help of a manifest.
https://developers.google.com/web/fundamentals/web-app-manifest/

19. 4. Installable (app manifest)
<link rel="manifest" href="./manifest.json">
{
"name": "Proof of Concept: Polymer 3 Progressive Web App",
"short_name": "PoC: PWA",
"description": "a demo of a progressive web app",
"icons": [
{
"src": "assets/android-launchericon-144-144.png",
"sizes": "144x144",
"type": "image/png"
},
…
],
"start_url": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#FE7A22",
"theme_color": "#FE7A22"
}
name: defines how the application will be listed
short_name: in Chrome for Android, it is the name to accompany the icon
on the home screen
description: general description of the app
icons: array of images serving as a set of icons and splash screens
start_url: starting URL of the application
display: defines the default display mode (fullscreen, standalone,
minimal-ui, browser)
orientation: portrait or landscape
theme_color: on Android, status bar color
background_color: background color of the app; in Chrome, also
background color of the splashscreen

20. 4. Installable (app manifest)
There is an alternative to the manual declarations: PWACompat.
PWACompat is a library that will generate the meta tags.
<link rel="manifest" href="manifest.webmanifest">
<!-- include PWACompat _after_ your manifest →
<script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js"
integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA"
crossorigin="anonymous"></script>
! Both manifest.json and manifest.webmanifest seem to work just
fine with PWAcompat.
https://github.com/GoogleChromeLabs/pwacompat
https://www.npmjs.com/package/pwacompat

22. PWA
characteristics
1. Loads quickly (app shell)
2. Cross device (responsive UI)
3. Offline (service workers)
4. Installable (app manifest)
5. Engaging (push notification)

23. 5. Engaging (push notifications)
Push notifications were initially available only in native apps.
A user would still receive web push notifications
even if the PWA is not open in a browser tab,
and even if the browser is closed.

24. 5. Engaging (push notifications)
The PWA will ask the user for permissions
to display notifications.
The PWA also needs to be subscribed to a Push server,
in order to receive the notifications.
Each browser vendor has his own Push server.

26. Subscription token example:
{
"endpoint":"https://fcm.googleapis.com/fcm/send/c7Veb8VpyM0:APA91bGnMFx8GIxf__UVy6vJ-n9i728CUJSR1UHBPAKO
CE_SrwgyP2N8jL4MBXf8NxIqW6NCCBg01u8c5fcY0kIZvxpDjSBA75sVz64OocQ-DisAWoW7PpTge3SwvQAx5zl_45aAXuvS",
"expirationTime": null,
"keys": {
"p256dh": "BJsj63kz8RPZe8Lv1uu-6VSzT12RjxtWyWCzfa18RZ0-8sc5j80pmSF1YXAj0HnnrkyIimRgLo8ohhkzNA7lX4w",
"auth": "TJXqKozSJxcWvtQasEUZpQ"
}
}

27. PWA
characteristics
1. Loads quickly (app shell)
2. Cross device (responsive UI)
3. Offline (service workers)
4. Installable (app manifest)
5. Engaging (push notification)

28. Quick demo inspection:
jsonplaceholder.typicode.com
/users
/posts?userId=${id}

29. DEMO
PWA Installation MacOS: https://vimeo.com/320142145
PWA notifications MacOS: https://vimeo.com/320142268
PWA offline (SW) MacOS: https://vimeo.com/320141344
PWA iOS: https://vimeo.com/320148762
https://razvan-rosu.github.io/demo-polymer3-pwa/

30. Important mentions:
In March 2018, Google announced .app TLD for PWAs https://get.app/
In March 2018, iOS started supporting PWAs. (Probably since then) the App Store
allows PWAs
https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7
In June 2018, Microsoft started allowing PWAs in the Microsoft Store
https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps/microsoft-stor
e
In January 2019, Google started allowing PWAs in the Google Play Store
https://medium.com/@firt/google-play-store-now-open-for-progressive-web-apps-ec6f3c6ff3cc

31. LitHTML

32. App structure:
index.html app-core.js custom-header.js
speakers-list.js
talks-list.js
custom-footer.js
logo-component.js
speaker-card.js
talk-card.js
installer-component.js

33. Basic component w/ LitElement
import {LitElement, html} from '@polymer/lit-element';
class LogoComponent extends LitElement {
constructor() {
super();
}
static get properties() {
return {...};
}
render() {
return html`
<style>...</style>
<a class="LogoComponent" href=${this.logourl}>
<img class="LogoComponent-image" src=${this.imageurl} alt=${this.imagealt} title=${this.imagetitle}>
</a>
`
}
}
customElements.define('logo-component', LogoComponent);

34. Child components and Lit directives
import {LitElement, html} from '@polymer/lit-element';
import {repeat} from 'lit-html/directives/repeat.js';
import './photo-card.js';
...
render() {
return html`
<style></style>
<ul class="PhotographerCardList">
${repeat(this.photographers, i => html`
<li class="PhotographerCardList-item">
<photographer-card id="${i.id}" name="${i.name}" phone="${i.phone}"></photographer-card>
</li>
`)}
</ul>
`
}

35. Binding to attributes
constructor() {
super();
this._clickMethod = this._clickMethod.bind(this);
}
_clickMethod(number) {
// GET albums
fetch(`https://jsonplaceholder.typicode.com/posts?userId=${number}`)
.then((r) => {
if (!r.ok) { throw Error(r.statusText); }
return r;
})
.then((r) => r.json())
.then((r) => {window.__TALKS__ = r})
.then(() => {
const event = new CustomEvent('injectTalks', { bubbles: true, composed: true });
window.dispatchEvent(event);
})
.catch(function (error) {
console.log('failed to load talks, error);
});
}
<button class="Speaker_c2a" type="button" @click="${this._clickMethod.bind(null, this.id)}">View talks (id: #${this.id})</button>

36. Passing data
<speakers-list
title="Speakers:"
.speakers="${this.speakers}"
></speakers-list>

37. Thank you!
Questions
?

38. References
● PWA examples:
https://pwa.rocks
● PWA:
https://developers.google.com/web/progressive-web-apps/
● Workbox:
https://developers.google.com/web/tools/workbox/
● PWAcompat:
https://developers.google.com/web/updates/2018/07/pwacompat
● LitHTML:
https://lit-html.polymer-project.org/
● Demo:
https://razvan-rosu.github.io/demo-polymer3-pwa/