SlideShare uma empresa Scribd logo
1 de 15
TAKE YOUR DRUPAL
SITES OFFLINE
With HTML5 AppCache and other assorted
teasing promises…
AppCache
           • Take a Website offline
           • Speed up access
           • Create ‘WebApps’
           • Perfect for mobile
How does it work?
<!DOCTYPE html>
<html manifest="/cache.manifest">
<body>

...

</body>
</html>
How does it work?
• (Maybe) In .htaccess or similar
• Needs to be running on a server


AddType text/cache-manifest .appcache
How does it work?
CACHE MANIFEST
# 2013-03-12:v2

CACHE:
index.html
stylesheet.css

NETWORK:
login.php
/myapi

FALLBACK:
images/large/ images/offline.jpg
*.html /offline.html
SIMPLE DEMO
What about Drupal?
                 • More complex
                 • Dynamic


                 drupal.org/project/appcache


                 With some module
                 changes…
How does it work?
Adds variable that is reset on cache clear, amends
manifest and causes browser rebuild.

Builds cached pages as it goes.

<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php print $language->language; ?>"
version="XHTML+RDFa 1.0" manifest="<?php print
base_path(); ?>appcache.manifest" dir="<?php print
$language->dir; ?>"<?php print $rdf_namespaces; ?>>
Pointers
           • May not want to apply
             to whole site
           • Authenticated areas
           • Offline files
           • Admin items
           • User confusion
Taking it mobile
                   • PhoneGap if
                     AppStores
                   • WebApp in other
                     cases
GOTCHAS…
Just some of them…
• Mobile / Browser detection
• Cache size restrictions
• PhoneGap
• JavaScript issues
• Local testing
• Inconsistent
• Media files
PLAN B
A whole other story…
THANK YOU…
Chris Ward
chris@moatmedia.com.au
@chrischinch

Mais conteúdo relacionado

Mais procurados

An Introduction to webOS
An Introduction to webOSAn Introduction to webOS
An Introduction to webOS
Kevin Decker
 
Html5 and beyond the next generation of mobile web applications - Touch Tou...
Html5 and beyond   the next generation of mobile web applications - Touch Tou...Html5 and beyond   the next generation of mobile web applications - Touch Tou...
Html5 and beyond the next generation of mobile web applications - Touch Tou...
RIA RUI Society
 
No more “cowboy coding”
No more “cowboy coding”No more “cowboy coding”
No more “cowboy coding”
Jim True
 

Mais procurados (20)

Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in Components
 
An Introduction to webOS
An Introduction to webOSAn Introduction to webOS
An Introduction to webOS
 
Put a little Backbone in your WordPress
Put a little Backbone in your WordPressPut a little Backbone in your WordPress
Put a little Backbone in your WordPress
 
Parse Apps with Ember.js
Parse Apps with Ember.jsParse Apps with Ember.js
Parse Apps with Ember.js
 
Html5 and beyond the next generation of mobile web applications - Touch Tou...
Html5 and beyond   the next generation of mobile web applications - Touch Tou...Html5 and beyond   the next generation of mobile web applications - Touch Tou...
Html5 and beyond the next generation of mobile web applications - Touch Tou...
 
New Perspectives on Performance
New Perspectives on PerformanceNew Perspectives on Performance
New Perspectives on Performance
 
Untangling spring week4
Untangling spring week4Untangling spring week4
Untangling spring week4
 
Webservices: connecting Joomla! with other programs.
Webservices: connecting Joomla! with other programs.Webservices: connecting Joomla! with other programs.
Webservices: connecting Joomla! with other programs.
 
Nuxtjs cheat-sheet
Nuxtjs cheat-sheetNuxtjs cheat-sheet
Nuxtjs cheat-sheet
 
Developing advanced universal apps using html & js
Developing advanced universal apps using html & jsDeveloping advanced universal apps using html & js
Developing advanced universal apps using html & js
 
No more “cowboy coding”
No more “cowboy coding”No more “cowboy coding”
No more “cowboy coding”
 
Drupal8 + AngularJS
Drupal8 + AngularJSDrupal8 + AngularJS
Drupal8 + AngularJS
 
Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5
 
Flexible UI Components for a Multi-Framework World
Flexible UI Components for a Multi-Framework WorldFlexible UI Components for a Multi-Framework World
Flexible UI Components for a Multi-Framework World
 
Best Practice Site Architecture in Drupal 8
Best Practice Site Architecture in Drupal 8Best Practice Site Architecture in Drupal 8
Best Practice Site Architecture in Drupal 8
 
Here Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPressHere Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPress
 
Browser Developer Tools
Browser Developer ToolsBrowser Developer Tools
Browser Developer Tools
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
Untangling the web9
Untangling the web9Untangling the web9
Untangling the web9
 

