Service workers

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
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

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 <[hidden email]> wrote: _______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

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
> lasmiste@

> seaside@.squeakfoundation

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

> seaside@.squeakfoundation

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





--
Sent from: http://forum.world.st/Seaside-General-f86180.html
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

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 <[hidden email]> wrote: _______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

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 &lt;

> lasmiste@

> seaside@.squeakfoundation

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

> seaside@.squeakfoundation

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





--
Sent from: http://forum.world.st/Seaside-General-f86180.html
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside