Danny Moerkerke @dannymoerkerke Twitter profile | Pikagi

Pikagi

Danny Moerkerke

@dannymoerkerke

2,749

Followers

891

Following

213

Media

3,939

Statuses

PWA and Web Components specialist, creator of . I write about what the modern web can do. Email list:

Amsterdam

https://t.co/Uzxjw3AAdc

Joined August 2011

Don't wanna be here? Send us removal request.

Pinned Tweet

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

14 days

I just published my course "Mastering Web Components" on Gumroad. This course will take you from beginner to expert on Web Components by guiding you through building an image gallery component. You will learn: - how to create and register a Web Component - how to effectively

2

14

51

Last Seen Profiles

@FIIKSA

@FootBeauties

@CohenMoishi

@nvanderklippe

@GummeMi

@Francis_Gatare

@mariacmpfg

@mrs_leonard80

@onlyyoontv

@Enciphered

@CharltonInvicta

@tunsband

@VikasBa95541531

@almutlaqih87730

@HonJibrilAHaji

@COHouseDem

@2D_dey

@WFPackerHoops

@abdulrahman_ssa

@hoku_hodohodo

@Besmiallah_111

@cooming_030

@SuicideChrist

@phreesia

@Daddytyron38679

@ChefMaudit

@radio_musen

@Coach_Smit_T

@DuffmanLoL

@RachelT1722

@onlyyoontv

@CiriResists

@BrendaNahir_1

@benwinslow2023

@DFastAss

@TSnyderUSA

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

10 months

Progressive Web Apps can now: - access the native file system - work fully offline - receive push notifications - be installed to any device - run background tasks - schedule tasks while offline to be run when back online - authenticate with passkeys (no password needed) 🧵1/2

58

211

2K

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

10 months

PWAs work on iOS, Android, and web with just one codebase. PWAs update automatically. PWAs are lightweight, just HTML, CSS, and JavaScript. PWAs are discoverable by search engines. PWAs are shareable by URLs. PWAs are secure as they run in the browser sandbox

90

96

1K

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

3 years

Photoshop is now on the web VS Code is now a PWA Outlook is now a PWA Teams is now a PWA It's hard to overstate the importance of all this. The web was already moving into the territory of desktop with GMail but Photoshop is a whole other level.

32

151

835

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

The View Transitions API is an absolute game changer and will effectively deprecate single page apps in most cases. I'm implementing it in What PWA Can Do Today. What you see in the video below is an MPA that does a full page reload on each navigation @jaffathecake 🧵1/3

15

138

734

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

PWAs work again as expected on iOS 17.4 Notifications, persistent storage and badging are back

23

68

548

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

I really don't get the condescending and scornful comments I get from iOS developers on Apple's decision to kill off PWAs on iOS 17.4 So you think it's not a big deal because you think PWAs are crap anyway? That's not what this is about. This is about Apple trying to kill the

35

89

405

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

9 months

PWAs can now access the file system on desktop and both Android and iOS support the Origin Private File System! 💪 Your PWA can work with OPFS like any other file system like create directories and files or save any type of file. Demo: 🧵1/2

7

60

379

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

It seems PWAs are officially dead on iOS in the EU 😞 Bottom line: Apple says it’s “not practical” to build integration for PWAs installed through other browsers because of “the other demands of the DMA and the very low user adoption of Home Screen web apps” 🧵1/8

14

71

311

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

If what Apple is doing to PWAs sounds familiar: in the 1998 antitrust court case Microsoft claimed removing IE from Windows would cause it to slow down and malfunction. Exactly what Apple claims now: if we have to make changes things will break. 1/2

10

39

299

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

10 months

- do face and barcode detection - do speech recognition and synthesis - access device sensors - access the user's contacts - initiate payments - be default apps to open files - communicate over Bluetooth and NFC - record and edit audio and video The time is now for PWAs 💪

15

15

279

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

Let's not forget that Apple's decision to keep PWAs on iOS 17.4 is a legal decision. It's not that Apple suddenly decided to support the web. This battle has only just begun.

9

29

250

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

9 months

When installing a PWA, Chrome on desktop and Android can now show richer install UI including a description and screenshots. A total of 8 screenshots can be defined in total for desktop and mobile. Here's how to add the install UI: 🧵1/5

Tweet media one

Tweet media two

9

35

249

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

3 years

