This document provides an overview of building progressive web apps (PWAs). It discusses the key technologies needed for PWAs including manifest files, service workers, and app shells. It provides examples of how to add a manifest to enable installable web apps, how to cache assets using service workers, and how to send push notifications. While Safari and iOS do not fully support these technologies yet, the document notes they are being developed for future releases.
Azure Web SItes - Things they don't teach kids in school - Multi-ManiaMaarten Balliauw
Microsoft has a cloud platform which runs .NET, NodeJS and PHP. All 101 talks out there will show you the same: it’s easy to deploy, it scales out on demand and it runs WordPress. Great! But what about doing real things? In this session, we’ll explore the things they don’t teach kids in school. How about trying to find out the architecture of this platform? What about the different deployment options for Windows Azure Web Sites, the development flow and some awesome things you can do with the command line tools? Did you know you can modify the automated build process? Join me in this exploration of some lesser known techniques of the platform.
WP-CLI stands for WordPress Command-Line Interface. It is a tool for managing a WordPress site from the terminal as opposed to your web browser. Learn how to install WordPress, install or update plugins, check for hacked files, create a new user, perform a search and replace, manage data, execute custom scripts and more; all from the command-line!
Azure Web SItes - Things they don't teach kids in school - Multi-ManiaMaarten Balliauw
Microsoft has a cloud platform which runs .NET, NodeJS and PHP. All 101 talks out there will show you the same: it’s easy to deploy, it scales out on demand and it runs WordPress. Great! But what about doing real things? In this session, we’ll explore the things they don’t teach kids in school. How about trying to find out the architecture of this platform? What about the different deployment options for Windows Azure Web Sites, the development flow and some awesome things you can do with the command line tools? Did you know you can modify the automated build process? Join me in this exploration of some lesser known techniques of the platform.
WP-CLI stands for WordPress Command-Line Interface. It is a tool for managing a WordPress site from the terminal as opposed to your web browser. Learn how to install WordPress, install or update plugins, check for hacked files, create a new user, perform a search and replace, manage data, execute custom scripts and more; all from the command-line!
Web Developers are excited to use HTML 5 features but sometimes they need to explain to their non-technical boss what it is and how it can benefit the company. This presentation provides just enough information to share the capabilities of this new technologies without overwhelming the audience with the technical details.
"What is HTML5?" covers things you might have seen on other websites and wanted to add on your own website but you didn't know it was a feature of HTML 5. After viewing this slideshow you will probably give your web developer the "go ahead" to upgrade your current HTML 4 website to HTML 5.
You will also understand why web developers don't like IE (Internet Explorer) and why they always want you to keep your browser updated to latest version. "I have seen the future. It's in my browser" is the slogan used by many who have joined the HTML 5 revolution.
Dev Ops is hard and can seem like another language. This talk given at WordCamp Belfast hopes to help new developers, project managers and agency owners a chance to improve the WordPress Dev Ops Workflow
Tek 2013 - Building Web Apps from a New Angle with AngularJSPablo Godel
AngularJS is a new JavaScript framework, backed by Google, for building powerful, complex and rich client-side web applications. We will go over the features and basics of building a web application with AngularJS and we will demonstrate how to communicate with a REST server built with PHP.
De basis en een stukje meer... Bootstrap 3 in Joomla!
In deze presentatie legt Hans Kuijpers tijdens Joomladagen 2015 #jd15nl uit hoe je Bootstrap 3 framework verwerkt in Joomla en waar je op moet letten.
Real World Lessons in Progressive Web Application & Service Worker CachingChris Love
Over the past year we have seen a lot of excitement around Progressive Web Applications. Browser evangelist are selling developers and business owners on their advantages and promising future. But what is the real story? What are the details to proper execution? What do engineers need to know to make their web sites into Progressive Web Applications that not only meet the minimum criteria, but meet the sales hype?
Searching the Pokedex offline is fun, what is the real experience like caching a business application? Caching application assets and data can be complex, especially for larger applications. What to cache, how long to cache and how to cache are all valid questions. Often, in an effort to just ship something, we cache nothing. When we don't cache, we disappoint the customer and miss a key promise of progressive web applications.
Using a Joostrap template, Philip will be explaining & demoing how you wire frame a website right in your browser and why it will save you load's of time.
There are no fancy plugins here! This is wire framing for your client, built directly in your browser & saving you untold hours messing around in other software.
It is so hard sometimes, trying to get across to a client with a few drawings how the functionality of something could work. Wire framing directly in the browser gives your client a working wireframe/prototype where they can interact with links, pages & concepts. Not only that, but after client approval, you just have to style your working wireframe/prototype or switch to the template that is using the same module positions... It's a win win situation!
Presentation at WebPerfDays Amsterdam, May 18 2013.
This newish browser API can be used to gain insight in the load time of individual page resources. Does the API behave consistently and as expected? Short answer: no, not really. Long answer: view the presentation ;-)
node-webkit : Make a magic from your a desktop app to desktop app!욱진 양
I'm currently boring to write a description. sorry. I'll write some description at available time.
node-webkit: https://github.com/rogerwang/node-webkit
my node-webkit demo: https://github.com/composite/NodePlatform
Which would you rather have: A rich design or a fast user experience? Users want both, but sometimes the interplay between design and performance feels like a fixed sum game: One side’s gain is the other side’s loss. Design and performance are indeed connected, but it’s more like the yin and yang. They aren’t opposing forces, but instead complement each other. Users want an experience that is rich and fast. The trick for us as designers and developers is figuring out how to do that.
The answer is to adopt an approach that considers both design and performance from the outset. With this approach, designs are conceived by teams of designers and developers working together. Developers benefit by participating in the product definition process. Designers benefit from understanding more about how designs are implemented. There’s an emphasis on early prototyping and tracking performance from the get-go.
With new metrics that focus on what a user actually sees as the page loads, we can now bridge the technical and language gaps that have hindered the seamless creation of great user experiences. In this presentation, Steve Souders, former Chief Performance Yahoo! and Google head performance engineer, explains how promoting a process that brings design and performance together at the beginning of a project helps deliver a web experience that is both fast and rich.
Web Developers are excited to use HTML 5 features but sometimes they need to explain to their non-technical boss what it is and how it can benefit the company. This presentation provides just enough information to share the capabilities of this new technologies without overwhelming the audience with the technical details.
"What is HTML5?" covers things you might have seen on other websites and wanted to add on your own website but you didn't know it was a feature of HTML 5. After viewing this slideshow you will probably give your web developer the "go ahead" to upgrade your current HTML 4 website to HTML 5.
You will also understand why web developers don't like IE (Internet Explorer) and why they always want you to keep your browser updated to latest version. "I have seen the future. It's in my browser" is the slogan used by many who have joined the HTML 5 revolution.
Dev Ops is hard and can seem like another language. This talk given at WordCamp Belfast hopes to help new developers, project managers and agency owners a chance to improve the WordPress Dev Ops Workflow
Tek 2013 - Building Web Apps from a New Angle with AngularJSPablo Godel
AngularJS is a new JavaScript framework, backed by Google, for building powerful, complex and rich client-side web applications. We will go over the features and basics of building a web application with AngularJS and we will demonstrate how to communicate with a REST server built with PHP.
De basis en een stukje meer... Bootstrap 3 in Joomla!
In deze presentatie legt Hans Kuijpers tijdens Joomladagen 2015 #jd15nl uit hoe je Bootstrap 3 framework verwerkt in Joomla en waar je op moet letten.
Real World Lessons in Progressive Web Application & Service Worker CachingChris Love
Over the past year we have seen a lot of excitement around Progressive Web Applications. Browser evangelist are selling developers and business owners on their advantages and promising future. But what is the real story? What are the details to proper execution? What do engineers need to know to make their web sites into Progressive Web Applications that not only meet the minimum criteria, but meet the sales hype?
Searching the Pokedex offline is fun, what is the real experience like caching a business application? Caching application assets and data can be complex, especially for larger applications. What to cache, how long to cache and how to cache are all valid questions. Often, in an effort to just ship something, we cache nothing. When we don't cache, we disappoint the customer and miss a key promise of progressive web applications.
Using a Joostrap template, Philip will be explaining & demoing how you wire frame a website right in your browser and why it will save you load's of time.
There are no fancy plugins here! This is wire framing for your client, built directly in your browser & saving you untold hours messing around in other software.
It is so hard sometimes, trying to get across to a client with a few drawings how the functionality of something could work. Wire framing directly in the browser gives your client a working wireframe/prototype where they can interact with links, pages & concepts. Not only that, but after client approval, you just have to style your working wireframe/prototype or switch to the template that is using the same module positions... It's a win win situation!
Presentation at WebPerfDays Amsterdam, May 18 2013.
This newish browser API can be used to gain insight in the load time of individual page resources. Does the API behave consistently and as expected? Short answer: no, not really. Long answer: view the presentation ;-)
node-webkit : Make a magic from your a desktop app to desktop app!욱진 양
I'm currently boring to write a description. sorry. I'll write some description at available time.
node-webkit: https://github.com/rogerwang/node-webkit
my node-webkit demo: https://github.com/composite/NodePlatform
Which would you rather have: A rich design or a fast user experience? Users want both, but sometimes the interplay between design and performance feels like a fixed sum game: One side’s gain is the other side’s loss. Design and performance are indeed connected, but it’s more like the yin and yang. They aren’t opposing forces, but instead complement each other. Users want an experience that is rich and fast. The trick for us as designers and developers is figuring out how to do that.
The answer is to adopt an approach that considers both design and performance from the outset. With this approach, designs are conceived by teams of designers and developers working together. Developers benefit by participating in the product definition process. Designers benefit from understanding more about how designs are implemented. There’s an emphasis on early prototyping and tracking performance from the get-go.
With new metrics that focus on what a user actually sees as the page loads, we can now bridge the technical and language gaps that have hindered the seamless creation of great user experiences. In this presentation, Steve Souders, former Chief Performance Yahoo! and Google head performance engineer, explains how promoting a process that brings design and performance together at the beginning of a project helps deliver a web experience that is both fast and rich.
Continuous Integration with Open Source Tools - PHPUgFfm 2014-11-20Michael Lihs
Presentation about open source tools to set up continuous integration and continuous deployment. Covers Git, Gitlab, Chef, Vagrant, Jenkins, Gatling, Dashing, TYPO3 Surf and some other tools. Shows some best practices for testing with Behat and Functional Testing.
Single Page Applications: Your Browser is the OS!Jeremy Likness
Single Page Applications have gained tremendous popularity over the past few years and have prompted the creation of several frameworks to support their development. Unlike traditional web applications, most of the heavy lifting for SPA happens on the client side in your web browser. These applications rely on hundreds of lines of JavaScript coupled with asynchronous web service calls to provide a desktop-like experience that is accessible from virtually any device.
Join Principal Architect, Jeremy Likness, to learn more about SPA, including how to determine when you should choose this approach, how SPA compares and contrasts with traditional server-based approaches including ASP.NET WebForms and MVC, and what frameworks and tools (such as jQuery, AngularJS, and Aurelia) make building SPA easier. Discover how single page applications powered by HTML5 and JavaScript transform your browser into a web-based operating system.
Service workers your applications never felt so goodChris Love
If you have not heard of service workers you must attend this session. Service Workers encompass new browser capabilities, along with shiny new version of AJAX called Fetch. If you have every wanted your web applications to experience many native application features, such as push notifications, service workers is the gateway to your happiness. Have you felt confused by application cache and going offline? Well service workers enable offline experiences in a much cleaner way. But that is not all! If you want to see some of the cool new, advanced web platform features that you will actually use come to this session!
https://love2dev.com/blog/what-is-a-service-worker/
Learn how to build your own PWA enabled page in under 5 minutes ⚡️, what SPAs' have to do with PWA and how Shopware implements their headless commerce solution!
ServiceWorker: New game changer is coming!Chang W. Doh
I believe ServiceWorker is one of most important specifications for the next web world. Offline and its technologies are very friendly concepts to native application developers. But, now I think front-end developers have to know that for stepping into new paradigm. With ServiceWorker, you can make your web application can run offline, and it also means you can make your web application load extremely fast.
I've told about ServiceWorker very briefly in this slide. But you can understand how ServiceWorker runs on. If you want to know its usage, I highly recommend Topeka, which is a polymer demo application at google I/O 2014, that also includes material design and ServiceWorker in inside of it.
If you want to know ServiceWorker some more or in detail, I'd like to recommend to read the following, written by Jungkee Song, one of authors of this spec.
http://www.slideshare.net/jungkees/service-workers
Web Performance tuning presentation given at http://www.chippewavalleycodecamp.com/
Covers basic http flow, measuring performance, common changes to improve performance now, and several tools and techniques you can use now.
A Quick Trip Down the Rabbit Hole - An Introduction into what the WP-REST-API is and what you can do with it. This is meant as an explanation for a site owner/project lead who wants to learn what this new technology means and for the developer who wants to understand where this will take the WordPress community over the next decade and beyond.
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 PotsdamAndreas Grabner
As a Tester you need to level up. You can do more than functional verification or reporting Response Time
In my Performance Clinic Workshops I show you real life exampls on why Applications fail and what you can do to find these problems when you are testing these applications.
I am using Free Tools for all of these excercises - especially Dynatrace which gives full End-to-End Visibility (Browser to Database). You can test and download Dynatrace for Free @ http://bit.ly/atd2014challenge
A beginner's guide to setting up your development environment to build a very basic "Hello World" web part using the SharePoint Framework and resources on how to keep learning more about it.
Continuous Integration, the minimum viable productJulian Simpson
What does it mean to 'do' Continuous Integration? It used to be enough to execute your unit tests in CI. But the bar is steadily raising for engineering practices. In the last decade we've seen tremendous improvements inacceptance testing. JavaScript is now a platform in it's own right. Cloudcomputing is now vital. There's growing interest in deployment to prod.So Continuous Integration is under more pressure than ever. As the bar slowly raises for engineering practices, we ll present 2011's minimum viable feature set for Continuous Integration
Freelancer Weapons of mass productivityGregg Coppen
In the battle to stay organized, efficient, sane and maximize on billable time it helps to have systems in place to help deal with the daily business processes and management that make sure that you are working on what you should be and that projects, budgets and timelines stay on track. In particular, when you work on your own, its critical to have things like billing, time tracking and project management as a natural and seamless part of your workflow.
This session aims to be a whistle stop tour of some useful open source tools and subscription solutions I have found to be well worth their costs - including how they can be used effectively together to allow you to make the most efficient use of your time designing and developing Drupal sites.
I work as a remote contractor & consultant and my clients are drupal shops and companies needing web sites and systems designed, built, themed and/or maintained. These tools and services work for me to help stay organized and on top of my workload and help me to manage my responsibilities across multiple clients and timezones effectively.
The material in this session is geared more towards individual freelancers although much of it will be relevant for larger drupal shops and teams too.
A few of the topics I intend to cover will include
* Project Management with Redmine - an overview of this powerful open source project management system and a demo of some of the plugins that extend its functionality and integrate well with Drupal, Dropbox, Github, Chrome and others.
* Simplifying getting paid and easy record keeping - Easy invoicing, credit card processing and automatic importing of expenses using Freshbooks & Stripe
* Design to theme tricks and up and coming in-browser design tools and workflows using Styletiles, CSS Hat, SASS, Typekit, Typecast & Livestyle
* Faster Drupal development tips using Alfred & Sublime Text
* Rapid protoyping using Bootstrap/Zenstrap
* Site building strategies using install profiles and drush make files
* Deployment and Maintenance using Aegir
* Server monitoring using New Relic & load testing using Blazemeter
* Hosting and managing your site in the cloud
It is my aim to introduce ( in some cases briefly) tools and services that have made a difference to me that may have the potential to add to and improve your existing workflows.
Google Developers Group Cloud Los Angeles, Progressive Web Applications by Ta...Marie Smith
Google Developers Group Cloud Los Angeles, Progressive Web Applications by Tamas Piros, Cloudinary, Google Developer Expert for Google Chrome Developers Summit Extended December 2020
Picnic Software - Developing a flexible and scalable applicationNick Josevski
The team at Picnic Software giving a detailed walkthrough of their application architecture and development processes for a large Angular and .NET Event Sourcing application.
AD113 Speed Up Your Applications w/ Nginx and PageSpeededm00se
My slide deck from my session, AD113: Speed Up Your Applications with Nginx + PageSpeed, at MWLUG 2015 in Atlanta, GA at the Ritz-Carlton.
For more, see:
- https://edm00se.io/self-promotion/mwlug-ad113-success
- https://github.com/edm00se/AD113-Speed-Up-Your-Apps-with-Nginx-and-PageSpeed
Similar to Building a PWA - For Everyone Who Is Scared To (20)
Welcome to the first live UiPath Community Day Dubai! Join us for this unique occasion to meet our local and global UiPath Community and leaders. You will get a full view of the MEA region's automation landscape and the AI Powered automation technology capabilities of UiPath. Also, hosted by our local partners Marc Ellis, you will enjoy a half-day packed with industry insights and automation peers networking.
📕 Curious on our agenda? Wait no more!
10:00 Welcome note - UiPath Community in Dubai
Lovely Sinha, UiPath Community Chapter Leader, UiPath MVPx3, Hyper-automation Consultant, First Abu Dhabi Bank
10:20 A UiPath cross-region MEA overview
Ashraf El Zarka, VP and Managing Director MEA, UiPath
10:35: Customer Success Journey
Deepthi Deepak, Head of Intelligent Automation CoE, First Abu Dhabi Bank
11:15 The UiPath approach to GenAI with our three principles: improve accuracy, supercharge productivity, and automate more
Boris Krumrey, Global VP, Automation Innovation, UiPath
12:15 To discover how Marc Ellis leverages tech-driven solutions in recruitment and managed services.
Brendan Lingam, Director of Sales and Business Development, Marc Ellis
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
Climate Impact of Software Testing at Nordic Testing DaysKari Kakkonen
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
10. RAYMOND CAMDEN
• Senior Developer Advocate for Auth0 Extend
• Auth0 Extend, serverless, web and Enterprise Cat
demos
• Blogging at raymondcamden.com
• Tweeting at @raymondcamden
11. THE PLAN
• Cover the basics of PWAs
• Show an example
• Do this in <50 minutes
12. THE GUIDE
• By: Tal Ater
• http://shop.oreilly.com/product/06
36920052067.do
17. MANIFEST
• "Web App Manifest"
• Just a JSON file (woot!)
• Allows for "installable" web apps
• Controls behavior when launched
18. MANIFEST
• The name (as it appears in the shortcut)
• Icons (of various sizes)
• Splash screen and colors (bg and toolbar)
• Chrome
• Forced Orientation
• The starting URL (handy for passing a param to note the launch)
– https://(something)/index.html?utm_source=homescreen
22. (AUTO) ADD TO HOME
• AKA Web Install Banners
• *Current* criteria is:
– manifest with short_name, name, 192x192 icon (png only), start_url
– service worker
– https
– "Meets a site engagement heuristic defined by Chrome (this is regularly being changed)."
• Event is fired: beforeinstallprompt
• Details: https://developers.google.com/web/fundamentals/app-install-banners/
26. THANKS IOS
• Doesn't support manifest :(
• But you can configure...
• https://developer.apple.com/library/content/doc
umentation/AppleApplications/Reference/Safari
WebContent/ConfiguringWebApplications/Confi
guringWebApplications.html
28. SERVICE WORKERS - INTRO
• JavaScript
• A script registered via a script
• Now - forget everything you know about <script>
29. "REGULAR" JS
• You load foo.html
• foo.html is all like <script src="ftw_js_is_awesome_unicorns.js"></script>
• Code executes while the tab (window) is "alive"
• Close the tab and ftw_js_is_awesome_unicorns.js goes bye bye
30. SERVICE WORKER JS
• Runs in parallel to pages in it's scope
• Can't actually do anything the first time it loads
• Can run when you're not even on the page
• Can intercept every single network request (to be clear, not just XHR)
• Can work with the browser cache
• Can fire off notifications while you're away (and you totally won't abuse this)
• Can respond to push notifications (and you totally won't abuse this)
• Can help you sync data
• Can't touch the DOM
31. MORE SERVICE WORKER
• You can (and must) check for support
• Requires https, but localhost is ok
• They have a life cycle
• Devtools will be very, very helpful
34. CACHING!
• CacheStorage API (LINK)
• Keyed by name (this is how you version)
• Ability to add one or multiple URLs
• Ability to read from the cache (and delete)
43. EXCEPT...
• You want to change a file
• You only want to use the cache if offline
• You want some mix of things where you use the cache first then network but then
sometimes you want to hit the network first and then cache and oh yeah maybe you
want to use the cache and that's cool but maybe you want to hit the network in the
background and passively update stuff and oh my god does this end?
44. GOOD NEWS/BAD NEWS
• Good News: Caching Strategies exist
• Bad News: You're responsible for figuring it out
• See "The Offline Cookbook" -
https://developers.google.com/web/fundamentals/instant-and-offline/offline-
cookbook/
45. EXCEPT ROUND TWO...
• iOS - no support for Service Workers
• But officially "in development" for WebKit
• AppCache
46. BACKGROUND SYNC
• Another ServiceWorker feature
• App js tells SW js - "hey, start syncing Foo"
• SW says - "Ok, no problem. I'll get around to it."
• SW will try to do Foo (you write the logic)
• If it fails, it will try again (and again...)
• Finally, it will try one last time and *tell* you as well
• https://developers.google.com/web/updates/2015/12/background-sync
49. PUSH NOTIFICATIONS
• Two APIs - Push and Notification
• Notification - https://developer.mozilla.org/en-US/docs/Web/API/notification
• Request permission to show a notification
• You can show it
53. PUSH
• User subscribes to push messaging (two step process)
• Your server sends a message to central Message server
• Messaging server talks to Service Worker
• Service Worker does whatever (probably Notification)
64. SAFARI AND PWAS
• Supported in betas for macOS (really, we’re calling it this now?) and iOS
• Service Workers (Caching) and App Manifests
• No Push or Sync
• And it gets better: https://medium.com/@firt/pwas-are-coming-to-ios-11-3-cupertino-
we-have-a-problem-2ff49fd7d6ea
65. ANY QUESTIONS?
• Email me at raymondcamden@gmail.com
• Visit my awesome blog at raymondcamden.com
• Follow my awesome Twitter account at @raymondcamden
Editor's Notes
Note - I'll share more resources at the end
Progressive is a fancy way of saying we add features that enhance the experience for people who support it and do NOT break for people who don't. The "net result" for that is we can use kick butt new features for the browsers because we know - absolutely - that if you don't support them - you can still use the site w/o any problem at all. I'm an old guy and I can remember years of "oh, this browser supports X but I can't use it because it's only available 15% of the time" - and I love being able to kinda say "so what" to that.
Web - I really hope I don't have to explain what the web is.
App - and here's the part where I disagree - strongly. I dislike the fact that a lot - not all - but a lot of discussions about PWAs focus on "web apps". Things like To Do lists or maybe your banking account. You can absolutely make use of PWA principles for non "appy" type stuff. So for example, the app I'm demonstrating at the end is a content site. Not an "app" at all. And that's totally fine. Basically I want you to think of the things we're covering today as improvements you can do to *any* site.
a term! yes - that's probably kinda dumb, but in some ways, this is a bit like how "Ajax apps" and "web 2.0" was a thing for a while. We used it as a way of describing apps that used certain technologies (like XHR) to make for better sites
Two people
There are a set of guidelines that a PWA *should* follow and I'll discuss them in the next slide
On top of that - there is also a set of 4 baselines that Russel used later as a "must" have. I'm probably not going to cover that because I don't want you to go ino this thinking, wow I did 3 of the 4 things and I don't have a PWA - I am a horrible, horrible, person. Heck no. If you do ONE thing to make your site better than you should be very HAPPY about that and don't use an arbitrary list as a marker for failure or success.
Progressive - we covered this already - basically don't break for older browsers (legacy)
Responsive - looks good on mobile
Works offline - multiple thing here to consider but note the bold text - there is MORE than just online, offline
App-like - im going to kinda throw my hands up here and say "take that as you will" - I've already discussed my thoughts about "app vs content" sites and I think if your PWA looks like a blog because it IS a blog, that's ok with me
Fresh - basically not serving stale content - we'll talk about that when we cover network crap and service workers in a ssec
Safe - https. Done. DO it. It's free. Just - do it. And the tech I'm discussing today simply doesn't work on http. Period (although note you can run it on localhost)
Discoverable refers to manifest files that identy a PWA to the system as something the user can add to their home screen - that's a tech we'll cover called manifests
Re-Enagleable simply means the PWA brings you back and that's done via push
Installable means being able to add to the home screen which comes back to manifests
Linkable - URLs - the good ole tech - in theory you don't even have to think about this. If you ARE building an app though you need to think about app state and things like - if Im on tab 2 of my app - can I share that URL with you and when you load you get tab 2 as well..
So what does our tech stack look like?
The first is the manifest - a simple JSON file that describes our app at a meta level. This is what will allow us to "add to desktop" and get things like icons and the such.
Service Workers are the main way we'll work with the network. This is INCREDIBLY powerful. I'll be describing how they work, what they can do, but there is no way in heck I'll be able to go over every single aspect of it. Rather I'm going to give you the lay of the land so to speak. To be honest, that's more appropriate anyway right? As a developer, I want to do know I can do X with Y and I'll Google for the actual code when I need it later.
And then App Shell.... so again - I've made my feelings known on this. If you are building an app and using a modern framework like React, Angular, or Vue, then you have this baked in (technically not with Vue, you have to add stuff above the base support, but that's ok cuz Vue is awesome). So going back to what your working with - if it is an app - you will want to ensure the base HTML, CSS< etc loads immediately and content loads into the shell as you request stuff.
technically the web app manifest
luckily - just a JSON file that you'll link to from your html
It allows you to create an "installable" web app. Now installable is in quotes for a reason. Your web site isn't being "installed" like a native app on your device.
Rather, it's like a "super" bookmark - you have control over how the web page runs when launched from the manifest - by control I'm talking mainly about how it looks - it's not magically adding native like features ala Apache Cordova or Ionic.
In terms of what you can control with the manifest
first is the name as it will appear on the home screen of the device, so your blog may be: The Many Wonderful Adventures of Raymond Camden and his too many kids - but you probably want something like "Ray Camden" when saved to the home scree
you can also specify icons for different device type resolutions
splash
CHrome of what you see - not the browser - basically two choices with the default being a regular browse experience or full screen (what the manifest calls 'standalone')
finally - you can specify a starting url - and the typical use case here is to add a query param like
Ok, I've got two demos here. Show manifest1 and manifest2
SHow manifest one, show Chrome dev tools
Unfortunately - this isn't enough to get to the "Add to Home Screen" functionality
event lets you determine if the user added it or did not, AND actually lets you defer it. So if you don't want Chrome to auto prompt, you can actually save the event and fire it yourself later, like via a button click
To be clear - this is for a MANUAL test
First off - it's JavaScript. woot! We all know JS, right?
Secondly - this is a script (written in JS) that is registered via a script (written in JS). So basically what this means is you'll use your regular JS, like your app.js that you have for your site, and you'll say, over here I have serviceworkerawesome.js, I want you to use this as a SW
Notice I have the script tag - cuz we're not talking about some new language - instead were talking about JS that behaves in a way you aren't used to
SW have an idea of scope, basically a way of saying, I want to use a sw for ALL of foo.com, which is what you would normally do, but you CAN, if you choose, use them in a subdirectory, like /app or somesuch. But here's the thing - when registered, they always run
And if you leave your site and go to CNN.com, they still live. this is how stuff like push notifications can work
to be clear, it is NOT persistent - so you can't store data in a persistent way there (but the browser already supports that)
they are -in essence - a proxy server
flip side is - they can't touch the DOM - there's ways around this
progressive - dont forget it chump
Second thing to note is - they have a life cycle
you load a SW - and it becomes after
you edit the SW to add some function
you reload - and the new SW does NOT become available immediately- that's cuz you have one installed already that was running when the page loaded. It will only load when you've closed down the browser or navigated *away* from the site (technically scope)
You CAN use devtools to get around that - thank god
Reminder about it being in your 'main' JS
SHow sw1, show the debugging of the SW
It does nothing but it's there - woot
First demo sw2 OFFLINE
purpose is - showing the proxy effect
then show sw3
showing it working
show add to homescreen in desktop
Great! We have a cache
It works offline
Tags are registered ONCE only
Notification - NOT just a PWA thing
Request permission
Show a modal
icon
buttons
vibration
tag == silent update (plus renotify - shake)
stuff not supported - wake screen, sound, silent