Semelhante a Take your drupal sites offline

Should you use HTML5 to build your product? The pros & cons of using current ...
Should you use HTML5 to build your product? The pros & cons of using current ...Should you use HTML5 to build your product? The pros & cons of using current ...
Should you use HTML5 to build your product? The pros & cons of using current ...
boxuno
 

Semelhante a Take your drupal sites offline (20)

The Mobile Web - HTML5 on mobile devices
The Mobile Web - HTML5 on mobile devicesThe Mobile Web - HTML5 on mobile devices
The Mobile Web - HTML5 on mobile devices
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 
Varnish intro
Varnish introVarnish intro
Varnish intro
 
12-Step Program for Scaling Web Applications on PostgreSQL
12-Step Program for Scaling Web Applications on PostgreSQL12-Step Program for Scaling Web Applications on PostgreSQL
12-Step Program for Scaling Web Applications on PostgreSQL
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
Web app job and functions - TUGAIT 2017
Web app job and functions  - TUGAIT 2017Web app job and functions  - TUGAIT 2017
Web app job and functions - TUGAIT 2017
 
Simple Tips to Improve Site Performance (No Coding Required!)
Simple Tips to Improve Site Performance (No Coding Required!)Simple Tips to Improve Site Performance (No Coding Required!)
Simple Tips to Improve Site Performance (No Coding Required!)
 
Exploring pwa for shopware
Exploring pwa for shopwareExploring pwa for shopware
Exploring pwa for shopware
 
phonegap with angular js for freshers
phonegap with angular js for freshers    phonegap with angular js for freshers
phonegap with angular js for freshers
 
Week 05 Web, App and Javascript_Brandon, S.H. Wu
Week 05 Web, App and Javascript_Brandon, S.H. WuWeek 05 Web, App and Javascript_Brandon, S.H. Wu
Week 05 Web, App and Javascript_Brandon, S.H. Wu
 
Making Of PHP Based Web Application
Making Of PHP Based Web ApplicationMaking Of PHP Based Web Application
Making Of PHP Based Web Application
 
Should you use HTML5 to build your product? The pros & cons of using current ...
Should you use HTML5 to build your product? The pros & cons of using current ...Should you use HTML5 to build your product? The pros & cons of using current ...
Should you use HTML5 to build your product? The pros & cons of using current ...
 
Creating Rajanikant Powered Site
Creating Rajanikant Powered SiteCreating Rajanikant Powered Site
Creating Rajanikant Powered Site
 
Apache Cordova 4.x
Apache Cordova 4.xApache Cordova 4.x
Apache Cordova 4.x
 
Apache Cordova
Apache CordovaApache Cordova
Apache Cordova
 
Fundamentals of web_design_v2
Fundamentals of web_design_v2Fundamentals of web_design_v2
Fundamentals of web_design_v2
 
High Performance Drupal
High Performance DrupalHigh Performance Drupal
High Performance Drupal
 
Pure Speed Drupal 4 Gov talk
Pure Speed Drupal 4 Gov talkPure Speed Drupal 4 Gov talk
Pure Speed Drupal 4 Gov talk
 
Containerdays Intro to Habitat
Containerdays Intro to HabitatContainerdays Intro to Habitat
Containerdays Intro to Habitat
 

Mais de Chris Ward

Mais de Chris Ward (20)

Electron - Solving our cross platform dreams?
Electron - Solving our cross platform dreams?Electron - Solving our cross platform dreams?
Electron - Solving our cross platform dreams?
 
Automate your docs, automate yourself
Automate your docs, automate yourselfAutomate your docs, automate yourself
Automate your docs, automate yourself
 
Back to the future with static site generators
Back to the future with static site generatorsBack to the future with static site generators
Back to the future with static site generators
 
Building Cross Platform Apps with Electron
Building Cross Platform Apps with ElectronBuilding Cross Platform Apps with Electron
Building Cross Platform Apps with Electron
 
Android Programming without Java
Android Programming without JavaAndroid Programming without Java
Android Programming without Java
 
The past, present and future of swift, Voxxed Belgrade 2016
The past, present and future of swift, Voxxed Belgrade 2016The past, present and future of swift, Voxxed Belgrade 2016
The past, present and future of swift, Voxxed Belgrade 2016
 
A Documentation Crash Course, LinuxCon 2016
A Documentation Crash Course, LinuxCon 2016A Documentation Crash Course, LinuxCon 2016
A Documentation Crash Course, LinuxCon 2016
 
Always Listening User Experience
Always Listening User ExperienceAlways Listening User Experience
Always Listening User Experience
 