More than 75% of the top 1 million websites use jQuery and less than 14% use React. Other frameworks have single-digit usage. Yet the majority of conferences, newsletters, meetups, and blogs are all about frameworks. What does that tell about us as a profession?

69

37

247

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

1 year

@araghougassian You could do the same thing with a picture of a shopping street in Amsterdam and a highway in Cleveland. This is very lame.

12

0

224

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

10 months

Tweet card media

What PWA Can Do Today

A showcase of what is possible with Progressive Web Apps today.

whatpwacando.today

2

24

217

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

I cannot emphasize this enough: The DOM is NOT slow. It's actually very fast, especially inside Web Components using Shadow DOM, as I will explain. The misconception that the DOM is slow comes from misuse. Good use of DOM = good performance. Let me explain:👇

@nameandnums

FiftyP

2 years

@vivainio @dannymoerkerke I had assumed that excessively updating the dom could lead to performance issues. If the attributes are also used in css then layout too. Same as any dom changes, no? Am I mistaken?

4

0

1

3

46

210

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

The EU is investigating Apple’s decision to disable PWAs in the EU

Tweet card media

Apple’s decision to drop iPhone web apps comes under scrutiny in the EU

App developers are fighting back.

www.theverge.com

3

42

208

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

10 months

In Chrome 117 you can now easily animate the opening and closing of dialogs and popovers with just a few lines of CSS, no JavaScript needed 💪 Codepen link below: 🧵1/5

5

21

204

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 months

Chrome 125 now supports Anchor Positioning! 🎉 Anchor Positioning enables you to tether elements together so you can position them relative to each other without a wrapper and define a set of fallback positions so they're always positioned inside the viewport. For example, you

4

22

180

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

9 months

Here are some common misconceptions about PWAs that are (largely) false yet persistent. 1. A PWA needs to be a SPA. A PWA and a SPA (single-page application) are two different things. You can build a PWA any way you want since it's just a website with extra powers. 🧵1/16

6

44

182

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 months

@BenLesh How about disabling the button while the handler is running? Or some other way to assure that only one handler is running at a time.

11

0

161

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

I updated my iPhone to iOS 17.4 beta 2 and PWAs now only open as a web page. That means push notifications are gone but at least the service worker still seems intact as the PWA still works offline. The service worker doesn't show up in dev tools anymore

27

30

158

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

4 months

View Transitions are now in Safari Tech Preview 191 🎉 The transitions are still a bit wobbly but it's a start. The feature is also still behind a flag and marked as "testable" so not stable yet. At least this demo now works! You can enable it through Develop -> Feature Flags

3

25

154

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

“We can build software for the Vision Pro but we didn’t manage to make PWAs work on iOS” 🤡

@mysk_co

Mysk 🇨🇦🇩🇪

5 months

It's official. iOS will not support Progressive Web Apps in the EU. It would be great if Apple provides the basis of this claim: "We expect this change to affect a small number of users"

Tweet media one

65

119

585

2

18

150

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

iOS 17.4 is here and PWAs indeed work again like they did before in the EU: Notifications, badging, persistent storage and standalone mode work correctly

8

10

142

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

If we can say anything positive about this whole PWAs on iOS saga, it should be that an awful lot more people now know what a PWA is

7

5

138

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

Worse, features were never removed from IE6 as far as I know

@davidfowl

David Fowler

5 months

So, Safari is the new IE6 of web browsers.

83

86

1K

3

7

129

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

4 years

I’m giving back to the web dev community! For every React, Vue or Angular component you tweet I’ll send back a Web Component that does the exact same thing with less code!

10

19

127

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

In case you’re wondering if anyone is using Web Components: - GitHub - YouTube - Twitter (embedded tweets) - SalesForce - ING - Photoshop web app - Chrome devtools - the complete Firefox UI - Apple Music web client

17

15

114

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

4 months

Just like native apps, PWAs can now have tabs on desktop. I added a tabbed layout to What PWA Can Do Today and will explain this in detail in the new Edition of Modern Web Weekly. Demo and subscription link 👇

9

15

118

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

4 months

My wishlist for PWAs: - a proper native installation flow - being able to let a PWA run in the background with a tray icon - being able to link to device settings - being able to display an incoming call through WebRTC in full-screen mode - shortcuts that are accessible when the

19

12

111

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

6 months

PWAs have their issues, but guess what you face with native apps 😱

