[Seaside] Service workers

Dave lasmiste at gmail.com
Sun Jul 28 16:37:44 UTC 2019


Hi Esteban,
I took another approach, because I thought the issue was related to
WARestfulFilter. I.E. the wrong version had this kind of relationship:

application := WAAdmin register: HelloPWASpike asApplicationAt:
'HelloPWASpike'.
application addFilterFirst: HelloPWASpikeServiceWorker new.

I didn't really understand the reason of the problem of the above version,
but I think it is something related to seaside, anyway I'll investigate it
later.

Then I changed the approach and I considered the WARestfulHandler.

So the initialization code became:
WAAdmin register: HelloPWASpike at: 'HelloPWASpike'. 
Because now HelloPWASpike is a WARestfulHandler and it is working like a
charm.

Following, I put my code that is a simple translation of this example:
https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605

You can play with it and install it on your phone. There is an error on
icons, but I haven't used Zinc that serves static files nor WAFileLibrary
(icons wasn't my priority).

Enjoy!
Dave



'From Pharo5.0 of 16 April 2015 [Latest update: #50772] on 28 July 2019 at
4:24:24.284408 pm'!
WARestfulHandler subclass: #HelloPWASpike
	instanceVariableNames: ''
	classVariableNames: ''
	poolDictionaries: ''
	category: 'MySpikes-Pwa'!

!HelloPWASpike methodsFor: 'rendering' stamp: 'Dave 7/28/2019 00:16'!
indexHtml

	<path: '/index.html'>
	<get>
	<produces: 'text/html'>
	^ '<!!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
 <link rel="stylesheet" href="css/style.css">
<link rel="manifest" href="manifest.json">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="white"/>
</head>
<body class="fullscreen">
  <div class="container">
    
Hello World!!

  </div>

</body>
</html>'! !

!HelloPWASpike methodsFor: 'rendering' stamp: 'Dave 7/28/2019 00:09'!
styleCss
	<path: '/css/style.css'>
	<get>
	<produces: 'text/css'>
	^ 'body {
  font-family: sans-serif;
}

