What are PWAs or Progressive Web Apps? According to Jeff Burtoft (@github) they are: A development approach using a set of technologies that allows web content to deliver app-like experiences, including offline functionality, notifications, and device access. What's special about PWAs? They are progressive – i.e. they work everywhere but get better with better devices They don't need an app store – they are just another (enhanced) web resource Try before you buy, install, uninstall – it's all fast and easy What does a PWA consist of? it needs to be served over a secure protocol, e.g. https it needs to have an app manifest, so user agents know about its requirements and can give access to desired features the manifest is just another resource on the web search engines and app stores can index and ingest them the other big part of a PWA is the Service Worker What is a Service Worker? In the MDN web docs we find this: Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available). We also find a few words on the roles which Service Workers are designed to fulfil: They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs. [highlights are my own] Device Support for PWAs The browser compatibility for Service Workers is still pretty weak: Internet Explorer will never have it, Edge is currently implementing its support, and development in Safari WebKit has really just begun – while Chrome, Firefox, and Opera support pretty much the whole API already: What this means is that iOS users are currently completely cut off from the newest and hottest that's happening in the web landscape, while Windows users will soon be able to start using PWAs natively through UWP apps – more details on that e.g. here. In the meantime, Android users can already take full advantage of PWAs today thanks to the advanced implementation present in Chrome. Resources to get started with PWAs Extensive documentation: the Service Worker API on the MDN The Service Worker Cookbook by Mozilla: https://serviceworke.rs/ Adding a Service Worker to your site the easy way: Google Workbox Create a Progressive Web App in your browser: PWA Builder by Microsoft (was ManifoldJS) Auditing tool for PWAs (among others): Google Lighthouse – which is actually built into Chrome now under the Audits tab in the Chrome DevTools (great stuff!) Happy coding!

As of today, 20 May 2016, Ionic 2… is still in Beta status, the last update being beta 6 on 25 April 2016 sports the Ionic View app which allows to rapidly publish new versions of your Ionic or even Cordova app to Android and iOS devices [blog post here, 6 April 2016] is not yet supported as target by Creator, a drag-&-drop prototyping tool for Ionic apps [blog post here, 31 March 2016] has Windows Universal Platform App support, besides supporting Android and iOS [blog post here, 29 March 2016] can be used with Angular 2 but does not necessarily have to be prefers TypeScript as development language and is itself written in TypeScript A few valuable resources I stumbled upon while reading and following links: 260+ Ionic Framework Resources 60+ Ionic Framework 2 Resources 5 min Quickstart with Angular 2 (official site) Now, go and have fun with Ionic 2!

In the process of making Camping.Info more mobile-friendly, I've needed to move around pieces of HTML in the DOM time and again. At last, I've come up with two little helper functions that I wrapped into a little jQuery plugin that I want to share in this post. When To Use Move-Restore The DOM tree on every page on Camping.Info is quite large and often convoluted. At least partly this is a consequence of the many UserControls we use to build our pages on the server using ASP.NET WebForms. To achieve a more mobile-friendly layout of these pages we needed to position certain elements differently, hide some and show others, and in the end also move around some critical parts to fit the mobile design. Much of work could and has been done by our designer via CSS but for the rest of them we need to touch the DOM tree. Move-Restore proves especially helpful in the case of a user-agent switching between two different layouts of your site, e.g. the desktop and the mobile layout (in case you have just those two), because it easily allows you to restore elements you previously moved around. How to Use Move-Restore Just call $("#move-me").moveTo("#target") when you want to move something e.g. in your mobile layout and at a later point, e.g. when switching back to your desktop layout, call $("move-me").restore(). That's it. I've also put together a fiddle to show how to use the plugin here. Also, have a look at the usage.html in the below gist. How It Works The beauty of this plugin, in my opinion, lies in the fact that you don't have to manually keep track of where you get an element from to later restore it. Internally, the plugin inserts a <script> element in place of the moved element. The (highly probably) unique id of that script element is stored as a datum on the moved element and later retrievable when we need to restore the element to its original position. Currently, at revision 2 of the gist, there's one option you can tweak to match your scenario: the jQuery method the plugin should use to move the selected element(s) around. By default, move-restore uses appendTo but there are other sensible options, e.g. prependTo, insertAfter, or insertBefore. Just pass the one that fits your needs as the second optional argument to moveTo. Use Move-Restore at Your Convenience I invite everyone to try and use this handy little plugin and am open for feedback. Happy coding!