@dhh

DHH

6 months

Apple is going to poison the one victory Epic secured in their lawsuit so bad nobody would ever think to use it. They want a 27%(!!!!) commission on any link from an app to a website, reporting every few weeks, AND the right to audit your books?? Insane.

Tweet media one

211

668

4K

3

12

111

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

When you now install a PWA on ios 17.4 beta 2 the install sheet indicates you can “quickly access this website from your default browser.” Disabling PWAs looks very intentional and not like a placeholder for some future API 😞

Tweet media one

10

15

107

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

3 months

PWAs are not perfect (yet) but at least you won’t be kicked out of the App Store if Apple doesn’t like your app

7

9

105

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

How to convince your boss to build a PWA instead of a native app: - PWAs consistently improve load times, user engagement, bounce rates and revenue - No need to build your app 3 times anymore = lower costs! - Updating is automatic. New version? Just deploy it and you're done 👇

10

17

104

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

Another thing that’s broken by Apple’s decision to disable PWAs in the EU on iOS is persistent storage

12

16

101

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

6 months

This may just be huge for PWAs. We’ll be able to install a real Chrome browser on iOS and finally have fully functional PWAs there too 🎉

Tweet card media

iPhone sideloading is reportedly ready to go, with the big twist we expected

Apple will reportedly enable iPhone sideloading in the coming weeks with a big caveat: It'll happen only in Europe.

5

19

102

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

4 years

Today I launch my side project What PWA Can Do Today, a showcase of what is possible with Progressive Web Apps today. The site is itself a PWA so you can install it and play with it. Looking forward to feedback! #pwa #progressivewebapps #javascript

Tweet card media

What PWA Can Do Today

A showcase of what is possible with Progressive Web Apps today.

whatpwacando.today

10

36

99

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

This low user adoption of PWAs is a situation that Apple helped to create by deliberately providing poor support for PWAs for years. I can't really judge if what they say makes any sense, but it seems like a smoke screen to me 2/8

2

7

101

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

The simple fact that Web Components are first-class HTML elements should be enough reason to use them. They’re a standard and will be around long after your favorite framework is gone.

5

12

94

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

Here's my take on the new stunt Apple pulled (free article)

PWAs Are Now Officially Dead On iOS In The EU

Apple gives developers, customers and regulators the finger.

4

21

94

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

Besides the current disabling of PWAs there are more issues on iOS: - Picture in Picture doesn't work for streams - wake lock doesn't works for installed PWAs - dark mode switching doesn't work when the app is open - implementation of push notifications is very minimal

7

8

91

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

I just published a new article on the situation of Apple disabling PWAs in iOS 17.4 beta release

Tweet card media

Apple Wants To Kill PWAs

It’s now more clear than ever

6

29

91

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

Apple is trying to kill the only viable alternative to their App Store that’s free from unreasonably high fees and arbitrary admission criteria. Don’t let them fool you into thinking they’re not. Here are the details of what has changed for PWAs on iOS

Tweet card media

PWAs On iOS: Where We Are Now

The confusing details of Apple’s quest to kill the only viable alternative to their App Store

3

24

88

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

Very special goodbye beer from my colleagues at ING 😉🍻

Tweet media one

7

3

90

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

PWAs on iOS 15.4.1 and 15.5 are seriously broken. - Service Workers don't reach the "activated" state - No Service Worker in Develop menu with remote debugging - No offline support - No console logging and in 15.4.1 postMessage from SW doesn't even work 👇

12

18

83

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

If Apple's decision to disable PWAs in the EU affects you or your business, please fill in this new survey by the Open Web Advocacy. Thanks 🙏

@OpenWebAdvocacy

Open Web Advocacy

@OpenWebAdvocacy

5 months

Apple will break Web Apps (PWAs) in the EU within the next week ‼️ In order to stop them, we need evidence from you that the harm they are choosing to inflict on EU businesses and consumers is real and significant. 👇👇 Please fill in our NEW more detailed survey! (below)

Tweet media one

3

83

197

3

31

83

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

9 months

In Chrome on Android and desktop, the installation of a PWA can now match the installation experience of a native app. I explain how this works in my new free article:

Tweet card media

A Better Install UI for PWAs

A step towards a native installation experience

8

18

83

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

8 months

Shortcuts now work for installed PWAs on MacOS! 💪 (not for Home Screen web apps installed through Safari)