JS, CMS, untangle the mess
JS, CMS, untangle the messJS, CMS, untangle the mess
JS, CMS, untangle the mess
 
Why you should come to DrupalSouth
Why you should come to DrupalSouthWhy you should come to DrupalSouth
Why you should come to DrupalSouth
 
Extend Drupal with a CRM, DrupalGov 2013
Extend Drupal with a CRM, DrupalGov 2013Extend Drupal with a CRM, DrupalGov 2013
Extend Drupal with a CRM, DrupalGov 2013
 
Drupal DevOps - Melbourne DevOps July 2013
Drupal DevOps - Melbourne DevOps July 2013Drupal DevOps - Melbourne DevOps July 2013
Drupal DevOps - Melbourne DevOps July 2013
 
Removing Barriers in Engagement - Melbourne Geek Night, July 2013
Removing Barriers in Engagement - Melbourne Geek Night, July 2013Removing Barriers in Engagement - Melbourne Geek Night, July 2013
Removing Barriers in Engagement - Melbourne Geek Night, July 2013
 
Power your mobile app with Drupal - Melbourne Mobile, July 2013
Power your mobile app with Drupal - Melbourne Mobile, July 2013Power your mobile app with Drupal - Melbourne Mobile, July 2013
Power your mobile app with Drupal - Melbourne Mobile, July 2013
 
Tweak, Test and Debug your mobile apps from Web directions code 13
Tweak, Test and Debug your mobile apps from Web directions code 13Tweak, Test and Debug your mobile apps from Web directions code 13
Tweak, Test and Debug your mobile apps from Web directions code 13
 
Why your image of the world could be wrong
Why your image of the world could be wrongWhy your image of the world could be wrong
Why your image of the world could be wrong
 
Green Renters' Giant Green Games
Green Renters' Giant Green GamesGreen Renters' Giant Green Games
Green Renters' Giant Green Games
 
Customising civicrm
Customising civicrmCustomising civicrm
Customising civicrm
 
Drupal - Melbourne cryptoparty
Drupal - Melbourne cryptopartyDrupal - Melbourne cryptoparty
Drupal - Melbourne cryptoparty
 
HP Lovecraft, laneway learning
HP Lovecraft, laneway learningHP Lovecraft, laneway learning
HP Lovecraft, laneway learning
 

Último

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 

Take your drupal sites offline

  • 1. TAKE YOUR DRUPAL SITES OFFLINE With HTML5 AppCache and other assorted teasing promises…
  • 2. AppCache • Take a Website offline • Speed up access • Create ‘WebApps’ • Perfect for mobile
  • 3. How does it work? <!DOCTYPE html> <html manifest="/cache.manifest"> <body> ... </body> </html>
  • 4. How does it work? • (Maybe) In .htaccess or similar • Needs to be running on a server AddType text/cache-manifest .appcache
  • 5. How does it work? CACHE MANIFEST # 2013-03-12:v2 CACHE: index.html stylesheet.css NETWORK: login.php /myapi FALLBACK: images/large/ images/offline.jpg *.html /offline.html
  • 7. What about Drupal? • More complex • Dynamic drupal.org/project/appcache With some module changes…
  • 8. How does it work? Adds variable that is reset on cache clear, amends manifest and causes browser rebuild. Builds cached pages as it goes. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" manifest="<?php print base_path(); ?>appcache.manifest" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>>
  • 9. Pointers • May not want to apply to whole site • Authenticated areas • Offline files • Admin items • User confusion
  • 10. Taking it mobile • PhoneGap if AppStores • WebApp in other cases
  • 12.
  • 13. Just some of them… • Mobile / Browser detection • Cache size restrictions • PhoneGap • JavaScript issues • Local testing • Inconsistent • Media files
  • 14. PLAN B A whole other story…

Notas do Editor

  1. CACHE:This is the default section for entries. Files listed under this header (or immediately after the CACHE MANIFEST) will be explicitly cached after they&apos;re downloaded for the first time.NETWORK:Files listed under this section are white-listed resources that require a connection to the server. All requests to these resources bypass the cache, even if the user is offline. Wildcards may be used.FALLBACK:An optional section specifying fallback pages if a resource is inaccessible. The first URI is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the manifest file. Wildcards may be used.Lines starting with a &apos;#&apos; are comment lines, but can also serve another purpose. An application&apos;s cache is only updated when its manifest file changes. So for example, if you edit an image resource or change a javascript function, those changes will not be re-cached. You must modify the manifest file itself to inform the browser to refresh cached files. Creating a comment line with a generated version number, hash of your files, or timestamp is one way to ensure users have the latest version of your software. You can also programmatically update the cache once a new version is ready as discussed in the Updating the cache section.