Online capabilities

Offline capabilities

Push notifications

Background sync

Push notifications

Background sync

How?

• Stripping down
• Limiting stuff
• No valid HTML

Why?

• Faster

• Ads!

For who?

• News agencies
• edge-cases
• lately e-commerce too

And how about    ?

• drupal.org/project/amp

• Drupal 7 & 8
• Developed by Lullabot.

How?

• Stripping down
• Limiting stuff
• No valid HTML
• Only inside the fb app

Why?

• Faster

• Ads!

For who?

• News agencies
• edge-cases

And how about    ?

• drupal.org/project/fb_instant_articles

• D7 & D8

How?

• Modular apps
• Android-only
• Deeplinking

Why?

• No installing

• Faster

• No hassle

For who?

Companies with existing apps

And how about    ?

Nah

• Definable extra layer of caching in the browser.

• Supported in all major browsers

• Gives offline capabilities!

The good

• Has security-risks

• Bad control over that caching layer. (clearing/adding/editing)

• Deprecated in favor of service workers

The bad

For who?

• Simple sites (e.g. conference)

• Applications (e.g. google docs, outlook ..)                  

And how about    ?

• drupal.org/project/offline_app
  
  Drupal 8 only

• Add to homescreen!

Manifest

• Add to homescreen!
• Define the launcher icon

Manifest

• Add to homescreen!
• Define the launcher icon
• Splash-screen:

Manifest

• Add to homescreen!
• Define the launcher icon
• Splash-screen
• No address-bar

Manifest

DEMO

(PWA)

How?

• HTTPS!
• Progressively

How?

• Web app Manifest 

{
  "lang": "en",
  "dir": "ltr",
  "name": "Super Racer 2000",
  "description": "The ultimate futuristic racing game from the future!",
  "short_name": "Racer2K",
  "icons": [{
    "src": "icon/lowres.webp",
    "sizes": "64x64",
    "type": "image/webp"
  },{
    "src": "icon/lowres.png",
    "sizes": "64x64"
  }, {
    "src": "icon/hd_hi",
    "sizes": "128x128"
  }],
  "scope": "/racer/",
  "start_url": "/racer/start.html",
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "aliceblue",
  "background_color": "red"
}

How?

Normal behaviour

Service workers?

Why?

• Speed!

• Huge caching control

• Control the network layer

Why?

• Road to background sync

• Road to push notifications

• Replace apps

Why?

• Offline-first

• Flaky internet connection

• See internet as enhancement

For who?

• Basically every project you have

And how about    ?

• drupal.org/project/pwa

  Drupal 7 & 8
• Developed by _nod.

Demo!

http://tinyurl.com/zq3bspo

or

https://pwa-pawshake.pantheonsite.io/user

User: pwa

password: pwapwa