/* Make content area fill the entire browser window */
html,
.fullscreen {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Center the content in the browser window */
.container {
  margin: auto;
  text-align: center;
}

.title {
  font-size: 3rem;
}'! !

!HelloPWASpike methodsFor: 'rendering' stamp: 'Dave 7/28/2019 00:17'!
swJs

	<path: '/sw.js'>
	<get>
	<produces: 'application/javascript'>
	^ 'var cacheName = "hello-pwa";
var filesToCache = [  
	"/HelloPWASpike/manifest.json",  
  "/HelloPWASpike/index.html",  
  "/HelloPWASpike/css/style.css",  
  "/HelloPWASpike/js/main.js"
];

/* Start the service worker and cache all of the app"s content */
self.addEventListener("install", function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener("fetch", function(e) {
console.log("Fetch request for:", e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});
'! !

!HelloPWASpike methodsFor: 'rendering' stamp: 'Dave 7/28/2019 00:13'!
manifestJson
	<path: '/manifest.json'>
	<get>
	<produces: 'application/json'>
	^ '{
  "name": "Hello World",
  "short_name": "Hello",
  "lang": "en-US",
  "start_url": "/HelloPWASpike/index.html",
  "display": "standalone",
  "background_color": "white",
  "theme_color": "white"
}'! !

!HelloPWASpike methodsFor: 'rendering' stamp: 'Dave 7/27/2019 18:29'!
mainJs
	<path: '/js/main.js'>
	<get>
	<produces: 'application/javascript'>
	^ 'window.onload = () => {
  "use strict";

  if ("serviceWorker" in navigator) {
    navigator.serviceWorker
             .register("./sw.js");
  }
}'! !






Esteban A. Maringolo wrote
> In the Browser's developer console what answer are you getting for the
> MyApp/swJs request?
> 
> Regards,
> 
> Esteban A. Maringolo
> 
> On Thu, Jul 25, 2019 at 6:41 PM Dave <

> lasmiste@

> > wrote:
>>
>> Thank you Esteban, I put some halts in the selectors you told me, but I
>> haven't found anything weird
>>
>> Cheers
>> Dave
>>
>>
>> Esteban A. Maringolo wrote
>> > I used Seaside-REST in the past and it is great to "complement"
>> > existing Seaside behavior or reusing some of the code, but if you were
>> > to build a complete app from scratch maybe Teapot/Tealight
>> > <https://github.com/astares/tealight> is a better fit for this
>> case,
>> > since you remove Seaside's server adaptor "middleware" from the stack.
>> >
>> > I don't know whether Seaside's strongest feature (stateful server side
>> > rendering) will be a big plus for PWAs, but I'm interested in your
>> > experience nonetheless, since these kinds of approaches are
>> > commonplace these days and might be useful for particular "sections"
>> > of a full-fledged Seaside app.
>> >
>> > As for your particular question you should put a breakpoint/halt at
>> > the different entry points:
>> > * ZnSeasideServerAdaptorDelegate>>handleRequest:
>> > * WAServerAdaptor>>handleRequest:
>> > * WARequestHandler>>handleFiltered:
>> >
>> > Or to catch any error during the request:
>> > WAServerAdaptor default server debugMode: true
>> >
>> >
>> > Regards,
>> >
>> > Esteban A. Maringolo
>> >
>> > On Thu, Jul 25, 2019 at 11:29 AM Dave <
>>
>> > lasmiste@
>>
>> > > wrote:
>> >>
>> >> Hi guys!!
>> >>
>> >> I'm playing with Seaside-REST to implement a PWA
>> >> (https://en.wikipedia.org/wiki/Progressive_web_applications). I don't
>> >> really
>> >> know if it is feasible, but I try :-)
>> >>
>> >> The first issue I'm facing is the serviceworker, it seems it does not
>> >> listen
>> >> for fetch requests and I'm guessing because Seaside or Zinc are doing
>> >> something under the hood.
>> >>
>> >> This is my code to register the service worker
>> >>
>> >> mainJs
>> >>
>> > 
> <get>
>> >>
>> > 
> <produces: 'application/javascript'>
>> >>         ^ 'window.onload = () => {
>> >>   "use strict";
>> >>
>> >>   if ("serviceWorker" in navigator) {
>> >>
>> >>
>> *navigator.serviceWorker.register("MyApp/swJs")*.then(function(registration)
>> >> {
>> >>     console.log("Service Worker registered with scope:",
>> >> registration.scope);
>> >>   }).catch(function(err) {
>> >>     console.log("Service Worker registration failed:", err);
>> >>   });
>> >>   }
>> >> }'
>> >>
>> >>
>> >> And this is the code of the serviceworker
>> >>
>> >> swJs
>> >>
>> > 
> <get>
>> >>
>> > 
> <produces: 'application/javascript'>
>> >>         ^ '/* Serve cached content when offline */
>> >> *self.addEventListener("fetch",* function(e) {
>> >>   console.log("Fetch request for:", e.request.url);
>> >> });'
>> >>
>> >> The serviceworker is successfully registered but I'm expecting a log
>> >> entry
>> >> every time I point to an url on my domain, unfortunately that doesn't
>> >> happen.
>> >>
>> >> I'm mimicking the code of this example
>> >>
>> https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605
>> >> even if I'm trying to further simplifying it
>> >>
>> >> Can you help me, please?
>> >> Dave
>> >>
>> >>
>> >>
>> >> --
>> >> Sent from: http://forum.world.st/Seaside-General-f86180.html
>> >> _______________________________________________
>> >> seaside mailing list
>> >>
>>
>> > seaside at .squeakfoundation
>>
>> >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>> > _______________________________________________
>> > seaside mailing list
>>
>> > seaside at .squeakfoundation
>>
>> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>>
>>
>>
>> --
>> Sent from: http://forum.world.st/Seaside-General-f86180.html
>> _______________________________________________
>> seaside mailing list
>> 

> seaside at .squeakfoundation

>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> _______________________________________________
> seaside mailing list

> seaside at .squeakfoundation

> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside





--
Sent from: http://forum.world.st/Seaside-General-f86180.html


More information about the seaside mailing list