Tweet media one

3

16

82

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

This is definitely not good news. It looks like PWAs will still be disabled in the final version of iOS 17.4. It may still be temporary as Apple finds a solution to comply with DMA regulations but as Apple is totally silent, we just don't know. You don't treat devs like that

@firt

Maximiliano Firtman

5 months

We can confirm that PWAs on iOS 17.4 are turned off for EU users on b3, while Apple keeps silent about it as if it's not happening. At this point, it’s a feature disabled on purpose, and they want to keep it that way for the stable version to ship in a few weeks to all users.

21

49

244

9

14

83

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

9 months

Every web app you build should work offline and should be designed with offline in mind. There's no reason to show your users a blank page when there is no network. This is terrible UX. Provide a better user experience by making your app offline-first: This means: 🧵1/4

6

5

82

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

9 months

There's still a lot of confusion around push notifications on iOS, so for clarity: - push notifications are supported *by default* from iOS 16.4 for *installed* PWAs - push notifications also work when the PWA is not running. demo:

2

12

79

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

10 months

@jes_alejos In Chrome on desktop and Android it's now possible to show install UI with a description and screenshots, which will hopefully convince your customers that this is legit.

Tweet media one

Tweet media two

4

5

77

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

Great questions about Web Components! Here's my response to each question and a few others that were asked in the comments: Q1. Is JS a dependency? A: Web Components are just like any other HTML element. While they can be rendered without JS, it is required for interaction. 👇

7

23

75

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

Microsoft said at the time they could then only offer an obsolete and a malfunctioning version of Windows and went so far to show falsified videos in court that would prove this. Inspired by Microsoft, Apple will put up a fight that will take years .

Tweet card media

United States v. Microsoft Corp. - Wikipedia

en.wikipedia.org

0

3

75

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

I’m an Apple fanboy at heart but Apple is indeed rapidly destroying one of their greatest assets, goodwill with developers

@dhh

DHH

5 months

Apple is speed-running the fastest destruction of goodwill with developers I've ever seen in 40 years of computers. It took Microsoft much longer to poison the pond in the 90s. It's really a sad sight.

48

306

3K

7

5

75

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

Any developers that still claim that “the DOM is slow” and that Virtual DOM is the answer shouldn’t be allowed anywhere near a codebase. Ever.

8

19

74

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

3 months

View Transitions are now stable in Safari Tech Preview 192 🎉 Demo link 👇

5

4

73

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

1 year

@amcdnl This is the way if you can’t be bothered to properly learn CSS.

13

0

74

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

6 months

View Transitions can be used not only for page transitions but for animating any change in the DOM. Here's how I animate moving a list item from one list to another just by using the native .append() method Codepen link and explanation 👇 🧵1/5

Tweet media one

2

7

73

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

Reflecting properties to attributes is a hidden gem of Web Components that enables you to easily reflect the state of a component to its view through CSS. It frees you from having to add JavaScript expressions to a component view like is often done with JSX. Let's dig in: 👇

2

14

71

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

Please sign this open letter to Tim Cook if you are affected by Apple sabotaging web apps on iOS 17.4

@OpenWebAdvocacy

Open Web Advocacy

@OpenWebAdvocacy

5 months

Open Letter to Tim Cook: Sabotaging Web Apps is Indefensible 🔨 Apple breaking EU Web Apps in < 7 days 😢 Many companies will be bankrupted / severely hurt 🌎 This does global damage to the web 👇SIGN THE OPEN LETTER (Link below)

Tweet media one

7

160

255

3

19

69

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 months

When you need to fix a critical bug in your PWA, just deploy the fix to your webserver and you're done. Users will automatically get the update the next time they open the app. When you have to fix a critical bug in a native app you can submit the fix to the app stores. Good

6

4

73

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

It looks like ElementInternals will finally land in WebKit so all major browsers will enable Web Components to be first-class form controls. And hopefully class-based styling through custom pseudo-classes as well 💪

Tweet card media

Implement ElementInternals by shvaikalesh · Pull Request #2690 · WebKit/WebKit

c51d445 Implement ElementInternals https://bugs.webkit.org/show_bug.cgi?id=197960 Reviewed by Ryosuke Niwa. This change implements ElementInternals interface [1] with a `shadowRoot` getter only, ...

4

15

70

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

3 years

I've witnessed the entire Polymer framework at ING Bank being replaced with just lit-element in a huge app. It was literally all we needed. Tell me again why your tiny app needs React, Redux, hooks etc.

@slightlylate

Alex Russell

3 years

@brianleroux @AhmadNassri @benadida 💯 There's a narrative that "WC might be fine for the leaves, but you need <bloated thing> for full apps", and that seems to come from folks who don't understand what they actually do and don't need. Puncturing it has huge value.

3

2

21

3

20

66

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

The Media Session API finally works on iOS 15.5! It will show controls and album artwork on the lockscreen and audio will continue playing even when the PWA is minimized. Check out a demo here:

Tweet card media

What PWA Can Do Today

A showcase of what is possible with Progressive Web Apps today.

whatpwacando.today

4

17

66

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

7 months

Face detection and barcode detection now works for PWAs since iOS17 as well. For now you need to enable this manually through: Settings > Safari > Advanced > Feature Flags > Shape Detection API

Tweet card media

What PWA Can Do Today

A showcase of what is possible with Progressive Web Apps today.

whatpwacando.today

3

9

65

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

My mission is to demonstrate the power of the modern web. I believe it’s the only way to get developers to build more capable web apps that are more than just dumbed down versions of their native apps. This hurts the web and makes users believe web apps are not good enough

4

1

65

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

Do Web Components require JavaScript? Why choose Web Components over frameworks? Do I always need Shadow DOM? Can Web Components be server-side rendered? Here’s what you need to know:

2

20

60

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

9 months

Tired of this? Progressive Web Apps update automatically 💪

Tweet media one

3

5

62

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

Cheers! To a great future for PWAs!

Tweet media one

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

Apple may just pull another stunt tomorrow but at least this is good news! 🎉

3

1

59

2

1

61

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

3 years

Killer features of Web Components: - standard, available anywhere, no framework needed - ability to extend and enhance existing HTML elements - truly scoped HTML and CSS - compatible with any framework

3

13

61

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

I just published Modern Web Weekly #24 🎉 In this edition: - PWAs are back on iOS 17.4 - Shortcuts for PWAs on MacOS - Scoped CSS for Web Components without Shadow DOM - PWAs as file handlers - Anchor positioning with pseudo-elements - Declarative Shadow DOM in Firefox Modern

3

10

60

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 months

The greatest misconception around offline support for web apps is that it means your app should provide the exact same user-experience when the app is totally offline as when the app is online. This is false. Users are rarely completely offline for a long time. A far more

1

8

59

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

Apple may just pull another stunt tomorrow but at least this is good news! 🎉

@mysk_co

Mysk 🇨🇦🇩🇪

5 months

Great news: PWAs are back in the EU, albeit only on WebKit. Thanks a lot for everyone who echoed the concerns of many developers around the world. Your voice matters, and Apple has listened to it. #Apple #PWA #WebApps #iOS

7

23

138

3

1

59

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

Indeed no response from Apple on this bug ticket regarding the disabling of PWAs on iOS 17.4. Not a * single * response. Zero. Zilch. Zip. Nada. Nothing. This is utter contempt 🤬

2

12

59

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

Apple is effectively hiding the PWA revolution from iOS users. Let that sink in for a minute.

3

7

58

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

11 months

View Transitions are now a W3C candidate recommendation and both Firefox and Webkit have announced support! Cross-browser support coming up 🎉

View Transitions: The Final Frontier For Web Apps?

Here’s how to make your web app look like a native app

1

9

57

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

@awesomekling What’s the issue exactly?

4

0

56

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

Well put. Among all the rage over Apple’s mindless decision to disable PWAs in the EU, let’s not forget the Webkit team is not to blame

@nic_o_martin

🤷 Nico Martin

5 months

Imagine beeing an engineer at Webkit/Safari working your ass off implementing great features so your product catches up with the other engines, just to see all your work being used as a pawn to enforce company interests..

6

18

118

6

7

55

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

Don't render unnecessarily long lists. Cache selectors. Don't change very large parts of the DOM when not necessary. Use CSS as much as possible instead of JavaScript. Use CSS Containment. When using Web Components, use Shadow DOM and scoped CSS. You'll find DOM is not slow

4

5

55

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

1 year

I finally got server-side rendering web components working with lit and lit-ssr 💪 lit-ssr still has many gotchas and it's been quite a rough ride. To prevent you from pulling out your hair as well I'll share here what I've learned. Let's go 🧵

5

6

55

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

I use a Service Worker to stream all responses so page navigations (full reload!) are very fast. It's the same technique I use here: In the coming days I will move the complete app to an MPA and only serve the SPA to non supporting browsers. 3/3

6

4

55

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

8 months

Your web app can now download files in the background, even when it's not running. I explain how you can use the Background Fetch API to do this in my new free article

Tweet card media

Your Web App Can Now Download Files In The Background

Background Fetch API is another PWA superpower

2

9

54

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

Custom States enable you to style Web Components based on states with pseudo-classes (just like :checked, :disabled, :hover etc) but now you can define these yourself! For example: my-element:--some-state { ... } I explain this in my new article:

4

22

53

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

1 year

View Transitions are the final frontier to make your web app look like a native app with app-like page transitions. In my new article, I explain to you in-depth how to add these transitions to your web app:

View Transitions: The Final Frontier For Web Apps?

Here’s how to make your web app look like a native app

2

13

52

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

6 months

I added a View Transitions demo to What PWA Can Do Today. In supporting browsers it already uses them, in the demo you can now choose from 4 transitions on mobile and 2 on desktop. View Transitions are supported in Chrome, Edge and soon in Safari and Firefox 🎉 Demo link 👇

3

4

53

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

I added a demo for the File Handling API to What PWA Can Do Today. This API enables web apps to register as file handlers with the operating system so you can choose your PWA as the app to open the file with. On Windows and ChromeOS you can set a PWA as the default app to open

4

4

51

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

10 months

On MacOS Sonoma, web apps added to the dock (Apple's version of PWA) can now be opened from a URL, although it's always opened in Safari first with a banner that offers to open the PWA. I'm not aware of any way to open the PWA directly from a URL Not perfect, but it's a start

3

8

50

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

10 months

What PWA Can Do Today can now also be installed as a sidebar app in Edge browser. To enable this for your PWA, add the following to your manifest.json: "edge_side_panel": { "preferred_width": 480 } 🧵1/3

3

12

51

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

3 months

View Transitions are now in Safari Tech Preview 192 and can be enabled by enabling the feature flag (Develop > Feature flags) I modified the demo at What PWA Can Do Today but noticed that not everything works as expected yet. You can see in the recording below that the flip

2

5

50

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

1 year

I went buildless with What PWA Can Do Today using import maps. No more Webpack. You can read now I did it in the next episode of Modern Web Weekly.

Tweet card media

What PWA Can Do Today

A showcase of what is possible with Progressive Web Apps today.

whatpwacando.today

3

13

49

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

Claiming they can only do this for regular web apps sounds like bogus to me and an awful lot like Microsoft claiming they couldn't provide browser choice in the 90s. I'm sure the EU Commission won't accept this and I think Apple knows it. 7/8

2

5

49

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

The reason I believe firmly in PWAs is their potential. Potential is what ultimately determines their success, not any technical limitations that (temporarily) hinder them. PWAs are: platform-independent, one app for all lightweight easily discoverable updated automatically

3

9

48

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

5 months

It's not surprising that Apple will fight hard to keep PWAs from competing with native apps but I'm afraid this will be a long and dirty war. Thanks to @mysk_co for this link: 8/8

1

7

49

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

1 year

Face detection is coming to a browser near you! I added a face detection demo to What PWA Can Do Today. Currently only in Chrome/Edge Canary and Safari Tech Preview. Chrome needs experimental web features enabled and Safari the Shape Detection API

Tweet card media

What PWA Can Do Today

A showcase of what is possible with Progressive Web Apps today.

whatpwacando.today

1

8

48

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

@wardpeet Yes,

2

5

46

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

@mhevery

Tweet media one

3

4

46

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

4 months

Every web app should work offline. The essence of this is that the web app provides the best possible user experience when the network is bad or there is no network at all. It does not mean the web app should provide the exact same user experience when the app is online or

2

5

46

@dannymoerkerke

Danny Moerkerke

@dannymoerkerke

2 years

The transitions are 100% CSS, zero JavaScript. Currently, What PWA Can Do Today is a SPA and the only reason for that is I wanted native app-like page transitions. I need quite complex JS to this but with the View Transition API it's now only a few lines of CSS. 2/3

1

9

46